前端代碼編寫規範

時間 2019-12-04

標籤前端代碼編寫規範简体版

原文原文鏈接

前端代碼規範

JavaScript代碼編寫規範

縮進

每一層級由4個空格組成，避免使用製表符（Tab）進行縮進。css

行的長度

每行長度不該該超過80個字符，多於80個字符，應該在運算符後換行，下一行增長兩級縮進（8個字符）html

doSomething(argument1,argument2,argument3,argument4,
        atgument5);

原始值

一、字符串應當始終使用雙引號且保持一行。
二、特殊值null在如下狀況下可用：
（1）用來初始化一個可能被賦值爲對象的變量時使用。
（2）用來和一個已經初始化的變量比較，這個變量有多是對象。
（3）當函數的參數指望是對象時，，被用做參數傳入。
（4）當函數的返回值指望是對象時，被用做返回值傳入。
其他狀況避免使用null
三、避免使用特殊值undefined。判斷一個變量是否認義應當使用typeof操做符。前端

運算符間距

二元運算符先後必須使用一個空格保持表達式整潔，操做符包括運算符和邏輯運算符。java

//好的寫法
var found = (value[i] === item);

if(found && (count > 10)){
  doSomething();
}

括號間距

使用括號時，緊接左括號以後和緊接右括號以前不該該有空格。git

對象直接量

起始左花括號應當同表達式保持一行
每一個屬性的名值對應當保持一個縮進，第一個屬性應當在左花括號後另起一行
每一個屬性的名值對使用不含引號的屬性名，其後緊跟冒號（以前不含空格）
若屬性值是函數類型，函數體在屬性名之下另起一行，並且其先後均應保留一個空行
一組相關屬性先後可插入空行提高代碼的可讀性

結束的右花括號獨佔一行github

var object = {
 
 key1:value1,

 key2:value2,

 func:function() {
   //doSomething
 },

 key3 = value3
};

當對象字面量做爲函數參數時，若值是變量，起始花括號應當同函數名在同一行。canvas

doSomething({
 key1:value1,
 key2:value2
});

註釋

1.單行註釋瀏覽器

獨佔一行的註釋，用來解釋下一行代碼
在代碼行的尾部的註釋，用來解釋它以前的代碼
多行，用來註釋掉一個代碼塊

代碼行尾單行註釋的狀況，應該確保代碼結尾同註釋之間至少一個縮進
單行註釋以前要空格安全

if (condition) {

  //若是代碼執行到這裏，代表經過了安全檢查
   allowed();
}

行內註釋
var result = something + somethingElse; // 行內註釋網絡

2.多行註釋
每一個多行註釋都至少包含以下三行

首行僅僅包括/*註釋開始，該行不該當有其餘內容
接下來的行以*開頭並保持左對齊，這些行能夠文字描述
最後一行以*/開頭並同先前行保持對齊，不該該有文字

註釋前空行，星號後空格

if (condition) {

     /*
      * 若是代碼執行到這裏
      * 說明經過了全部檢測
      */
     allowed();
 }

變量聲明

變量定義放在函數開頭，使用var表達式每行一個變量
除首行，全部行都應該多一層縮進使變量名可以垂直方向對齊
初始化的變量應當在未初始化變量以前

var count = 10,
     name = "Nicoho",
     found = false,
     empty;

函數聲明

函數名和開始圓括號之間不該該有空格
結束圓括號和右邊起始花括號應該有空格，右側花括號和函數關鍵字保持一行
參數名之間應當有在逗號以後保留一個空格
當即被調用的函數應當在調用的外層用圓括號包裹

function outer(arg1, arg2){

  var count = arg1,
      name = arg2,
      found = false,
      empty;
      
  function inner(){
      //代碼
  }
  //調用inner()的代碼
}

命名

變量命名應當採用駝峯命名格式，首字母小寫，每一個單詞首字母大寫，第一個單詞應當是一個名詞，不要在變量命名中使用下劃線
函數命名也採用駝峯命名格式，首字母小寫，第一個單詞應當是動詞，和變量名進行區分
構造函數命名採用駝峯命名格式，首字母大寫，以非動詞開頭
常量的命名應當是全部字母大寫，不一樣字母之間用單個下劃線隔開
對象的屬性和方法命名同變量和函數，私有屬性或者方法，在前面加一個下劃線

賦值

給變量賦值時，若是右側是含有比較語句的表達式，須要用圓括號包裹

等號運算符

使用===（嚴格相等）和！==（嚴格不相等）替代相等（==）和不等（！=）來避免弱類型轉換錯誤

三元操做符

三元操做符應當僅僅用在條件賦值語句中，而不要做爲if語句的替代品

var value = condition ？ value1 ： value2;

語句

一、簡單語句
每行最多隻包含一條語句，全部簡單的語句以分號（；）結束。
二、複合語句

括起來的語句應當比較複合語句多縮進一個層級
開始的大括號應當在複合語句所在行的末尾；結束的大括號獨佔一行，且與符合語句開始保持一樣的縮進
如果if語句開始的關鍵字，其後緊跟一個空格，起始大括號在空格以後

if語句

if (condition) {
    statements
}

毫不容許在if語句中中省略花括號，單行語句一樣須要花括號

if (condition) {
    statements
} else if (condition) {
    statements
} else {
    statements
}

for語句

for語句的初始化部分不該該有變量聲明

var i,
    len;
    for (i=0, len=10; i < len; i++){
        //代碼
    }

當使用for-in語句時，記得使用hasOwnProperty()進行雙重檢查來過濾出對象的成員.

switch語句

