前端設計與編碼規範

時間 2019-11-16

標籤前端設計編碼規範欄目字符編碼简体版

原文原文鏈接

V1.2 @Suming Lvjavascript

[TOC]目錄css

0.0 整體原則

0.1 核心思想

表現、內容和行爲的分離。
標記應該是結構良好、語義正確以及廣泛合法。
漸進加強，提升用戶體驗。html

0.2 基本原則

代碼一致性：
經過保持代碼風格和傳統的一致性，咱們能夠減小遺留系統維護的負擔，並下降將來系統崩潰的風險。
最佳實踐：
經過遵守最佳實踐，咱們能確保優化的頁面加載、性能以及可維護的代碼。vue

0.3 適用原則

本規範中條目如無特殊說明的，需參照執行。其中：
*爲建議
**爲必須html5

1.0 命名規則

1.1 項目命名

所有采用小寫方式，以中劃線分隔。
避免單字母命名。命名應具有描述性。

例：my-project-namejava

1.2 目錄命名

參照項目命名規則；react

有複數結構時，要採用複數命名法。jquery

例：scripts, styles, images, data-modelswebpack

1.3 文件命名

參照項目命名規則。git

例：
HTML文件命名：error-report.html
JS文件命名：account-model.js
CSS, LESS文件命名：retina-sprites.less

1.4 HTML命名

參照項目命名規則。

1.5 JS命名

1.5.1 函數命名

使用小駝峯式命名對象、函數和實例。
使用下劃線 _ 開頭命名私有屬性。

1）獲取單個對象的方法用 get 作前綴。
2）獲取多個對象的方法用 list 作前綴。
3）獲取統計值的方法用 count 作前綴。
4）插入的方法用 save（推薦）或 insert 作前綴。
5）刪除的方法用 remove（推薦）或 delete 作前綴。
6）修改的方法用 update 作前綴。

1.5.2 分頁命名

1）傳參值：current（當前頁，默認1）、size（分頁數，默認10）
2）響應值：total（總頁數，默認0）

1.5.3 其餘

說明：任何類、方法、參數、變量，嚴控訪問範圍。過寬泛的訪問範圍，不利於模塊解耦。

1.6 CSS, LESS命名

參照項目命名規則。

2.0 HTML

2.1 語法

用四個空格來代替製表符（tab）。
嵌套元素應當縮進一次（即四個空格）。
對於屬性的定義，確保所有使用雙引號，而不要使用單引號。
不要在自閉合（self-closing）元素的尾部添加斜線。
IMG元素加alt註釋。
爲超過12行的元素塊或關鍵邏輯添加註釋，所有采用以下格式。

<!-- comment Begin -->                       
	...
  <!-- comment Begin -->
複製代碼

