前端開發規範文檔（初稿）_ZenDei技術網路在線

總體原則縮進對於所有編程語言，我們要求縮進必須是軟tab（用空格字元）。在你的文本編輯器里敲 Tab 應該等於 4個空格。可讀性 vs 壓縮對於維護現有文件，我們認為可讀性比節省文件大小更重要。大量空白和適當的ASCII藝術都是受鼓勵的。任何開發者都不必故意去壓縮HTML或CSS，也不必把 ...

總體原則

縮進

對於所有編程語言，我們要求縮進必須是軟tab（用空格字元）。在你的文本編輯器里敲 Tab 應該等於 4個空格。
可讀性 vs 壓縮

對於維護現有文件，我們認為可讀性比節省文件大小更重要。大量空白和適當的ASCII藝術都是受鼓勵的。任何開發者都不必故意去壓縮HTML或CSS，也不必把Javascript代碼最小化得面目全非。

我們會在伺服器端或build過程中自動最小化並gzip壓縮所有的靜態客戶端文件，例如CSS和JS
HTML,CSS,JS代碼分離

html代碼儘量保持整潔，採用最簡單的代碼層級完成複雜的佈局要求，方便以後的維護和擴展

css代碼本身都是全局的，所有應當採用css模塊化思想，約束css的規則，儘量減少對全局的污染

JS代碼分為功能代碼和業務代碼，功能代碼儘量抽取成功能組件，方便團隊內其他同事的使用
命名規範

文件及文件夾: 全部英文小寫字母+數字或連接符"- , _ "，不可出現其他字元如：jquery.1.x.x.js
文件：調用 /libs 文件需包含版本號，壓縮文件需包含min關鍵詞，其他插件則可不包含如：/libs/modernizr-1.7.min.js
ID: 小駝峰式命名法如：firstName topBoxList footerCopyright
Class: [減號連接符] 如：top-item main-box box-list-item-1
儘量使用語義明確的單詞命名，避免 left bottom 等方位性的單獨的詞語命名樣式

html規範

基本語法

在屬性上，使用雙引號，不要使用單引號。
不要在自動閉合標簽結尾處使用斜線 - HTML5 規範指出他們是可選的。
不要忽略可選的關閉標簽（例如，和）。
儘量用class來渲染樣式，避免用id來寫樣式

Doctype

在每個 HTML 頁面開頭使用這個簡單地 doctype 來啟用標準模式，使其每個瀏覽器中儘可能一致的展現。

1 <!DOCTYPE html>

字元編碼

通過聲明一個明確的字元編碼，讓瀏覽器輕鬆、快速的確定適合網頁內容的渲染方式。這樣做之後，需要避免在 HTML 中出現字元實體，直接提供字元與文檔一致的編碼（通常是 UTF-8）。

1 <head>
2   <meta charset="UTF-8">
3 </head>

相容模式

優先使用最新版本的IE 和 Chrome 內核

1 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

基本的SEO

<meta name="keywords" content="your keywords">
<meta name="description" content="your description">

viewport 設置

viewport: 一般指的是瀏覽器視窗內容區的大小，不包含工具條、選項卡等內容；
width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度；
device-width: 設備解析度寬度，輸出設備的屏幕可見寬度；
initial-scale: 初始縮放比例；
minimum-scale: 最小縮放比例；
maximum-scale: 最大縮放比例；
user-scalable: 時候可以允許用戶對頁面進行縮放
minimal-ui，不支持（去除導航欄）為移動端設備優化，設置可見區域的寬度和初始縮放比例。

<meta name="viewport" content="width=640,user-scalable=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

favicon

在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：

在 Web Server 根目錄放置 favicon.ico 文件；
使用 link 指定 favicon；

<link rel="shortcut icon" href="path/to/favicon.ico">

