web前端開(kāi)發(fā)規(guī)范_第1頁(yè)
web前端開(kāi)發(fā)規(guī)范_第2頁(yè)
web前端開(kāi)發(fā)規(guī)范_第3頁(yè)
web前端開(kāi)發(fā)規(guī)范_第4頁(yè)
web前端開(kāi)發(fā)規(guī)范_第5頁(yè)
已閱讀5頁(yè)，還剩18頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、Web前端開(kāi)發(fā)規(guī)范手冊(cè)一、規(guī)范目的1.1 概述 . 1二、文件規(guī)范2.1 文件命名規(guī)則.12.2 文件存放位置.22.3 html 書(shū)寫(xiě)規(guī)范.22.4 css 書(shū)寫(xiě)規(guī)范.72.5 JavaScript 書(shū)寫(xiě)規(guī)范.122.6 圖片規(guī)范.192.7 注釋規(guī)范.20 2.8 css 瀏覽器兼容.21一、規(guī)范目的1.1 概述為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔. 本規(guī)范文檔一經(jīng)確認(rèn),&

2、#160;前端開(kāi)發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺(tái)頁(yè)面開(kāi)發(fā). 本文檔如有不對(duì)或者不合適的地方請(qǐng)及時(shí)提出, 經(jīng)討論決定后可以更改此文檔.二、文件規(guī)范2.1文件命名規(guī)則文件夾和文件名一律全部用小寫(xiě)英文單詞，禁止出現(xiàn)簡(jiǎn)拼、拼音、數(shù)字、無(wú)意義的命名，英文單詞盡量使用一個(gè)進(jìn)行描述，簡(jiǎn)潔易懂；多個(gè)單詞用駝峰命名法。2.2 文件存放位置cn 存放中文 HTML 文件en 存放英文 HTML 文件flash 存放 Flash 文件images 存放圖片文件imagestudio

3、0;存放 PSD 源文件flashstudio 存放 flash 源文件inc 存放include 文件library 存放 DW 庫(kù)文件media 存放多媒體文件project 存放工程項(xiàng)目資料temp 存放客戶(hù)原始資料js 存放 JavaScript 腳本css 存放 CSS 文件 2.3 html 書(shū)寫(xiě)規(guī)范 為每個(gè)HTML頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，確保在每

4、個(gè)瀏覽器中擁有一致的展現(xiàn)。· <!DOCTYPE html> 文檔類(lèi)型聲明統(tǒng)一為HTML5聲明類(lèi)型，編碼統(tǒng)一為UTF-8。<meta charset="UTF-8"><HEAD>中添加信息。<meta name="author" content="smilekang.cool">/作者<meta name="description" content="hello">/網(wǎng)頁(yè)描述<meta name="keywor

5、ds" content="a,b,c">/關(guān)鍵字,“，”分隔<meta http-equiv="expires" content="Wed, 26 Feb 1997 08：21：57 GMT">/設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新調(diào)閱<meta http-equiv="Pragma" content="no-cache">/禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容<meta http-equiv="Window-target

6、" content="_top">/用來(lái)防止別人在框架里調(diào)用你的頁(yè)面<meta http-equiv="Refresh" content="5;URL= 網(wǎng)頁(yè)搜索機(jī)器人向?qū)?。用?lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引<meta name="robots" content="none">/content的參數(shù)有all,none,index,noindex,follow,nofollow，默認(rèn)是all<link rel="Shortcut Icon

7、" href="favicon.ico">/收藏圖標(biāo)<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">/網(wǎng)頁(yè)不會(huì)被緩存IE支持通過(guò)特定<meta>標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的IE版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為edgemode ，從而通知IE采用其所支持的最新的模式。<meta http-equiv="X-UA-Compatible" content="I

8、E=Edge"> 非特殊情況下CSS樣式文件外鏈至HEAD之間，JAVASCRIPT文件外鏈至頁(yè)面底部。<!DOCTYPE html><html><head> <link rel="stylesheet" href="css/main.css"></head><body> <!- 邏輯代碼 -> <!- 邏輯代碼底部 -> <script src="lib/jquery/jquery-2.1.1.min.js">

