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

嵌套。 ● 書(shū)寫(xiě)鏈接地址時(shí)避免重定向。 //即在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)入。 ● 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 { /* 顯示屬性 */ 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 }; 兼容多個(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è)選擇器占一行。 button.btn, input.btn, input[type="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)的選擇符 避免使用標(biāo)簽子選擇符，如#header > li > a ● 使用z-index屬性盡量z-index的值不要超過(guò)150（通用組的除外），頁(yè)面中的元素內(nèi)容的z-index不能超過(guò)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 { … }; /* 反面示例 */ ● 六個(gè)不要三個(gè)避免一個(gè)使用。 不要在標(biāo)簽上直接寫(xiě)樣式 不要在CSS中使用expression 不要在CSS中使用@import 不要在CSS中使用!important 不要在CSS中使用“*”選擇符 不要將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ì)象的屬性或方法名 小駝峰式（little camel-case） 如：init、bindEvent、updatePosition 示例：Dialog.prototype = { init: function () {}, bindEvent: function () {}, updatePosition: function () {} … }; 類(lèi)名（構(gòu)造器） -->小駝峰式但首字母大寫(xiě) -->如：Current、DefaultConfig 函數(shù)名 -->小駝峰式 -->如：current()、defaultConfig() 變量名 -->小駝峰式 -->如：current、defaultConfig 私有變量名 -->小駝峰式但需要用_開(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_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ī)制沖突，“.”或“+”這類(lèi)操作符放在行尾。 TEMPL_SONGLIST.replace({TABLE}, da[results]). 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)格的條件判斷符。用===代替==，用!==代替!=，避免掉入==造成的陷阱 在條件判斷時(shí)，這樣的一些值表示false。 null undefined與null相等 字符串 數(shù)字0 NaN 在==時(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ī)則，順序自上而下： undefined與null相等 一個(gè)是number一個(gè)是string時(shí)，會(huì)嘗試將string轉(zhuǎn)換為number 嘗試將boolean轉(zhuǎn)換為number 0或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 Number new String new Boolean new Object //用{}代替 new Array //用[]代替 引用對(duì)象成員用obj.prop代替obj["prop"]，除非屬性名是變量。 ● 從number到string的轉(zhuǎn)換。 /** 推薦寫(xiě)法*/ var a = 1; typeof(a); //"number" console.log(a); //1 var 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); //"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,測(cè)試B]; for (var i=0 , len=list.length; i < len; i++) { str.push( ); }; console.log(str.join()); // /** 不推薦的拼接方式+=*/ var str = , list=[測(cè)試A,測(cè)試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)用小寫(xiě)英文、數(shù)字、_組合，便于團(tuán)隊(duì)其他成員理解。 header_btn.gif header_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í)間、功能、作者等信息。 /* * 注釋塊 */ 中間可添加如下信息 @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) @ignore 讓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í)別* ;標(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ū)別: 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).開(kāi)發(fā)平臺(tái)的選擇 在Firefox上編寫(xiě)CSS,同時(shí)兼容其他瀏覽器的.這樣做肯定會(huì)比在IE做好再到別的瀏覽器兼容來(lái)得容易,因?yàn)镮E對(duì)老標(biāo)準(zhǔn)支持還是很不錯(cuò)的,而IE的一些特有功能人家卻不支持.所以推薦以Firefox結(jié)合Firebug擴(kuò)展作為平臺(tái)。 (2). CSS Hack的順序 使用Firefox作為平臺(tái),只要代碼寫(xiě)得夠標(biāo)準(zhǔn),其實(shí)要Hack的地方不會(huì)很多的, IE以外的瀏覽器幾乎都不會(huì)有問(wèn)題,所以可以暫時(shí)忽略, 順序如下:Firefox -> IE6 -> IE7 ->其他(3). Hack的方法 說(shuō)到方法有兩種,一種是在不同文件中處理,另一種則是在同一個(gè)文件中處理.其實(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)先符號(hào)均是CSS3標(biāo)準(zhǔn)允許的,其他瀏覽器也還有其他的Hack方法,但我迄今還沒(méi)遇到過(guò)Firefox正常, IE以外的其他瀏覽器不正常的情況,所以無(wú)可分享.只要代碼規(guī)范,相信這種情況的發(fā)生應(yīng)該是很罕見(jiàn)(JavaScript除外). 2.不同文件中處理. 為什么同一文件中可以處理還要寫(xiě)在多個(gè)文件里面針對(duì)不同的瀏覽器?這是為了欺騙W3C的驗(yàn)證工具,其實(shí)只需要兩個(gè)文件,一個(gè)是針對(duì)所有瀏覽器的,一個(gè)只為IE服務(wù).將所有符合W3C的代碼寫(xiě)到一個(gè)里面去,而一些IE中必須的,又不能通過(guò)W3C驗(yàn)證的代碼(如: cursor:hand;)放到另一個(gè)文件中,再用下面的方法導(dǎo)入. 23