Web前端開(kāi)發(fā)規(guī)范文檔

Web前端開(kāi)發(fā)規(guī)范文檔

規(guī)范目的:

  • 使開(kāi)發(fā)流程更加規(guī)范化。

通用規(guī)范:

  • TAB鍵用兩個(gè)空格代替(WINDOWS下TAB鍵占四個(gè)空格,LINUX下TAB鍵占八個(gè)空格)。

  • CSS樣式屬性或者JAVASCRIPT代碼后加“;”方便壓縮工具“斷句”。

  • 文件內(nèi)容編碼均統(tǒng)一為UTF-8

  • CSSJAVASCRIPT中的非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用,
    以避免編碼錯(cuò)誤時(shí)亂碼顯示。

文件規(guī)范:

  • 文件名用英文單詞,多個(gè)單詞用駝峰命名法。

  • 一些瀏覽器會(huì)將含有這些詞的作為廣告攔截,文件命名、ID、CLASS等所有命名避免以上詞匯。

    ``` adadsadvbannersponsorggguanggguanggao

    
    

html書(shū)寫(xiě)規(guī)范:

  • 為每個(gè)HTML頁(yè)面的第一行添加標(biāo)準(zhǔn)模式(standard
    mode)的聲明,確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。

    <!DOCTYPE html>
    

    文檔類型聲明統(tǒng)一為HTML5聲明類型,編碼統(tǒng)一為UTF-8。

    <meta charset="UTF-8">
    

    <HEAD>中添加信息。

    <meta name="author" content="smile@kang.cool">//作者
    <meta name="description" content="hello">//網(wǎng)頁(yè)描述
    <meta name="keywords" 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" content="_top">//用來(lái)防止別人在框架里調(diào)用你的頁(yè)面
    <meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳轉(zhuǎn)頁(yè)面,5指時(shí)間停留5秒 網(wǎng)頁(yè)搜索機(jī)器人向?qū)АS脕?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" 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è)置為edge
    mode ,從而通知IE采用其所支持的最新的模式。

    <meta http-equiv="X-UA-Compatible" content="IE=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"></script>
    </body>
    </html>
    

    引入JAVASCRIPT庫(kù)文件,文件名須包含庫(kù)名稱及版本號(hào)及是否為壓縮版。

    jQuery-1.8.3.min.js
    

    引入JAVASCRIPT插件, 文件名格式為庫(kù)名稱+.+插件名稱。

    jQuery.cookie.js
    
  • HTML屬性應(yīng)當(dāng)按照以下給出的順序依次排列,來(lái)確保代碼的易讀性。

    class
    id 、 name
    data-*
    src、for、 type、 href
    title、alt
    aria-*、 role
    

    編碼均遵循XHTML標(biāo)準(zhǔn),
    標(biāo)簽、屬性、屬性命名由小寫(xiě)英文、數(shù)字和_組成,且所有標(biāo)簽必須閉合,屬性值必須用雙引號(hào)"",
    避免使用中文拼音盡量簡(jiǎn)易并要求語(yǔ)義化。

    CLASS --> nHeadTitle --> CLASS遵循小駝峰命名法(little camel-case)
    ID --> n_head_title --> ID遵循名稱+_
    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兼容所有瀏覽器,但I(xiàn)E瀏覽器會(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)意符。

    <    -->    <
    >    -->    >
    空格  -->     
    
  • 含有描述性表單元素(INPUTTEXTAREA)添加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)添加自定義屬性,避免使用其他命名方式。

  • 語(yǔ)義化HTML

  • 盡可能減少<DIV>嵌套。

  • 書(shū)寫(xiě)鏈接地址時(shí)避免重定向。

     //即在URL地址后面加“/”
    
  • HTML中對(duì)于屬性的定義,確保全部使用雙引號(hào),絕不要使用單引號(hào)

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="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 {
    /* 顯示屬性 */
        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)的除外)
    不要限定類選擇器,如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。

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 () {}
                    …
                    };
    類名(構(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ī)制沖突,“.”或“+”這類操作符放在行尾。

    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ì)于不同類型的 == 判斷,有這樣一些規(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ì)比量,即值的類型,所以對(duì)于0、空字符串的判斷,建議使用===
    ===會(huì)先判斷兩邊的值類型,類型不匹配時(shí)為false

  • 下面類型的對(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( '<div>'+ list[i] + '</div>');
    };
    console.log(str.join('')); //<div>測(cè)試A</div><div>測(cè)試B</div>
    /** 不推薦的拼接方式+=*/
    var str = '',
        list=['測(cè)試A','測(cè)試B'];
    for (var i = 0, len = list.length; i< len; i++) {
        str+='<div>' + list[i] + '</div>';
    };
    console.log(str); //<div>測(cè)試A</div><div>測(cè)試B</div>
    
  • 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩浴?/p>

    不要使用with,void,evil,eval_r,innerText
    
  • 注重HTML分離, 減小reflow, 注重性能。

圖片規(guī)范:

  • 命名應(yīng)用小寫(xiě)英文數(shù)字_組合,便于團(tuán)隊(duì)其他成員理解。

    header_btn.gif
    header_btn2.gif
    
  • 頁(yè)面元素類圖片均放入img文件夾,
    測(cè)試用圖片放于img/testimg文件夾,psd源圖放入img/psdimg文件夾。

  • 圖片格式僅限于gifpngjpg等。

  • png圖片做圖片時(shí),
    要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果,
    請(qǐng)為ie-6單獨(dú)定義背景,并盡量避免使用半透明的png圖片。

  • 背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求。

注釋規(guī)范:

  • JAVASCRIPTCSS文件注釋需要標(biāo)明作者、文件版本、創(chuàng)建/修改時(shí)間、重大版本修改記錄、函數(shù)描述、文件版本、創(chuàng)建或者修改時(shí)間、功能、作者等信息。

    /* * 注釋塊 */
    

    中間可添加如下信息。

    @file 文件名
    @addon 把一個(gè)函數(shù)標(biāo)記為另一個(gè)函數(shù)的擴(kuò)張,另一個(gè)函數(shù)的定義不在源文件中
    @argument 用大括號(hào)中的自變量類型描述一個(gè)自變量
    @author 函數(shù)/類作者的姓名
    @base 如果類是繼承得來(lái),定義提供的類名稱
    @class 用來(lái)給一個(gè)類提供描述,不能用于構(gòu)造器的文檔中
    @constructor 描述一個(gè)類的構(gòu)造器
    @deprecated 表示函數(shù)/類已被忽略
    @exception 描述函數(shù)/類產(chǎn)生的一個(gè)錯(cuò)誤
    @exec @extends 表示派生出當(dāng)前類的另一個(gè)類
    @fileoverview 表示文檔塊將用于描述當(dāng)前文件,這個(gè)標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前
    @final 指出函數(shù)/類
    @ignore 讓jsdoc忽視隨后的代碼
    @link 類似于@link標(biāo)簽,用于連接許多其它頁(yè)面
    @member 定義隨后的函數(shù)為提供的類名稱的一個(gè)成員
    @param 用大括號(hào)中的參數(shù)類型描述一個(gè)參數(shù)
    @private 表示函數(shù)/類為私有,不應(yīng)包含在生成的文檔中
    @requires 表示需要另一個(gè)函數(shù)/類
    @return 描述一個(gè)函數(shù)的返回值
    @see 連接到另一個(gè)函數(shù)/類
    @throws 描述函數(shù)/類可能產(chǎn)生的錯(cuò)誤
    @type 指定函數(shù)/成員的返回類型
    @version 函數(shù)/類的版本號(hào)
    

開(kāi)發(fā)及測(cè)試工具約定:

  • 編碼格式化,三碼統(tǒng)一。

  • 測(cè)試工具: 前期開(kāi)發(fā)僅測(cè)試FireFox & IE6 & IE7 & IE8 & IE9 & Opera &
    Chrome & Safari

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 基本準(zhǔn)則 符合web標(biāo)準(zhǔn),html語(yǔ)義化;html,css,JavaScript分離;代碼簡(jiǎn)潔有序,盡可能減少冗余...
    喵嗚君閱讀 830評(píng)論 0 1
  • 一.規(guī)范目的 使開(kāi)發(fā)流程更加規(guī)范化。 二.通用規(guī)范 TAB鍵用兩個(gè)空格代替(WINDOWS下TAB鍵占四個(gè)空格,L...
    overflow_hidden閱讀 2,464評(píng)論 0 0
  • 在新媒體盛行的今天,幾乎人人都開(kāi)公眾號(hào),但是粉絲數(shù)卻相差甚遠(yuǎn),無(wú)論公眾號(hào)的定位是什么領(lǐng)域,其本質(zhì)都是,滿足讀者的認(rèn)...
    Miss墨菲閱讀 291評(píng)論 8 6
  • 最近上海的雨連綿不斷,倒也還好,現(xiàn)在的上海,比起雨季的廈門(mén)不會(huì)太過(guò)潮濕。提起了廈門(mén),真的有些想念它,想念那可以解憂...
    靜覺(jué)閱讀 286評(píng)論 2 2
  • 系統(tǒng)實(shí)現(xiàn)機(jī)制涉及的關(guān)鍵技術(shù) 1. 系統(tǒng)實(shí)現(xiàn)機(jī)制 采集系統(tǒng)通過(guò)Strus2實(shí)現(xiàn)了MVC模式。實(shí)現(xiàn)機(jī)制如下: 2. 涉...
    艾剪疏閱讀 1,150評(píng)論 0 1