web前端開發(fā)規(guī)范.doc

嵌套。 ● 書寫鏈接地址時避免重定向。 href="http://www.kahn1990.com/" //即在URL地址后面加“/” ● HTML中對于屬性的定義，確保全部使用雙引號，絕不要使用單引號 2.4 css 書寫規(guī)范 ● 為了欺騙W3C的驗(yàn)證工具,可將代碼分為兩個文件，一個是針對所有瀏覽器,一個只針對IE。即將所有符合W3C的代碼寫到一個文件中,而一些IE中必須而又不能通過W3C驗(yàn)證的代碼（如: cursor:hand;）放到另一個文件中，再用下面的方法導(dǎo)入。 ● CSS樣式新建或修改盡量遵循以下原則。 根據(jù)新建樣式的適用范圍分為三級：全站級、產(chǎn)品級、頁面級。 盡量通過繼承和層疊重用已有樣式。 不要輕易改動全站級CSS。改動后，要經(jīng)過全面測試。 ● CSS屬性顯示順序。 顯示屬性 元素位置 元素屬性 元素內(nèi)容屬性 CSS書寫順序。 .header { /* 顯示屬性 */ display || 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 vertical-align cursor content }; 兼容多個瀏覽器時，將標(biāo)準(zhǔn)屬性寫在底部。 -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari和Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 *//標(biāo)準(zhǔn)屬性 ● 使用選擇器時，命名比較短的詞匯或者縮寫的不允許直接定義樣式。 .hd,.bd,.td{};//如這些命名 可用上級節(jié)點(diǎn)進(jìn)行限定。 .recommend-mod .hd 多選擇器規(guī)則之間換行，即當(dāng)樣式針對多個選擇器時每個選擇器占一行。 button.btn, input.btn, input[type="button"] {…}; 優(yōu)化CSS選擇器。 #header a { color: #444; };/*CSS選擇器是從右邊到左邊進(jìn)行匹配*/ 瀏覽器將檢查整個文檔中的所有鏈接和每個鏈接的父元素，并遍歷文檔樹去查找ID為header的祖先元素，如果找不到header將追溯到文檔的根節(jié)點(diǎn)，解決方法如下。 避免使用通配規(guī)則和相鄰兄弟選擇符、子選擇符,、后代選擇符、屬性選擇符等選擇器 不要限定id選擇符，如div#header（提權(quán)的除外） 不要限定類選擇器，如ul.recommend（提權(quán)的除外） 不要使用 ul li a 這樣長的選擇符 避免使用標(biāo)簽子選擇符，如#header > li > a ● 使用z-index屬性盡量z-index的值不要超過150（通用組的除外），頁面中的元素內(nèi)容的z-index不能超過10（提示框等模塊除外但維持在150以下），不允許直接使用（999~9999）之間大值。 ● 盡量避免使用CSS Hack。 property:value; /* 所有瀏覽器 */ +property:value; /* IE7 */ _property:value; /* IE6 */ *property:value; /* IE6/7 */ property:value\9; /* IE6/7/8/9，即所有IE瀏覽器 */ * 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-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 { … }; /* 反面示例 */ ● 六個不要三個避免一個使用。 不要在標(biāo)簽上直接寫樣式 不要在CSS中使用expression 不要在CSS中使用@import 不要在CSS中使用!important 不要在CSS中使用“*”選擇符 不要將CSS樣式寫為單行 避免使用filter 避免使用行內(nèi)（inline）樣式 避免使用“*”設(shè)置{margin: 0; padding: 0;} 使用after或overflow的方式清浮動 ● 減少使用影響性能的屬性。 position:absolute; float:left;//如這些定位或浮動屬性 減少在CSS中使用濾鏡表達(dá)式和圖片repeat, 尤其在body當(dāng)中,渲染性能極差, 如果需要用repeat的話,圖片的寬或高不能少于8px。 2.5 javaScript書寫規(guī)范 ● 命名規(guī)范。 常量名 全部大寫并單詞間用下劃線分隔 如：CSS_BTN_CLOSE、TXT_LOADING 對象的屬性或方法名 小駝峰式（little camel-case） 如：init、bindEvent、updatePosition 示例：Dialog.prototype = { init: function () {}, bindEvent: function () {}, updatePosition: function () {} … }; 類名（構(gòu)造器） -->小駝峰式但首字母大寫 -->如：Current、DefaultConfig 函數(shù)名 -->小駝峰式 -->如：current()、defaultConfig() 變量名 -->小駝峰式 -->如：current、defaultConfig 私有變量名 -->小駝峰式但需要用_開頭 -->如：_current、_defaultConfig 變量名的前綴 -->續(xù) ● 代碼格式。 "()"前后需要跟空格 "="前后需要跟空格 ","后面需要跟空格 JSON對象需格式化對象參數(shù) if、while、for、do語句的執(zhí)行體用"{}"括起來 "{}"格式如下。 if (a==1) { //代碼 }; 避免額外的逗號。 var arr = [1,2,3,]; for-in循環(huán)體中必須用hasOwnProperty方法檢查成員是否為自身成員，避免來自原型鏈上的污染。 長語句可考慮斷行。 TEMPL_SONGLIST.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ī)制沖突，“.”或“+”這類操作符放在行尾。 TEMPL_SONGLIST.replace({TABLE}, da[results]). replace({PREV_NUM}, prev). replace({NEXT_NUM}, next). replace({CURRENT_NUM}, current). replace({TOTAL_NUM}, da.page_total); 如果模塊代碼中，使用其它全局變量想跳過JSLint的檢查，可以在該文件中加入/*global*/聲明。 /*global alert: true, console: true, top: true, setTimeout: true */ 使用嚴(yán)格的條件判斷符。用===代替==，用!==代替!=，避免掉入==造成的陷阱 在條件判斷時，這樣的一些值表示false。 null undefined與null相等 字符串 數(shù)字0 NaN 在==時，則會有一些讓人難以理解的陷阱。 (function () { var undefined; undefined == null; // true 1 == true; //true 2 == true; // false 0 == false; // true 0 == ; // true NaN == NaN;// false [] == false; // true [] == ![]; // true })(); 對于不同類型的 == 判斷，有這樣一些規(guī)則，順序自上而下： undefined與null相等 一個是number一個是string時，會嘗試將string轉(zhuǎn)換為number 嘗試將boolean轉(zhuǎn)換為number 0或1 嘗試將Object轉(zhuǎn)換成number或string 而這些取決于另外一個對比量，即值的類型，所以對于0、空字符串的判斷，建議使用=== 。===會先判斷兩邊的值類型，類型不匹配時為false。 ● 下面類型的對象不建議用new構(gòu)造。 new Number new String new Boolean new Object //用{}代替 new Array //用[]代替 引用對象成員用obj.prop代替obj["prop"]，除非屬性名是變量。 ● 從number到string的轉(zhuǎn)換。 /** 推薦寫法*/ var a = 1; typeof(a); //"number" console.log(a); //1 var aa=a+; typeof(aa); //"string" console.log(aa); //1 /** 不推薦寫法*/ new String(a)或a.toString() 從string到number的轉(zhuǎn)換，使用parseInt，必須顯式指定第二個參數(shù)的進(jìn)制。 /** 推薦寫法*/ var a = 1; var aa = parseInt(a,10); typeof(a); //"string" console.log(a); //1 typeof(aa); //"number" console.log(aa); //1 從float到integer的轉(zhuǎn)換。 /** 推薦寫法*/ Math.floor/Math.round/Math.ceil /** 不推薦寫法*/ parseInt 字符串拼接應(yīng)使用數(shù)組保存字符串片段，使用時調(diào)用join方法。避免使用+或+=的方式拼接較長的字符串，每個字符串都會使用一個小的內(nèi)存片段，過多的內(nèi)存片段會影響性能。 /**推薦的拼接方式array的push、join*/ var str=[], list=[測試A,測試B]; for (var i=0 , len=list.length; i < len; i++) { str.push( ); }; console.log(str.join()); // /** 不推薦的拼接方式+=*/ var str = , list=[測試A,測試B]; for (var i = 0, len = list.length; i< len; i++) { str+=; }; console.log(str); // ● 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩浴? 不要使用with，void，evil，eval_r，innerText ● 注重HTML分離, 減小reflow, 注重性能。 2.6圖片規(guī)范 ● 命名應(yīng)用小寫英文、數(shù)字、_組合，便于團(tuán)隊(duì)其他成員理解。 header_btn.gif header_btn2.gif ● 頁面元素類圖片均放入img文件夾, 測試用圖片放于img/testimg文件夾，psd源圖放入img/psdimg文件夾。 ● 圖片格式僅限于gif、png、jpg等。 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請為ie-6單獨(dú)定義背景，并盡量避免使用半透明的png圖片。 ● 背景圖片請盡可能使用sprite技術(shù), 減小http請求。 2.7注釋規(guī)范 ● JAVASCRIPT、CSS文件注釋需要標(biāo)明作者、文件版本、創(chuàng)建/修改時間、重大版本修改記錄、函數(shù)描述、文件版本、創(chuàng)建或者修改時間、功能、作者等信息。 /* * 注釋塊 */ 中間可添加如下信息 @file 文件名 @addon 把一個函數(shù)標(biāo)記為另一個函數(shù)的擴(kuò)張，另一個函數(shù)的定義不在源文件中 @argument 用大括號中的自變量類型描述一個自變量 @author 函數(shù)/類作者的姓名 @base 如果類是繼承得來，定義提供的類名稱 @class 用來給一個類提供描述，不能用于構(gòu)造器的文檔中 @constructor 描述一個類的構(gòu)造器 @deprecated 表示函數(shù)/類已被忽略 @exception 描述函數(shù)/類產(chǎn)生的一個錯誤 @exec @extends 表示派生出當(dāng)前類的另一個類 @fileoverview 表示文檔塊將用于描述當(dāng)前文件，這個標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前 @final 指出函數(shù)/類 @ignore 讓jsdoc忽視隨后的代碼 @link 類似于@link標(biāo)簽，用于連接許多其它頁面 @member 定義隨后的函數(shù)為提供的類名稱的一個成員 @param 用大括號中的參數(shù)類型描述一個參數(shù) @private 表示函數(shù)/類為私有，不應(yīng)包含在生成的文檔中 @requires 表示需要另一個函數(shù)/類 @return 描述一個函數(shù)的返回值 @see 連接到另一個函數(shù)/類 @throws 描述函數(shù)/類可能產(chǎn)生的錯誤 @type 指定函數(shù)/成員的返回類型 @version 函數(shù)/類的版本號 2.8 css瀏覽器兼容 CSS hack 一、標(biāo)識區(qū)別: 區(qū)別IE6,IE7,IE8,FF。 1. IE都能識別* ;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*; 2. IE6能識別*,但不能識別!important; IE6在樣式前面加_3. IE7能識別*,也能識別!important;4.IE8能識別\9例如:background:red \9; 5. firefox不能識別*,但能識別!important; 1.IE6和firefox的區(qū)別: background:orange;*background:blue;意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍(lán)色. 2. IE6和IE7的區(qū)別: background: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).開發(fā)平臺的選擇 在Firefox上編寫CSS,同時兼容其他瀏覽器的.這樣做肯定會比在IE做好再到別的瀏覽器兼容來得容易,因?yàn)镮E對老標(biāo)準(zhǔn)支持還是很不錯的,而IE的一些特有功能人家卻不支持.所以推薦以Firefox結(jié)合Firebug擴(kuò)展作為平臺。 (2). CSS Hack的順序 使用Firefox作為平臺,只要代碼寫得夠標(biāo)準(zhǔn),其實(shí)要Hack的地方不會很多的, IE以外的瀏覽器幾乎都不會有問題,所以可以暫時忽略, 順序如下:Firefox -> IE6 -> IE7 ->其他(3). Hack的方法 說到方法有兩種,一種是在不同文件中處理,另一種則是在同一個文件中處理.其實(shí)作用是相同的,只是出發(fā)點(diǎn)不一樣而已. 同一文件中處理. 如: id="bgcolor"的控件要在IE6中顯示藍(lán)色, IE7中顯示綠色, Firefox等其他瀏覽器中顯示紅色。 IE6不認(rèn)!important,也不認(rèn)*+html.所以IE6只能是blue. IE7認(rèn)!important,也認(rèn)*+html,優(yōu)先度: (*+html + !important) > !important > +html. IE7可以是red,blue和green,但green的優(yōu)先度最高. Firefox和其他瀏覽器都認(rèn)!important. !important優(yōu)先, Firefox可以是red和blue,但red優(yōu)先度高.上述的優(yōu)先符號均是CSS3標(biāo)準(zhǔn)允許的,其他瀏覽器也還有其他的Hack方法,但我迄今還沒遇到過Firefox正常, IE以外的其他瀏覽器不正常的情況,所以無可分享.只要代碼規(guī)范,相信這種情況的發(fā)生應(yīng)該是很罕見(JavaScript除外). 2.不同文件中處理. 為什么同一文件中可以處理還要寫在多個文件里面針對不同的瀏覽器?這是為了欺騙W3C的驗(yàn)證工具,其實(shí)只需要兩個文件,一個是針對所有瀏覽器的,一個只為IE服務(wù).將所有符合W3C的代碼寫到一個里面去,而一些IE中必須的,又不能通過W3C驗(yàn)證的代碼(如: cursor:hand;)放到另一個文件中,再用下面的方法導(dǎo)入. 23