移動端頁頭推薦配置

    <meta charset="UTF-8">
    <title>title</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=640,user-scalable=no" />
    <!--<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">-->
    <meta http-equiv="cleartype" content="on">
    <meta name="apple-mobile-web-app-title" content="...">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- uc強制豎屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ強制豎屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC強制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ強制全屏 -->
    <meta name="x5-fullscreen" content="true">

CSS 和 JavaScript 結構、樣式、行為分離

儘量確保文檔和模板只包含 HTML 結構，樣式都放到樣式表裡，行為都放到腳本里。
根據 HTML5 規範, 通常在引入 CSS 和 JavaScript 時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的預設值。

<link rel="stylesheet" href="code-guide.css">
<script src="code-guide.js"></script>

<style>
  /* ... */
</style>

實用高於完美

儘量遵循 HTML 標準和語義，但是不應該以浪費實用性作為代價。任何時候都要用儘量小的複雜度和儘量少的標簽來解決問題。
在編寫 HTML 代碼時，需要儘量避免多餘的父節點。很多時候，需要通過迭代和重構來使 HTML 變得更少。 參考下麵的示例:

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

避免用 document.write 生成標簽

用 document.write生成標簽讓內容變得更難查找，更難編輯，<b>性能更差</b>。應該儘量避免這種情況的出現。

CSS 規範

外部文件LINK載入CSS，儘可能減少文件數。載入標簽必須放在文件的 HEAD 部分。
避免使用內聯樣式不要在文件中用內聯式引入的樣式，不管它是定義在樣式標簽里還是直接定義在元素上。這樣會很難追蹤樣式規則
使用 reset.css 讓渲染效果在不同瀏覽器中更一致。
避免使用CSS表達式（Expression）
不要用@import
避免使用ID選擇器
避免使用開銷大的CSS選擇器如：*
禁止給class加上html標簽如：li.list
避免讓選擇符看起來像正則表達式如：[name='aa'] 高級選擇器執行耗時長且不易讀懂，避免使用。
避免直接使用html tag作為樣式選擇器
避免使用 !important
有節制的使用css3偽元素
避免使用css3 低效屬性，如：linear-gradient，borde-image；
使用語義化、通用的命名方式；
使用連字元 - 作為 Class 名稱界定符，不要駝峰命名法和下劃線；
避免選擇器嵌套層級過多，儘量少於 3 級；

用css模塊化

css代碼本身都是全局的，所有應當採用css模塊化思想，約束css的規則，儘量減少對全局的污染

屬性簡寫

堅持限制屬性取值簡寫的使用，屬性簡寫需要你必須顯式設置所有取值。常見的屬性簡寫濫用包括:
padding
margin
font
background
border
border-radius
大多數情況下，我們並不需要設置屬性簡寫中包含的所有值。例如，HTML 頭部只設置上下的 margin，所以如果需要，只設置這兩個值。過度使用屬性簡寫往往會導致更混亂的代碼，其中包含不必要的重寫和意想不到的副作用。

一行還是多行書寫？

css實例都是用的多行的格式，每一對屬性和值占單獨一行。這個是廣泛使用的約定，不僅是在css文件中，也多出現在書里和文章里。許多人認為他的可讀性很好。
然而在和團隊的工作中，尤其是大型的css文件，我是將樣式寫成多行，並使用css模塊化思想:

.alert-window {
       background: #fff; 
       border: 1px solid #ff0; 
       font-weight: bold;
       padding: 10px;
       }
.alert-window .window-title{
　　　　...
　　　　}
.alert-window .window-content{
　　　　...　　
　　　　}
.alert-window .window-buttom{
　　　　...
　　　　}

PS:　　1. 現在純手寫css比較少了，一般都是用sass 和 less 來管理樣式。 2 書寫sass 和 less 一行簡直就是災難 3 css 多行書寫，還有個好處，可以要求團隊，css 輸出按照盒子模型的順序去書寫，更好維護，不強制但是倡導輸出是一致的。

Javascript