9、</script></body></html>引入JAVASCRIPT庫(kù)文件，文件名須包含庫(kù)名稱(chēng)及版本號(hào)及是否為壓縮版。jQuery-1.8.3.min.js引入JAVASCRIPT插件, 文件名格式為庫(kù)名稱(chēng)+.+插件名稱(chēng)。jQuery.cookie.js HTML屬性應(yīng)當(dāng)按照以下給出的順序依次排列，來(lái)確保代碼的易讀性。Classid 、 namedata-*src、for、 type、 hreftitle、altaria-*、 role避免使用中文拼音盡量簡(jiǎn)易并要求語(yǔ)義化。CLASS -> nHeadTitle -> CLASS遵循小駝峰命名法

10、（little camel-case）ID -> n_head_title -> ID遵循名稱(chēng)+_NAME -> N_Head_Title -> NAME屬性命名遵循首個(gè)字母大寫(xiě)+_<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>當(dāng)JAVASCRIPT獲取單個(gè)元素時(shí)，通常使用document.getElementById來(lái)獲取dom元素，document.getElementById兼容所有瀏覽器，但

11、IE瀏覽器會(huì)混淆元素的ID和NAME屬性，所以要區(qū)分ID和NAME命名。<input type="text" name="test"><div id="test"></div><button onclick="alert(document.getElementById('test').tagName)"></button><!- ie6下為INPUT -> 特殊符號(hào)應(yīng)使用轉(zhuǎn)意符。< -> <> ->

12、 >空格 -> 含有描述性表單元素（INPUT，TEXTAREA）添加LABEL。<p> <label for="test">測(cè)試</label> <input type="text" id="test" /></p> 多用無(wú)兼容性問(wèn)題的HTML內(nèi)置標(biāo)簽,比如span、em、strong、optgroup、label等,需要自定義html標(biāo)簽屬性時(shí)，首先考慮是否存在已有的合適標(biāo)簽可替換，如果沒(méi)有,可使用須以“data-”為前綴來(lái)添加自定義屬性，避免使用其他命名方式

13、。 語(yǔ)義化HTML。 盡可能減少<DIV>嵌套。 書(shū)寫(xiě)鏈接地址時(shí)避免重定向。href=" /即在URL地址后面加“/” HTML中對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)2.4 css 書(shū)寫(xiě)規(guī)范 為了欺騙W3C的驗(yàn)證工具,可將代碼分為兩個(gè)文件，一個(gè)是針對(duì)所有瀏覽器,一個(gè)只針對(duì)IE。即將所有符合W3C的代碼寫(xiě)到一個(gè)文件中,而一些IE中必須而又不能通過(guò)W3C驗(yàn)證的代碼（如:cursor:hand;）放到另一個(gè)文件中，再用下面的方法導(dǎo)入。<!- 放置所有瀏覽器樣式-><link rel="stylesheet" type=&qu

14、ot;text/css" href=""><!- 只放置IE必須，而不能通過(guò)w3c的-><!-if IE <link rel="stylesheet" href=""><!endif-> CSS樣式新建或修改盡量遵循以下原則。根據(jù)新建樣式的適用范圍分為三級(jí)：全站級(jí)、產(chǎn)品級(jí)、頁(yè)面級(jí)。盡量通過(guò)繼承和層疊重用已有樣式。不要輕易改動(dòng)全站級(jí)CSS。改動(dòng)后，要經(jīng)過(guò)全面測(cè)試。 CSS屬性顯示順序。顯示屬性元素位置元素屬性元素內(nèi)容屬性CSS書(shū)寫(xiě)順序。.header /* 顯示屬性 */ dis

15、play | visibility list-style position top | right | bottom | left z-index clear float/* 自身屬性 */ width max-width | min-width height max-height | min-height overflow | clip margin padding outline border background/* 文本屬性 */ color font text-overflow text-align text-indent line-height white-space vertic

16、al-align cursor content ;兼容多個(gè)瀏覽器時(shí)，將標(biāo)準(zhǔn)屬性寫(xiě)在底部。-moz-border-radius: 15px; /* Firefox */-webkit-border-radius: 15px; /* Safari和Chrome */border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */標(biāo)準(zhǔn)屬性 使用選擇器時(shí)，命名比較短的詞匯或者縮寫(xiě)的不允許直接定義樣式。.hd,.bd,.td;/如這些命名可用上級(jí)節(jié)點(diǎn)進(jìn)行限定。.recommend-mod .hd多選擇器規(guī)則之間換行，即當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占