switch (value) {
    case 1:
        /*falls through*/
        
    case 2:
        doSomething();
        break;
        
    case 3:
        return true;
        
    default:
        throw new Error ("This shouldn't happen");
 }

留白

一、兩行空行以下狀況使用

在不一樣的源代碼文件之間
在類和接口定義之間

二、單行空行以下狀況使用

方法之間
方法中局部變量和第一行語句之間
多行或者單行註釋以前
方法中邏輯代碼塊之間以提高代碼的可讀性

三、空格在以下狀況下使用

關鍵字後跟括號的狀況應當用空格隔開
參數列表中逗號以後應當保留一個空格
全部的除了點（.）以外的二元運算符，其操做數都應該用空格隔開。單目運算符的操做數之間不該該用空白隔開
for語句中的表達式之間應當用空格隔開

HTML代碼編寫規範

HTML頭部文檔類型

建議使用 text/html 格式的 HTML。
避免使用XHTML，由於XHTML以及它的屬性，好比application/xhtml+xml在瀏覽器中的應用支持與優化空間都十分有限。
<!DOCTYPE html>

HTML標籤的閉合

一、自閉合的標籤無需閉合，如：<input>、<img>、<br>、<meta>、<link>和<hr> 等
不推薦方式：<input type="text" name="antzone"/></input>
推薦的方式：<input type="text" name="antzone"/>
二、可選閉合標籤建議閉合，如：<body>、<li>
三、閉合標籤必須閉合

HTML頁面使用雙引號，標籤和標籤屬性統一使用小寫形式

縮進

縮進使用soft tab（4個空格），嵌套的節點應該縮進；

HTML標籤嵌套規則

一、HTML4/XHTML的嵌套規則
（1）內聯元素不能嵌套塊元素
（2）<p>元素和<h1>~<h6>元素不能嵌套塊元素
（3）ul,li/ol,li/dl,dt,dd擁有父子級關係的標籤；ul、ol下都只能跟li，dl下只能跟dt.dd
（4）a標籤不能嵌套a；
二、HTML5元素嵌套規則
元素的分類再也不是塊元素或內聯元素這樣來分類（其實歷來就沒有這樣分），而是按照以下分類來分：Flow（流式元素）、Heading（標題元素）、Sectioning（章節元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元數據元素）
使用語義化標籤，儘可能少的使用毫無心義的標籤，僅僅用於設置樣式，語義化的HTML結構，有助於搜索引擎理解，另外一方面多人協做時，能迅速瞭解開發者意圖

HTML多媒體回溯

頁面中的圖片、視頻和canvas 動畫等都要確保有替代的顯示內容。
圖片文件咱們可採用有意義的備選文本（alt屬性規定），視頻和音頻文件咱們能夠爲其加上說明文字或字幕。
例如：<img src="antozen.jpg" alt="網絡圖譜">

代碼格式規則

每個塊狀元素，列表元素和表格元素後，加上一新空白行。
內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。

內容、表現和行爲分離

儘可能在文檔和模板中只包含結構性的HTML；而將全部表現代碼，移入樣式表中；將全部動做行爲，移入腳本之中。

此外，爲使得它們之間的聯繫儘量的小，在文檔和模板中也儘可能少地引入樣式和腳本文件。

主要規則以下:

（1）.頁面中儘可能不要引入超過兩個樣式表，例如main.css和vendor.css。

（2）.頁面中保證只引入一個js文件（若是有多個文件，將它們合併壓縮後引入）。

（3）.不要使用內聯樣式和內部樣式。

（4）.不要使用表象元素，例如<b>, <u>, <center>, <font>和<b>等。

（5）.不使用元素中表象的屬性，例如align="center"。
結構的搭建

採用HTML5標準時開頭應該加上<!DOCTYPE html>

應在head標籤中引入CSS文件，這樣瀏覽器就能夠在輸出HTML以前獲取CSS信息
在<body>標籤的末尾引入JavaScript文件，這樣能夠在頁面顯示以後再編譯JavaScript文件，以加快頁面讀取速度，同時有助於JavaScript對頁面中的元素進行操做

對元素的操做應添加在JavaScript代碼中，而不要在HTML中添加，下面這個例子就是錯誤的，這樣後期難以維護

HTML布爾屬性值

HTML5規範中 disabled、checked、selected 等屬性不用設置值。

HTML代碼註釋

若是可能儘可能不寫註釋，儘量減小文檔的體積；若是必需要添加註釋，那麼就要遵循以下規則:

（1）.詳盡註釋，解釋代碼解決問題、解決思路、是否爲新鮮方案等。
（2）.模塊註釋，github建議不使用模塊結束註釋。
（3）.待辦註釋
如：
特別說明:註釋文本與兩端（--）之間要有一個空格。

網頁標籤語義化

如何判斷網頁標籤語義是否良好：去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性
語義化標籤注意的一些問題：

儘量少的使用無語義標籤div和span
語義不明顯時，可用p也可用div的地方，儘可能使用p，由於p默認有上下邊距，去除樣式後的可讀性更好，對兼容特殊終端有利
不要使用純樣式標籤，例如bfontu,改用CSS設置語義上強調的文本能夠包在strong和em標籤裏，strong的默認樣式是加粗，而em的默認樣式是斜體

部分標籤的語義：
div 主要用於佈局，分割頁面的結構;
ul/ol 主要用於無序/有序列表;
dl/dt/dd 當頁面中出現第一行爲相似標題/簡述，而後下面爲詳細描述的內容時應該使用該標籤;
span 沒有特殊的意義，能夠用做排版的輔助，而後在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力並且能輔助表單排版;
不推薦使用的標籤：
font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;