命名規範

使用單引號'而不是雙引號"
類的命名使用駱駝命名規則，並且首字母大寫，例如： Account, EventHandler
常量必須使用大寫，在對象（類）或者枚舉變數的前部聲明，駱駝命名規則
類的私有變數和屬性建議以 _開頭。例如：var _buffer; _init:function(){}

變數

必須全部小寫字元組成
變數必須在聲明初始化以後才能使用，即便是 NULL 類型。
在作用域頂端對變數賦值，這有助於避免變數聲明問題和與聲明提升相關的問題
變數不要產生歧義。
相關的變數集應該放在同一代碼塊中，非相關的變數集不應該放在同一代碼塊中。
變數應該儘量保持最小的生存周期。
能直接使用直接量的，不要使用 new ....; 如： a=/\d/g; a=new RegExp('\d','g');

不要用 void

不要用 with 語句

不要用 continue 語句

儘量不要用位運算

PS：前端團隊很少有科班出身的，位運算符效率不見得會有太高的性能，優勢非常不明顯，出發是高強度的演算法需要，否則還是不要有位運算；它會造成代碼的苦澀難懂，不利於後續的維護

不要擴充內置原型（Object,Array,String...）

不要用 eval();

+運算要註意

    '1'+1==2 //false;
    1+1==2 //true

使用簡易條件判斷方式

if (name !== 0 || name !== '' || name!==null || name!==undefined) {
...
}

if (name) {
...
}


if (collection.length > 0) {
  ...
}


if (collection.length) {
...
}

使用三元表達式來代替簡單的if else

if(a){
        d='b'
    }else{
        d='c'
    }

    d=a?'b':'c';

使用&& 和 || 替代簡單的if

if(a){
        b()
    }

    a && c();


    if(bb){
        a=bb
    }else{
        a=2
    }

    a=bb||2

使用數組或json優化if else

if(a=='1' || a=='b' || a=='c' || a=='ss'){
        bb();
    }else{
        ...
    }

    var hasData={
        '1':1,
        'b':1,
        'c':1,
        'ss':1
    }

    if(hasData[a]){
        bb()
    }else{
    ...
    }

不要在非函數塊中(if, while etc)聲明函數

儘管瀏覽器允許你分配函數給一個變數，但壞消息是，不同的瀏覽器用不同的方式解析它
如果一定要定義函數，請用函數表達式方式聲明；
如：

function b(){
    ...
    }

    if(a){
        function b(){
            ...
        }
    }

    var b=function(){
    ...
    }
    if(a){
        b=function(){
            ....
        }
    }

有else的if都要有{}

if(a)
        b()
    else
        c();

    if(a){
        b();
    }else{
        c();
    }

不要有多餘逗號

這會在IE6、IE7和IE9的怪異模式中導致一些問題；同時，在ES3的一些實現中，多餘的逗號會增加數組的長度。在ES5中已經澄清

 var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn',
  };

  var heroes = [
    'Batman',
    'Superman',
  ];

  var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn'
  };

  var heroes = [
    'Batman',
    'Superman'
  ];

使用事件代理

在分配低調（unobtrusive）的事件監聽器時，通常可接受的做法是把事件監聽器直接分派給那些會觸發某個結果動作的元素。不過，偶爾也會有多個元素同時符合觸發條件，給每個元素都分配事件監聽器可能會對性能有負面影響。這種情況下，你就應該改用事件代理了

圖片

儘量使用png8替代gif圖片

不要在移動端手機使用gif動畫圖片

使用雪碧圖，減少css背景圖的載入

使用第三方工具壓縮png24的圖片，可以有非常高的壓縮率

PS：手機端不適用GIF圖的原因是：1.可以用css3動畫來代替，css3動畫只出發頁面複合，性能更好，2 gif動畫都在手機端顯示不流暢，不能使用GPU加速，會造成頁面重排，嚴重影響頁面性能