17、一行。button.btn,input.btn,inputtype="button" ;優(yōu)化CSS選擇器。#header a color: #444; ;/*CSS選擇器是從右邊到左邊進(jìn)行匹配*/瀏覽器將檢查整個(gè)文檔中的所有鏈接和每個(gè)鏈接的父元素，并遍歷文檔樹(shù)去查找ID為header的祖先元素，如果找不到header將追溯到文檔的根節(jié)點(diǎn)，解決方法如下。避免使用通配規(guī)則和相鄰兄弟選擇符、子選擇符,、后代選擇符、屬性選擇符等選擇器不要限定id選擇符，如div#header（提權(quán)的除外）不要限定類(lèi)選擇器，如ul.recommend（提權(quán)的除外）不要使用 ul li a 這樣長(zhǎng)的選

18、擇符避免使用標(biāo)簽子選擇符，如#header > li > a 使用z-index屬性盡量z-index的值不要超過(guò)150（通用組的除外），頁(yè)面中的元素內(nèi)容的z-index不能超過(guò)10（提示框等模塊除外但維持在150以下），不允許直接使用（9999999）之間大值。 盡量避免使用CSS Hperty:value; /* 所有瀏覽器 */+property:value; /* IE7 */_property:value; /* IE6 */*property:value; /* IE6/7 */property:value9; /* IE6/7/8/9，即所有IE瀏覽器

19、*/* html selector ; /* IE6 */*:first-child+html selector ; /* IE7 */html>body selector ; /* 非IE6 */-moz-document url-prefix() ; /* firefox */media all and (-webkit-min-device-pixel-ratio:0) ; /* saf3+/chrome1+ */media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-

20、pixel-ratio:0) ; /* opera */media screen and (max-device-width: 480px) ; /* iPhone/mobile webkit */ 避免使用低效的選擇器。body > * ;ul > li > a ;#footer > h3 ;ul#top_blue_nav ;#searbar span.submit a ; /* 反面示例 */ 六個(gè)不要三個(gè)避免一個(gè)使用。不要在標(biāo)簽上直接寫(xiě)樣式不要在CSS中使用expression不要在CSS中使用import不要在CSS中使用!important不要在CSS中使用“

21、*”選擇符不要將CSS樣式寫(xiě)為單行避免使用filter避免使用行內(nèi)（inline）樣式避免使用“*”設(shè)置margin: 0; padding: 0;使用after或overflow的方式清浮動(dòng) 減少使用影響性能的屬性。position:absolute;float:left;/如這些定位或浮動(dòng)屬性減少在CSS中使用濾鏡表達(dá)式和圖片repeat,尤其在body當(dāng)中,渲染性能極差, 如果需要用repeat的話,圖片的寬或高不能少于8px。2.5 javaScript書(shū)寫(xiě)規(guī)范 命名規(guī)范。常量名 全部大寫(xiě)并單詞間用下劃線分隔 如：CSS_BTN_CLOSE、TXT_LOADING對(duì)象的屬性或方法名 小

22、駝峰式（little camel-case） 如：init、bindEvent、updatePosition 示例：Dtotype = init: function () , bindEvent: function () , updatePosition: function () ;類(lèi)名（構(gòu)造器） ->小駝峰式但首字母大寫(xiě) ->如：Current、DefaultConfig函數(shù)名 ->小駝峰式 ->如：current()、defaultConfig()變量名 ->小駝峰式 ->如：current、defaultConfig私有變量名 -&g

23、t;小駝峰式但需要用_開(kāi)頭 ->如：_current、_defaultConfig變量名的前綴 ->續(xù) 代碼格式。"()"前后需要跟空格"="前后需要跟空格","后面需要跟空格JSON對(duì)象需格式化對(duì)象參數(shù)if、while、for、do語(yǔ)句的執(zhí)行體用""括起來(lái)""格式如下。if (a=1) /代碼;避免額外的逗號(hào)。var arr = 1,2,3,;for-in循環(huán)體中必須用hasOwnProperty方法檢查成員是否為自身成員，避免來(lái)自原型鏈上的污染。長(zhǎng)語(yǔ)句可考慮斷行。TEMPL_SO