HTML裏插入JS時，先後須要增長空格
段落分隔符要使用實際對應的<p>元素，而不是用多個<br>標籤。
在合適的條件下，充分利用<dl>（定義列表）和<blockquote>標籤。
列表中的條目必須老是放置於<ul>、<ol>或<dl>中，永遠不要用一組 <div>或<p>來表示。
給每一個表單裏的字段加上<label>標籤，其中的 for 屬性必須和對應的輸入字段對應，這樣用戶就能夠點擊標籤。同理，給標籤也加上 cursor:pointer; 。
不用使用輸入字段中的 size 屬性。該屬性是和輸入字段裏文本的 font-size 相關的。應該使用CSS寬度。
在某些閉合的</div>標籤旁邊加上一段html註釋，說明這裏閉合的是什麼元素。這在有大量嵌套和縮進的狀況下會頗有用。
不要把表格用於頁面佈局。
在合適的條件下，利用 microformats 和/或者 Microdata ，具體說是 hCard 和 adr。
在合適的條件下，利用<thead>、<tbody>和<th>標籤 (以及Scope屬性）。
避免使用過期的標籤，如：<b>、<u>、<i>，而用<strong>、<em>等代替。
使用data-xxx來添加自定義數據，如：<input data-xxx="yyy"/>。
其餘字符實體請參照：字符實體

2.2 HTML5 Doctype

HTML5下默認使用：<!DOCTYPE HTML>

2.3 lang屬性

html標籤應加上lang屬性。

2.4 meta

meta的使用須要根據具體需求按需選擇，具體可參照：cool-head
Demo：

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
複製代碼

2.5 IE兼容模式

用<meta>標籤能夠指定頁面應該用什麼版本的IE來渲染；

2.6 引入 CSS 和 JavaScript 文件

根據 HTML5 規範，在引入 CSS 和 JavaScript 文件時通常不須要指定 type 屬性，由於 text/css 和 text/javascript 分別是它們的默認值。

2.7 屬性順序*

屬性應該按照特定的順序出現以保證易讀性；

class  
id  
name  
data-*  
src, for, type, href, value , max-length, max, min, pattern  
placeholder, title, alt  
aria-*, role  
required, readonly, disabled  
複製代碼

[//]: # class是爲高可複用組件設計的，因此應處在第一位；
[//]: # id更加具體且應該儘可能少使用，因此將它放在第二位。

2.8 boolean屬性

boolean屬性指不須要聲明取值的屬性，XHTML須要每一個屬性聲明取值，可是HTML5並不須要；

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
    <option value="1" selected>1</option>
</select>
複製代碼

2.9 JS生成標籤

在JS文件中生成標籤讓內容變得更難查找，更難編輯，性能更差。應該儘可能避免這種狀況的出現。

2.10 減小標籤數量

在編寫HTML代碼時，須要儘可能避免多餘的父節點；
不少時候，須要經過迭代和重構來使HTML變得更少。

2.11 實用高於完美

儘可能遵循HTML標準和語義，可是不該該以浪費實用性做爲代價；
任什麼時候候都要用盡可能小的複雜度和儘可能少的標籤來解決問題。

3.0 CSS, SCSS, LESS

使用 normalize.css 讓渲染效果在不一樣瀏覽器中更一致

3.1 縮進

使用4個空格。

3.2 分號

每一個屬性聲明末尾都要加分號。

3.3 空格

如下幾種狀況不須要空格：

屬性名後多個規則的分隔符','前
!important '!'後
屬性值中'('後和')'前
行末不要有多餘的空格
如下幾種狀況須要空格：

屬性值前選擇器'>', '+', '~'先後
'{'前
!important '!'前
@else 先後
屬性值中的','後
註釋'/'後和'/'前

3.4 空行

如下幾種狀況須要空行：

文件最後保留一個空行
'}'後最好跟一個空行，包括less中嵌套的規則
屬性之間須要適當的空行，具體見屬性聲明順序

3.5 換行

如下幾種狀況不須要換行：
'{'前

如下幾種狀況須要換行：
'{'後和'}'前
每一個屬性獨佔一行
多個規則的分隔符','後

3.6 註釋

註釋統一用'/* */'（less或scss中也不要用'//'）。
縮進與下一行代碼保持一致；
可位於一個代碼行的末尾，與代碼間隔一個空格。

3.7 引號

最外層統一使用雙引號；
url的內容要用引號；
屬性選擇器中的屬性值須要引號。

3.8 命名

類名使用小寫字母，以中劃線分隔
id採用駝峯式命名
less或scss中的變量、函數、混合、placeholder採用駝峯式命名

3.9 屬性聲明順序*

相關的屬性聲明按如下順序作分組處理，組之間須要有一個空行。
佈局定位屬性–>自身屬性–>文本屬性–>其餘屬性

// 例：
.declaration-order {
  display: block;
  float: right;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  border: 1px solid #e5e5e5;
  border-radius: 3px;
  width: 100px;
  height: 100px;

  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  color: #333;
  background-color: #f5f5f5;

  opacity: 1;
}


// 下面是推薦的屬性的順序
[
  [
      "display",
      "visibility",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "clip",
      "zoom"
  ],
  [
      "table-layout",
      "empty-cells",
      "caption-side",
      "border-spacing",
      "border-collapse",
      "list-style",
      "list-style-position",
      "list-style-type",
      "list-style-image"
  ],
  [
      "-webkit-box-orient",
      "-webkit-box-direction",
      "-webkit-box-decoration-break",
      "-webkit-box-pack",
      "-webkit-box-align",
      "-webkit-box-flex"
  ],
  [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index"
  ],
  [
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "-webkit-box-sizing",
      "-moz-box-sizing",
      "box-sizing",
      "border",
      "border-width",
      "border-style",
      "border-color",
      "border-top",
      "border-top-width",
      "border-top-style",
      "border-top-color",
      "border-right",
      "border-right-width",
      "border-right-style",
      "border-right-color",
      "border-bottom",
      "border-bottom-width",
      "border-bottom-style",
      "border-bottom-color",
      "border-left",
      "border-left-width",
      "border-left-style",
      "border-left-color",
      "-webkit-border-radius",
      "-moz-border-radius",
      "border-radius",
      "-webkit-border-top-left-radius",
      "-moz-border-radius-topleft",
      "border-top-left-radius",
      "-webkit-border-top-right-radius",
      "-moz-border-radius-topright",
      "border-top-right-radius",
      "-webkit-border-bottom-right-radius",
      "-moz-border-radius-bottomright",
      "border-bottom-right-radius",
      "-webkit-border-bottom-left-radius",
      "-moz-border-radius-bottomleft",
      "border-bottom-left-radius",
      "-webkit-border-image",
      "-moz-border-image",
      "-o-border-image",
      "border-image",
      "-webkit-border-image-source",
      "-moz-border-image-source",
      "-o-border-image-source",
      "border-image-source",
      "-webkit-border-image-slice",
      "-moz-border-image-slice",
      "-o-border-image-slice",
      "border-image-slice",
      "-webkit-border-image-width",
      "-moz-border-image-width",
      "-o-border-image-width",
      "border-image-width",
      "-webkit-border-image-outset",
      "-moz-border-image-outset",
      "-o-border-image-outset",
      "border-image-outset",
      "-webkit-border-image-repeat",
      "-moz-border-image-repeat",
      "-o-border-image-repeat",
      "border-image-repeat",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height"
  ],
  [
      "font",
      "font-family",
      "font-size",
      "font-weight",
      "font-style",
      "font-variant",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "font-smooth",
      "line-height",
      "text-align",
      "-webkit-text-align-last",
      "-moz-text-align-last",
      "-ms-text-align-last",
      "text-align-last",
      "vertical-align",
      "white-space",
      "text-decoration",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "text-indent",
      "-ms-text-justify",
      "text-justify",
      "letter-spacing",
      "word-spacing",
      "-ms-writing-mode",
      "text-outline",
      "text-transform",
      "text-wrap",
      "-ms-text-overflow",
      "text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "-ms-word-wrap",
      "word-wrap",
      "-ms-word-break",
      "word-break"
  ],
  [
      "color",
      "background",
      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
      "background-color",
      "background-image",
      "background-repeat",
      "background-attachment",
      "background-position",
      "-ms-background-position-x",
      "background-position-x",
      "-ms-background-position-y",
      "background-position-y",
      "-webkit-background-clip",
      "-moz-background-clip",
      "background-clip",
      "background-origin",
      "-webkit-background-size",
      "-moz-background-size",
      "-o-background-size",
      "background-size"
  ],
  [
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "opacity",
      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
      "-ms-interpolation-mode",
      "-webkit-box-shadow",
      "-moz-box-shadow",
      "box-shadow",
      "filter:progid:DXImageTransform.Microsoft.gradient",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
      "text-shadow"
  ],
  [
      "-webkit-transition",
      "-moz-transition",
      "-ms-transition",
      "-o-transition",
      "transition",
      "-webkit-transition-delay",
      "-moz-transition-delay",
      "-ms-transition-delay",
      "-o-transition-delay",
      "transition-delay",
      "-webkit-transition-timing-function",
      "-moz-transition-timing-function",
      "-ms-transition-timing-function",
      "-o-transition-timing-function",
      "transition-timing-function",
      "-webkit-transition-duration",
      "-moz-transition-duration",
      "-ms-transition-duration",
      "-o-transition-duration",
      "transition-duration",
      "-webkit-transition-property",
      "-moz-transition-property",
      "-ms-transition-property",
      "-o-transition-property",
      "transition-property",
      "-webkit-transform",
      "-moz-transform",
      "-ms-transform",
      "-o-transform",
      "transform",
      "-webkit-transform-origin",
      "-moz-transform-origin",
      "-ms-transform-origin",
      "-o-transform-origin",
      "transform-origin",
      "-webkit-animation",
      "-moz-animation",
      "-ms-animation",
      "-o-animation",
      "animation",
      "-webkit-animation-name",
      "-moz-animation-name",
      "-ms-animation-name",
      "-o-animation-name",
      "animation-name",
      "-webkit-animation-duration",
      "-moz-animation-duration",
      "-ms-animation-duration",
      "-o-animation-duration",
      "animation-duration",
      "-webkit-animation-play-state",
      "-moz-animation-play-state",
      "-ms-animation-play-state",
      "-o-animation-play-state",
      "animation-play-state",
      "-webkit-animation-timing-function",
      "-moz-animation-timing-function",
      "-ms-animation-timing-function",
      "-o-animation-timing-function",
      "animation-timing-function",
      "-webkit-animation-delay",
      "-moz-animation-delay",
      "-ms-animation-delay",
      "-o-animation-delay",
      "animation-delay",
      "-webkit-animation-iteration-count",
      "-moz-animation-iteration-count",
      "-ms-animation-iteration-count",
      "-o-animation-iteration-count",
      "animation-iteration-count",
      "-webkit-animation-direction",
      "-moz-animation-direction",
      "-ms-animation-direction",
      "-o-animation-direction",
      "animation-direction"
  ],
  [
      "content",
      "quotes",
      "counter-reset",
      "counter-increment",
      "resize",
      "cursor",
      "-webkit-user-select",
      "-moz-user-select",
      "-ms-user-select",
      "user-select",
      "nav-index",
      "nav-up",
      "nav-right",
      "nav-down",
      "nav-left",
      "-moz-tab-size",
      "-o-tab-size",
      "tab-size",
      "-webkit-hyphens",
      "-moz-hyphens",
      "hyphens",
      "pointer-events"
  ]
]
複製代碼

3.10 顏色

顏色16進制用小寫字母；
顏色16進制儘可能用簡寫。

3.11 屬性簡寫

屬性簡寫須要你很是清楚屬性值的正確順序，並且在大多數狀況下並不須要設置屬性簡寫中包含的全部值，因此建議儘可能分開聲明會更加清晰； margin 和 padding 相反，須要使用簡寫；
常見的屬性簡寫包括：
font
background
transition
animation

3.12 媒體查詢

儘可能將媒體查詢的規則靠近與他們相關的規則，不要將他們一塊兒放到一個獨立的樣式文件中，或者丟在文檔的最底部，這樣作只會讓你們之後更容易忘記他們。

.element {
    ...
}

.element-avatar{
    ...
}

@media (min-width: 480px) {
  .element {
      ...
  }

  .element-avatar {
      ...
  }
}
複製代碼

3.13 LESS或SCSS相關

提交的代碼中不要有 @debug；

聲明順序：

@extend
不包含 @content 的 @include
包含 @content 的 @include
自身屬性
嵌套規則
@import 引入的文件不須要開頭的'_'和結尾的'.scss'；

嵌套最多不能超過5層；

@extend 中使用placeholder選擇器；

去掉沒必要要的父級引用符號'&'。

3.14 雜項

不容許有空的規則；

元素選擇器用小寫字母；

去掉小數點前面的0；

去掉數字中沒必要要的小數點和末尾的0；

屬性值'0'後面不要加單位；

同個屬性不一樣前綴的寫法須要在垂直方向保持對齊，具體參照右邊的寫法；

無前綴的標準屬性應該寫在有前綴的屬性後面；

不要在同個規則裏出現重複的屬性，若是重複的屬性是連續的則不要緊；

不要在一個文件裏出現兩個相同的規則；

用 border: 0; 代替 border: none;；

選擇器不要超過4層（在scss中若是超過4層應該考慮用嵌套的方式來寫）；

發佈的代碼中不要有 @import；

儘可能少用'*'選擇器。

4.0 JavaScript

4.1 縮進

使用4個空格
不要混用tab和space；
不要在一處使用多個tab或space；

4.2 單行長度

不要超過80，使用字符串鏈接號鏈接(word wrap可不考慮單行長度)。
程序化生成字符串時，使用模板字符串替代字符串鏈接。

// good
function sayHi(name){
    return `How are you ${name}?`
}
複製代碼

4.3 分號

每行邏輯後面須要以分號結尾

4.4 空格

如下幾種狀況不須要空格：

對象的屬性名後
前綴一元運算符後
後綴一元運算符前
函數調用括號前
不管是函數聲明仍是函數表達式，'('前不要空格
數組的'['後和']'前
對象的'{'後和'}'前
運算符'('後和')'前

如下幾種狀況須要空格：

二元運算符先後
三元運算符'?:'先後
代碼塊'{'前
下列關鍵字前：else, while, catch, finally
下列關鍵字後：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
單行註釋'//'後（若單行註釋和代碼同行，則'//'前也須要），多行註釋'*'後
對象的屬性值前
for循環，分號後留有一個空格，前置條件若是有多個，逗號後留一個空格
不管是函數聲明仍是函數表達式，'{'前必定要有空格
函數的參數之間

// not good
var a = {
  b :1
}

// good
var a = {
  b: 1
}

// not good
++ x
y ++
z = x?1:2

// good
++x
y++
z = x ? 1 : 2

// not good
var a = [ 1, 2 ]

// good
var a = [1, 2]

// not good
var a = ( 1+2 )*3

// good
var a = (1 + 2) * 3

// no space before '(', one space before '{', one space between function parameters
var doSomething = function(a, b, c) {
    // do something
}

// no space before '('
doSomething(item)

// not good
for(i=0;i<6;i++){
  x++
}

// good
for (i = 0; i < 6; i++) {
  x++
}
複製代碼

4.5 空行

如下幾種狀況須要空行：

變量聲明後（當變量聲明在代碼塊的最後一行時，則無需空行）
註釋前（當註釋在代碼塊的第一行時，則無需空行）
代碼塊後（在函數調用、數組、對象中則無需空行）
文件最後保留一個空行

4.6 換行

換行的地方，行末必須有','或者運算符；

如下幾種狀況不須要換行：

下列關鍵字後：else, catch, finally
代碼塊'{'前

如下幾種狀況須要換行：

代碼塊'{'後和'}'前
變量賦值後

// not good
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;
x = y ?
    1 : 2;

// no need line break with 'else', 'catch', 'finally'
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// not good
function test()
{
    ...
}

// good
function test() {
    ...
}

// not good
var a, foo = 7, b,
    c, bar = 8

// good
var a,
    foo = 7,
    b, c, bar = 8
複製代碼

4.7 單行註釋

雙斜線後，必須跟一個空格；

縮進與下一行代碼保持一致；

可位於一個代碼行的末尾，與代碼間隔一個空格。

4.8 多行註釋

最少三行, '*'後跟一個空格，具體參照右邊的寫法；

建議在如下狀況下使用：

難於理解的代碼段
可能存在錯誤的代碼段
瀏覽器特殊的HACK代碼
業務邏輯強相關的代碼

/*
 * one space after '*'
 */
var x = 1
複製代碼

4.9 文檔註釋

各種標籤@param, @method等請參考 JSDoc中文、usejsdoc和JSDoc Guide；

建議在如下狀況下使用：

全部常量
全部函數
全部類

/**
 * @func

 * @desc 一個帶參數的函數

 * @param {string} a - 參數a

 * @param {number} b=1 - 參數b默認值爲1

 * @param {string} c=1 - 參數c有兩種支持的取值  1—表示x  2—表示xx

 * @param {object} d - 參數d爲一個對象

 * @param {string} d.e - 參數d的e屬性

 * @param {string} d.f - 參數d的f屬性

 * @param {object[]} g - 參數g爲一個對象數組

 * @param {string} g.h - 參數g數組中一項的h屬性

 * @param {string} g.i - 參數g數組中一項的i屬性

 * @param {string} [j] - 參數j是一個可選參數

 */

function foo(a, b, c, d, g, j) { ... }
複製代碼

4.10 引號

最外層統一使用單引號。

4.11 變量命名

標準變量採用駝峯式命名（除了對象的屬性外，主要是考慮到cgi返回的數據）
'ID'在變量名中全大寫
'URL'在變量名中全大寫
'Android'在變量名中大寫第一個字母
'iOS'在變量名中小寫第一個，大寫後兩個字母
常量全大寫，用下劃線鏈接
構造函數，大寫第一個字母
jquery對象必須以'$'開頭命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

// not good
var body = $('body');

// good
var $body = $('body');
複製代碼

4.12 變量聲明

使用函數聲明代替函數表達式。
一個函數做用域中全部的變量聲明儘可能提到函數首部，用一個var或let聲明，不容許出現兩個連續的var或let聲明。
使用對象屬性值的簡寫，並把簡寫的屬性分組。

const name = 'name';
const age = 'age';

// bad
const obj = function(){
}
// good
const obj = {
    name,
    age,
    sex: '男',
    height: '170'
}
複製代碼

使用解構存取和使用多屬性對象。由於解構能減小臨時引用屬性。

// bad
function getFullName(user){
    const fileName = user.firstName;
    const lastName = user.lastName;
    
    return `${firstName} ${lastName}`
}

// good
function getFullName(user){
    const { firstName, lastName } = user;
    
    return `${firstName} ${lastName}`
}

// best
function getFullName({ firstName, lastName }){
    return `${firstName} ${lastName}`
}
複製代碼

4.13 函數

對上下文this的引用只能使用'_this', 'that', 'self'其中一個來命名；

不要給inline function命名；

參數之間用', '分隔，注意逗號後有一個空格。

直接給函數的參數指定默認值，不要使用一個變化的函數參數。

// bad
function handleThings(opts){
    opts = opts || {};
}

// good
function handleThings(opts = {}){ 
}
複製代碼

4.14 箭頭函數

當你必須使用函數表達式（或傳遞一個匿名函數）時，使用箭頭函數符號。
由於箭頭函數創造了新的 this 執行環境，一般狀況下都能知足你的需求，並且這樣的寫法更爲簡潔。

// bad
[1, 2, 3].map(function (x) {
    return x * x;
})

// good
[1, 2, 3].map(x => {
    return x * x;
})
複製代碼

若是一個函數適合用一行寫出而且只有一個參數，那就把花括號、圓括號和 return 都省略掉。若是不是，那就不要省略。

// good
[1, 2, 3].map(x => x * x);

// good
[1, 2, 3].map((total, x) => {
    return total + x;
})
複製代碼

4.15 構造函數

老是使用class，避免直接操做prototype。

// bad
function Queue(contents = []){
    this._queue = [...contents];
}
Queue.prototype.pop = function(){
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
}

// good
class Queue {
    constructor(contents = []){
        this._queue = [...contents];
    }
    pop(){
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
    }
}
複製代碼

使用 extends 繼承。extends 是一個內建的原型繼承方法而且不會破壞 instanceof 。

// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
    Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
    return this._queue[0];
}

// good
class PeekableQueue extends Queue {
    peek() {
        return this._queue[0];
  }
}
複製代碼

方法能夠返回 this 來幫助鏈式調用。

// bad
Jedi.prototype.jump = function() {
    this.jumping = true;
    return true;
};

Jedi.prototype.setHeight = function(height) {
    this.height = height;
};

const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// good
class Jedi {
    jump() {
        this.jumping = true;
        return this;
    }
    
    setHeight(height) {
        this.height = height;
        return this;
    }
}

const luke = new Jedi();

luke.jump().setHeight(20);
複製代碼

4.16 數組、對象

對象屬性名不須要加引號；

對象以縮進的形式書寫，不要寫在一行；

數組、對象最後不要有逗號。

4.17 括號

下列關鍵字後必須有大括號（即便代碼塊的內容只有一行）：
if, else, for, while, do, switch, try, catch, finally, with。

4.18 null

適用場景：

初始化一個未來可能被賦值爲對象的變量
與已經初始化的變量作比較
做爲一個參數爲對象的函數的調用傳參
做爲一個返回對象的函數的返回值

不適用場景：

不要用null來判斷函數調用時有無傳參
不要與未初始化的變量作比較

4.19 undefined

永遠不要直接使用undefined進行變量判斷；

使用typeof和字符串'undefined'對變量進行判斷。

4.20 jshint

用'===', '!=='代替'==', '!='；

for-in裏必定要有hasOwnProperty的判斷；

不要在內置對象的原型上添加方法，如Array, Date；

不要在內層做用域的代碼裏聲明瞭變量，以後卻訪問到了外層做用域的同名變量；

變量不要先使用後聲明；

不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量；

不要在同個做用域下聲明同名變量；

不要在一些不須要的地方加括號，例：delete(a.b)；

不要使用未聲明的變量（全局變量須要加到.jshintrc文件的globals屬性裏面）；

不要聲明瞭變量卻不使用；

不要在應該作比較的地方作賦值；

debugger不要出如今提交的代碼裏；

數組中不要存在空元素；

不要在循環內部聲明函數；

不要像這樣使用構造函數，例：new function () { ... }, new Object；

5.0 圖片及第三方資源

5.1 存放目錄

靜態類資源置於項目根目錄下static文件夾
配置類資源置於項目根目錄下assets文件夾
第三方庫類資源置於項目根目錄下components文件夾

5.2 格式

圖片格式僅限於gif || png || jpg;
在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間;

5.3 命名

命名所有用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；儘可能用易懂的詞彙, 便於團隊其餘成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 好比ad_left01.gif || btn_submit.gif;

5.4 其餘

運用css sprite技術集中小的背景圖或圖標, 減少頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 並保存至img目錄下。

6.0 JS框架&UI庫

Vue、React、Angular、jQuery、小程序、公衆號

6.1 jquery

6.1.1 jQuery-ui庫

6.1.2 jQuery Plugin

IE對HTML5標籤支持，以及瀏覽器特性檢測：Modernizr & html5shiv
定製&統一瀏覽器的滾動條樣式：jquery-scroll & Lionbars
hover提示效果文字：bootstrap-tooltips & tipsy
滾動條跟隨nav效果：bootstrap-scrollspy
提示冒泡文字：grumble.js
導航欄過渡效果：lavalamp
移動設備的滾動效果：iscroll 4
Mac OS Lion 風格的滾動條：Lionbars
彈性SlideShow：kwicks for jQuery
瀑布流：isotope
抖動效果：jQ shake
LightBox：fancyBox
KenDo UI：KenDo UI
textarea自適應高度：elastic
提示區域 & 提示層：noty
浮動話題泡：jQuery grumble
旋轉進度：jQuery Knob

6.2 Vue 注意點

組件命名：

連字符：字母全小寫且必須包含一個連字符（推薦，當直接在 DOM 中使用一個組件時）

Vue.component('my-component-name', { /* ... */ });
複製代碼

大駝峯：注意：當使用的不是字符串模板時，camelCase (駝峯式命名) 的 props屬性須要轉換爲相對應的 kebab-case (連字符命名)

（1）、HTML模板：

Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

（2）、字符串模板：

<!-- 在 HTML 中使用kebab-case -->
<child my-message="hello!"></child>
複製代碼

6.2.1 Vue-ui庫

移動端：

VUX (微信)
Mint UI (餓了麼)
Muse-ui (Google)
Cube UI (滴滴)
Vant (有贊)

PC端：

element UI (餓了麼)
iview
ant-design-vue
vuetify
Zent (有贊)

6.2.2 Vue Plugin

自定義滾動條 happy-scroll & Vuescroll
虛擬滾動列表 vue-virtual-scroll-list

6.2.3 Vue

6.3 React

6.3.1 React-ui庫

移動端：

Ant Design Mobile (Alibaba)
Bee Mobile
Material-UI (Google 響應式)
Onsen UI (Angular一、Angular2+、React、Vue)

PC端：

Ant-design (Alibaba)
Material-UI (Google 響應式)
Semantic-UI-React
React-Bootstrap
React-Desktop (MacOS & windows)

6.3.2 React Plugin

6.4 Angular

6.4.1 Angular-ui庫

移動端：

Ant Design Mobile of Angular
Ionic
Onsen UI (Angular一、Angular2+、React、Vue)

PC端：

Ant Design of Angular
Angular Material
Kendo UI for Angular
agGrid (js、Angular一、Angular2+、React、Vue)
PrimeNG
Clarity

6.3.2 Angular Plugin

6.5 小程序、公衆號

6.5.1 小程序、公衆號ui庫

WeUI WXSS (微信)
iView WeApp (微信)
Vant Weapp (微信)
mpvue (微信、vue)
wepy (微信)
MinUI (微信)
Wux WeApp (微信)
uni-app (微信、支付寶、Android、iOS、H5)
Taro (微信、支付寶、H五、Native)
更多Demo

7.0 緩存

8.0 HTTP及接口請求

9.0 性能優化

10.0 終端兼容

10.1 分辨率兼容

10.1.1 移動端兼容

不一樣的dpr下，加載不一樣的尺寸的圖片
若是有圖片服務器，經過url獲取參數，而後能夠控制圖片質量，也能夠將圖片裁剪成不一樣的尺寸。只需上傳大圖(@2x)，其他小圖都交給圖片服務器處理，咱們只要負責拼接url便可。
若是沒有圖片服務器，準備多份不一樣尺寸的圖片@1x@2x@3x

不一樣的dpr下，1px寬的直線須要縮放0.5

//方案一：縮小0.5倍來達到0.5px的效果
border-bottom: 1px solid #ddd;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;

//方案二：添加以下的meta標籤，設置viewport(scale 0.5)
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">  
複製代碼