web前端開發規範文檔

時間 2019-11-18

標籤 web 前端開發規範文檔欄目 HTML 简体版

原文原文鏈接

規範說明javascript

此爲前端開發團隊遵循和約定的代碼書寫規範，意在提升代碼的規範性和可維護性。
css

基本準則html

符合web標準, 語義化html, 結構表現行爲分離, 兼容性優良. 頁面性能方面, 代碼要求簡潔明瞭有序, 儘量的減少服務器負載, 保證最快的解析速度。前端

總規範html5

1.忽略（Omit）協議：如 background: url(http://www.google.com/images/example); 應該寫background: url(//www.google.com/images/example);以方便http與https協議切換，除非必須使用某個協議java

2.書寫時利用IDE實現井井有條的縮進。tab鍵用四個空格代替。linux

　　由於在不一樣系統的編輯工具對tab解析不同，windows下的tab鍵是佔四個空格的位置，而在linux下會變成佔八個空格的位置（除非你本身設定了tab鍵所佔的位置長度）。web

　　如sublime text，在這個工具中能夠對tab鍵進行設置。express

3.標籤屬性使用小寫json

4.尾部不要留有空格，以防diff

5.使用 UTF-8 (no BOM)，文檔中也加入 <meta charset=」utf-8″>

6.文件命名統一使用小寫」.js」，同時推薦」-」而不是」_」

7.TODO(contact) 以及TODO: action item，不要使用@@

HTML 細化規範

1.使用html5的規範<!DOCTYPE html>

2.<img>標籤默認缺省格式：<img src="xxx.png" alt="缺省時文字" /> 避免出現src="" 問題

3.<a>標籤缺省格式：<a href="###" title="連接名稱">xxx</> 注：target="_blank" 根據需求決定

4.<a>標籤預留連接佔位符使用###，參見：a標籤佔位符問題

5.書寫連接地址時, 必須避免重定向，例如：href=」http://itaolun.com/」, 即須在URL地址後面加上「/」

6.全部標籤須要符合XHTML標準閉合

7.一概統一標籤結尾斜槓的書寫形式：<br /> <hr /> 注意之間空格

8.避免使用已過期標籤，如：<b> <u> <i> 而用 <strong> <em>等代替

9.使用data-xxx來添加自定義數據，如：<input data-xxx="yyy"/>

10.避免使用style="xxx:xxx;"的內聯樣式表

特殊符號使用參考HTML 符號實體

11.必須爲含有描述性表單元素(input, textarea)添加label, 如<p>姓名: <input type=」text」 id=」name」 name=」name」 /></p>須寫成:<p><label for=」name」>姓名: </label><input type=」text」 id=」name」 /></p>

CSS 細化規範

1. 每一個樣式屬性後加 ";"

方便壓縮工具"斷句"。

2. Class命名，採用」 - 「[減號鏈接符] 對class中的字母分隔：

用"-"隔開比使用駝峯是更加清晰。
產品線-產品-模塊-子模塊，命名的時候也可使用這種方式

ID: 小駝峯式命名法如：

firstName topBoxList footerCopyright

3. 空格的使用，如下規則執行：

.hotel-content {

font-weight: bold;

}

選擇器與 { 以前要有空格
屬性名的 : 後要有空格
屬性名的 : 前（禁止）加空格

一個緣由是美觀，其次IE 6存在一個bug，戳bug

4. （推薦）屬性的書寫順序, 舉個例子:

.hotel-content {

     /* 定位 */

     display: block;

     position: absolute;

     left: 0;

     top: 0;

     /* 盒模型 */

     width: 50px;

     height: 50px;

     margin: 10px;

     border: 1px solid black;

     / *其餘* /

     color: #efefef;

}

定位相關, 常見的有：display position left top float 等
盒模型相關, 常見的有：width height margin padding border 等
其餘屬性

　按照這樣的順序書寫可見提高瀏覽器渲染dom的性能

　　簡單舉個例子，網頁中的圖片，若是沒有設置width和height，在圖片載入以前，他所佔的空間爲0，可是當他加載完畢以後，那塊爲0的空間忽然被撐開了，這樣會致使，他下面的元素從新排列和渲染，形成重繪（repaint）和迴流（reflow）。咱們在寫css的時候，把元素的定位放在前頭，首先讓瀏覽器知道該元素是在文本流內仍是外，具體在頁面的哪一個部位，接着讓瀏覽器知道他們的寬度和高度，border等這些佔用空間的屬性，其餘的屬性都是在這個固定的區域內渲染的，差很少就是這個意思吧~

http://www.mozilla.org/css/base/content.css

5. （推薦）當編寫針對特定html結構的樣式時，使用元素名 + 類名

/* 全部的nav都是針對ul編寫的 */

ul.nav {

     ......

}

".a div"和".a div.b"，爲何後者好？若是需求有所變化，在".a"下有多加了一個div，試問，開始的樣式是否是會影響後來的div啊~

6. （不推薦）ie使用filter,（禁止）使用expression

這裏主要是效率問題，應該當格外注意，要少用燒CPU的東西~

7. CSS註釋用「/* */」表示，單行註釋時，被註釋對象與先後註釋符各保留一個空格，且單獨佔一行；多行註釋時，開始註釋符和結束註釋符各佔一行。例如：

/* 註釋CSS */

/* 

table {

    border-collapse: collapse;

} 

*/

JS細化規範

1.換行

每行代碼應少於120個字符，多於這個數量時，能夠考慮換行，「.」或「+」這類操做符應放在行尾，換行後的代碼必須在換行前多一層縮進。
若是函數或方法中的參數較長，要進行適當的劃分。
禁止在return關鍵字及要返回的表達式之間換行。例如：

// 實際是返回的是undefined，不是1

function test() {

    return

        1;

}

2.代碼行

禁止把多個短語句寫在一行中，即一行只寫一條語句。
if、for、do、while、switch、case、default、break、continue等語句自佔一行。
if、for、do、while等全部的循環體和判斷體的執行語句部分都須要用"{}"括起來，禁止省略花括號。例如：
```
// 錯誤的

if (i < 5) i += 1;

 

// 正確的

if (i < 5) {

    i += 1

}
```

3.對齊

代碼塊的分界符{}，「{」跟隨在上一行，而且前邊有一空格隔開，「}」應獨佔一行而且位於同一列，同時與引用它們的語句左對齊。
在函數體的開始、類的定義以及if、for、do、while、switch、case語句中的程序都要採用如上的縮進方式。

4.空格

關鍵字以後必須有空格，以突出關鍵字。
函數名、方法名與左括號「(」之間不能保留空格，例如：

// 錯誤的

function getInfo () {

    // code

}

 

// 正確的

function getInfo() {

    // code

}

在聲明函數表達式時，function與左括號「(」之間不能保留空格，例如：

// 錯誤的

var user = function () {

    // code

}

 

// 正確的

var user = function() {

    // code

}

逗號後面加空格。
賦值操做符、比較操做符、算術操做符、邏輯操做符、位域操做符，如「=」、「+=」「>=」、「<=」、「+」、「*」、「%」、「&&」、「||」等二元操做符的先後應當加空格。
"!"、"~"、"++"、"--"、"&"（地址運算符）等單目操做符先後不加空格。
"."、"[]"先後不加空格。

5.空行

在每一個類聲明以後、每一個函數定義結束以後都要加空行。
在一個函數體內，邏揖上密切相關的語句之間不加空行，其它地方應加空行分隔。

6.使用嚴格的條件判斷符。用===代替==，用!==代替!=

7.避免額外的逗號。如：var arr = [1,2,3,]

8.語句必須都有分號結尾，除了for，function，if，switch，try，while。

9.左花括號置於行末，右花括號置於行首。

10.下面類型的對象不建議用new構造：new Number，new String，new Boolean，new Object(用{}代替)，new Array(用[]代替)。

11.數組成員間的「,」後面須要保留一個空格。

12.禁止在js/json中使用javascript保留關鍵字詞命名，在IE中容易形成錯誤。關鍵字（break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with），關鍵詞（abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile）。

13.建議使用「+」做爲換行鏈接符，而不是使用「\」。

14.提示信息禁止使用歸納籠統的語言描述，應該簡潔明瞭，看到信息當即能定位到錯誤，如提示用戶信息報錯用「該用戶不存在」，而不是用「後臺返回數據有誤」、「網絡超時」。