24、NGLIST.replace('TABLE', da'results') .replace('PREV_NUM', prev) .replace('NEXT_NUM', next) .replace('CURRENT_NUM', current) .replace('TOTAL_NUM', da.page_total);為了避免和JSLint的檢驗(yàn)機(jī)制沖突，“.”或“+”這類(lèi)操作符放在行尾。TEMPL_SONGLIST.replace('TABLE', da'results&

25、#39;). replace('PREV_NUM', prev). replace('NEXT_NUM', next). replace('CURRENT_NUM', current). replace('TOTAL_NUM', da.page_total);如果模塊代碼中，使用其它全局變量想跳過(guò)JSLint的檢查，可以在該文件中加入/*global*/聲明。/*global alert: true, console: true, top: true, setTimeout: true */使用嚴(yán)格的條件判斷符。用=代替=，用!=

26、代替!=，避免掉入=造成的陷阱在條件判斷時(shí)，這樣的一些值表示false。nullundefined與null相等字符串''數(shù)字0NaN在=時(shí)，則會(huì)有一些讓人難以理解的陷阱。(function () var undefined; undefined = null; / true 1 = true; /true 2 = true; / false 0 = false; / true 0 = '' / true NaN = NaN;/ false = false; / true = !; / true)();對(duì)于不同類(lèi)型的 = 判斷，有這樣一些規(guī)則，順序自上而下：un

27、defined與null相等一個(gè)是number一個(gè)是string時(shí)，會(huì)嘗試將string轉(zhuǎn)換為number嘗試將boolean轉(zhuǎn)換為number0或1嘗試將Object轉(zhuǎn)換成number或string而這些取決于另外一個(gè)對(duì)比量，即值的類(lèi)型，所以對(duì)于0、空字符串的判斷，建議使用=。=會(huì)先判斷兩邊的值類(lèi)型，類(lèi)型不匹配時(shí)為false。 下面類(lèi)型的對(duì)象不建議用new構(gòu)造。new Numbernew Stringnew Booleannew Object /用代替new Array /用代替引用對(duì)象成員用p代替obj"prop"，除非屬性名是變量。 從number到st

28、ring的轉(zhuǎn)換。/* 推薦寫(xiě)法*/var a = 1;typeof(a); /"number"console.log(a); /1var aa=a+''typeof(aa); /"string"console.log(aa); /'1'/* 不推薦寫(xiě)法*/new String(a)或a.toString()從string到number的轉(zhuǎn)換，使用parseInt，必須顯式指定第二個(gè)參數(shù)的進(jìn)制。/* 推薦寫(xiě)法*/var a = '1'var aa = parseInt(a,10);typeof(a); /&q

29、uot;string"console.log(a); /'1'typeof(aa); /"number"console.log(aa); /1從float到integer的轉(zhuǎn)換。/* 推薦寫(xiě)法*/Math.floor/Math.round/Math.ceil/* 不推薦寫(xiě)法*/parseInt字符串拼接應(yīng)使用數(shù)組保存字符串片段，使用時(shí)調(diào)用join方法。避免使用+或+=的方式拼接較長(zhǎng)的字符串，每個(gè)字符串都會(huì)使用一個(gè)小的內(nèi)存片段，過(guò)多的內(nèi)存片段會(huì)影響性能。/*推薦的拼接方式array的push、join*/var str=, list='測(cè)試A

30、','測(cè)試B'for (var i=0 , len=list.length; i < len; i+) str.push( '<div>'+ listi + '</div>');console.log(str.join(''); /<div>測(cè)試A</div><div>測(cè)試B</div>/* 不推薦的拼接方式+=*/var str = '', list='測(cè)試A','測(cè)試B'for (var i =

31、 0, len = list.length; i< len; i+) str+='<div>' + listi + '</div>'console.log(str); /<div>測(cè)試A</div><div>測(cè)試B</div> 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?。不要使用with，void，evil，eval_r，innerText 注重HTML分離, 減小reflow, 注重性能。2.6圖片規(guī)范 命名應(yīng)用小寫(xiě)英文、數(shù)字、_組合，便于團(tuán)隊(duì)其他成員理解。header_btn.g

32、ifheader_btn2.gif 頁(yè)面元素類(lèi)圖片均放入img文件夾,測(cè)試用圖片放于img/testimg文件夾，psd源圖放入img/psdimg文件夾。 圖片格式僅限于gif、png、jpg等。用png圖片做圖片時(shí),要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果,請(qǐng)為ie-6單獨(dú)定義背景，并盡量避免使用半透明的png圖片。 背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求。2.7注釋規(guī)范 JAVASCRIPT、CSS文件注釋需要標(biāo)明作者、文件版本、創(chuàng)建/修改時(shí)間、重大版本修改記錄、函數(shù)描述、文件版本、創(chuàng)建或者修改時(shí)間、功能、作者等信息。/* * 注釋塊

33、 */中間可添加如下信息file 文件名addon 把一個(gè)函數(shù)標(biāo)記為另一個(gè)函數(shù)的擴(kuò)張，另一個(gè)函數(shù)的定義不在源文件中argument 用大括號(hào)中的自變量類(lèi)型描述一個(gè)自變量author 函數(shù)/類(lèi)作者的姓名base 如果類(lèi)是繼承得來(lái)，定義提供的類(lèi)名稱(chēng)class 用來(lái)給一個(gè)類(lèi)提供描述，不能用于構(gòu)造器的文檔中constructor 描述一個(gè)類(lèi)的構(gòu)造器deprecated 表示函數(shù)/類(lèi)已被忽略exception 描述函數(shù)/類(lèi)產(chǎn)生的一個(gè)錯(cuò)誤exec extends 表示派生出當(dāng)前類(lèi)的另一個(gè)類(lèi)fileoverview 表示文檔塊將用于描述當(dāng)前文件，這個(gè)標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前final 指出函數(shù)/類(lèi)ign

34、ore 讓jsdoc忽視隨后的代碼link 類(lèi)似于link標(biāo)簽，用于連接許多其它頁(yè)面member 定義隨后的函數(shù)為提供的類(lèi)名稱(chēng)的一個(gè)成員param 用大括號(hào)中的參數(shù)類(lèi)型描述一個(gè)參數(shù)private 表示函數(shù)/類(lèi)為私有，不應(yīng)包含在生成的文檔中requires 表示需要另一個(gè)函數(shù)/類(lèi)return 描述一個(gè)函數(shù)的返回值see 連接到另一個(gè)函數(shù)/類(lèi)throws 描述函數(shù)/類(lèi)可能產(chǎn)生的錯(cuò)誤type 指定函數(shù)/成員的返回類(lèi)型version 函數(shù)/類(lèi)的版本號(hào) 2.8 css瀏覽器兼容  CSS hack一、標(biāo)識(shí)區(qū)別:區(qū)別 IE6,IE7,IE8,FF。1. IE 都能識(shí)別* ;&

35、#160;標(biāo)準(zhǔn)瀏覽器(如 FF)不能識(shí)別*;2. IE6能識(shí)別*,但不能識(shí)別 !important; IE6在樣式前面加_3. IE7能識(shí)別*,也能識(shí)別!important;4.IE8能識(shí)別9例如:background:red 9;5. firefox 不能識(shí)別*,但能識(shí)別!important;1.IE6和 firefox 的區(qū)別:background:orange;*background:blue;意思就是火狐瀏覽器的背景顏色是橙色,而 IE 瀏覽器的背景色是藍(lán)色.2. IE6和 IE7的區(qū)別:backgroun

36、d:green !important;background:blue;意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色3. IE7和 FF 的區(qū)別:background:orange; *background:green;意思指的是:火狐瀏覽器的背景顏色是橙色,而 IE7的背景顏色是綠色4. FF,IE7,IE6的區(qū)別:background:orange;*background:green !important;*background:blue;意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而 IE6瀏覽器的顏色是藍(lán)色.二、實(shí)踐建議(1). 開(kāi)發(fā)平臺(tái)的選擇在 Firefox 上編寫(xiě) CSS, 同時(shí)兼容其他瀏覽器的. 這樣做肯定會(huì)比在 IE 做好再到別的瀏覽器兼容來(lái)得容易, 

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論