天天看點
傳回

前端代碼規範及風格 Code Guide命名規則HTMLCSS,SCSSJavaScript編輯器配置TODO參考與感謝

前端 Code Guide

  • 命名規則
    • 項目命名
    • 目錄命名
    • JS檔案命名
    • CSS，SCSS檔案命名
    • HTML檔案命名
  • HTML
    • 文法
    • HTML doctype
    • lang屬性
    • charset 字元編碼
    • IE相容模式
    • 引入CSS,JS
      • HTML5規範連結
    • 屬性順序
    • boolean屬性
    • JS中生成标簽
    • 減少标簽數量
    • 實用高于完美
  • CSS,SCSS
    • 通識
    • 縮進
    • 分号
    • 空格
    • 空行
    • 換行
    • 注釋
    • 引号
    • 命名
    • 顔色
    • 選擇器
    • 屬性順序
    • 屬性簡寫
    • 媒體查詢
    • SCSS相關
    • 雜項
  • JavaScript
    • 通識
    • 縮進
    • 單行長度
    • 分号
    • 空格
    • 空行
    • 換行
    • 單行注釋
    • 多行注釋
    • 文檔注釋
    • 引号
    • 變量命名
    • 函數
    • 數組、對象
    • 括号
    • null
    • undefined
    • ESLint
    • 雜項
  • 編輯器配置
  • TODO
    • 總結vscode 配置
    • 總結文檔注釋的标簽
    • 總結 Vue 代碼風格
  • 參考與感謝
不管有多少人共同參與同一項目，一定要確定每一行代碼都像是同一個人編寫的

命名規則

項目命名

全部采用

小寫

方式，以

下劃線

分隔

例：my_project_name

目錄命名

  1. 參照項目命名規則
  2. 有複數結構時，采用複數命名法

例如： scripts、styles、images、data_modals

JS檔案命名

參照項目命名規則

例： lk-utils.js

CSS，SCSS檔案命名

參照項目命名規則

例：lk-style.scss

HTML檔案命名

參照項目命名規則

例：lk-index.html

HTML

文法

  1. 縮進使用2個空格（bootstrap規範）
  2. 嵌套的節點應該縮進标簽不要大寫，即便是 doctype 标簽
  3. 在屬性上，使用雙引号，不要使用單引号
  4. 屬性名全小寫，用中劃線做分隔符
  5. 不要在自動閉合标簽結尾處使用斜線（HTML5 規範 指出他們是可選的）
  6. 不要忽略可選的關閉标簽，例：

    </li>

     和

    </body>

     
<!doctype html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        <img src="images/company_logo.png" alt="Company">
        <h1 class="hello-world">Hello, world!</h1>
    </body>
</html>

HTML doctype

為每個 HTML 頁面的第一行添加standards mode（标準模式）聲明，這樣能夠確定在每個浏覽器中擁有一緻的展現

lang屬性

根據HTML5規範：

應在html标簽上加上lang屬性，進而為文檔設定正确的語言。這會給語音工具和翻譯工具幫助，告訴它們應當怎麼去發音和翻譯。

更多關于

lang

屬性的說明在這裡

在菜鳥聯盟上可以查到語言清單

charset 字元編碼

通過聲明一個明确的字元編碼，讓浏覽器輕松、快速的确定适合網頁内容的渲染方式，通常指定為‘UTF-8’

IE相容模式

  1. 用标簽可以指定頁面應該用什麼版本的IE來渲染

如果想要了解更多，請點選這裡

What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?

Depending upon what Microsoft browsers you support you may not need to continue using the

X-UA-Compatible

 tag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether.

簡而言之需要相容IE9/8，加上

X-UA-Compatible

，否則不用加

  1. 不同doctype在不同浏覽器下會觸發不同的渲染模式（這篇文章總結的很到位） 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    ...
</html>

引入CSS,JS

根據html5規範，通常在引入CSS和JS時不需要指明type，因為

text/css

和

text/javasctipt

分别是他們的預設值

HTML5規範連結

  • 使用link
  • 使用style
  • 使用script 
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">

<!-- In-document CSS -->
<style>
    ...
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>
    ...
</script>

屬性順序

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

  • class

  • id

  • name

  • data-*

  • src

     ,

    for

     ,

    type

     ,

    href

     ,

    value

     ,

    max-length

     ,

    max

     ,

    min

     ,

    pattern

  • placeholder

     ,

    title

     ,

    alt

  • aria-*

     ,

    role

  • required

     ,

    readonly

     ,

    disabled

class是為高可複用元件設計的，是以應處在第一位

id更加具體且應該盡量少使用，是以将它放在第二位

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean屬性

boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5中并不需要

boolean屬性的存在表示取值為true，不存在則表示取值為false。 
<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS中生成标簽

在JS檔案中生成标簽讓内容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。

減少标簽數量

  1. 在編寫HTML代碼時，需要盡量避免多餘的父節點
  2. 很多時候， 需要通過疊代和重構來使HTML變得更少 
<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

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

實用高于完美

  1. 盡量遵循HTML标準和語義
  2. 任何時候都要用

    盡量小的複雜度

     和

    盡量少的标簽

     來解決問題
  3. 但是不應該以浪費實用性作為代價

CSS,SCSS

通識 

/* 這樣叫規則（下同） */
.element {
  ...
}

.element {
  /* 這樣叫屬性（下同） */
  height: 30px;
}

縮進

使用2空格

分号

每個屬性聲明末尾都要加分号

空格

以下幾種情況不需要空格：

  • 每條聲明語句的

    :

     後
  • 多個規則的分隔符

    "

    .

     前

  • !important

    !

     後
  • 屬性值中

    (

    )

     的前後
  • 行末不要有多餘的空格

以下幾種情況需要空格：

  • 屬性值前
  • 選擇器

    >

     ,

    +

     ,

    ~

     前後

  • {

     前

  • !important

    !

     前

  • @else

     前後
  • 屬性值中的

    ,

     後
  • 注釋

    _

     前 
/* not good */
.element {
    color :red! important;
    background-color: rgba(0,0,0,.5);
}

/* good */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

/* not good */
.element ,
.dialog{
    ...
}

/* good */
.element,
.dialog {

}

/* not good */
.element>.dialog{
    ...
}

/* good */
.element > .dialog{
    ...
}

/* not good */
.element{
    ...
}

/* good */
.element {
    ...
}

/* not good */
@if{
    ...
}@else{
    ...
}

/* good */
@if {
    ...
} @else {
    ...
}

空行

以下幾種情況需要空行：

  • 檔案最後保留一個空行

  • }

     後最好跟一個空行，包括SCSS中嵌套的規則
  • 屬性組之間需要适當的空行，詳見下方的 屬性順序 
/* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}

/* good */
.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

換行

以下幾種情況不需要換行：

  • {

     前

以下幾種情況需要換行：

  • {

     後和

    }

     前
  • 每個屬性獨占一行
  • 多個規則的分隔符

    ,

     後 
/* not good */
.element
{color: red; background-color: black;}

/* good */
.element {
    color: red;
    background-color: black;
}

/* not good */
.element, .dialog {
    ...
}

/* good */
.element,
.dialog {
    ...
}

注釋

  1. 注釋統一用 (SCSS中也不要用

    //

     ) ，具體參照代碼示例寫法
  2. 縮進與下一行代碼保持一緻；
  3. 可位于一個代碼行的末尾，與代碼間隔一個空格 
/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

引号

  1. 最外層統一使用雙引号；
  2. url的内容要用引号；
  3. 屬性選擇器中的屬性值需要引号。 
.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

命名

  • 類名使用小寫字母，以中劃線分隔
  • id采用駝峰式命名
  • SCSS中的變量、函數、混合、%placeholder采用駝峰式命名 
/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 變量 */
$colorBlack: #000;

/* 函數 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

顔色

  1. 顔色16進制用小寫字母。在掃描文檔時，小寫字元易于分辨，因為他們的形式更易于區分
  2. 顔色16進制盡量用簡寫 
/* not good */
.element {
    color: #ABCDEF;
    background-color: #001122;
}

/* good */
.element {
    color: #abcdef;
    background-color: #012;
}

選擇器

  1. 對于通用元素使用 class ，這樣利于渲染性能的優化。
  2. 對于經常出現的元件，避免使用屬性選擇器（例如，

    [class^="..."]

     ）。浏覽器的性能會受到這些因素的影響。
  3. 選擇器要盡可能短，并且盡量限制組成選擇器的元素個數，建議不要超過 3 。
  4. 隻有在必要的時候才将 class 限制在最近的父元素内（也就是後代選擇器）（例如，不使用帶字首的 class 時 – 字首類似于命名空間）。

擴充閱讀：

  • Scope CSS classes with prefixes
  • Stop the cascade

屬性順序

  1. 相關的屬性聲明應當歸為一組，并按照下面的順序排列：
    1. Positioning
    2. Box model
    3. Typographic
    4. Visual
    5. Misc
  2. 由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆寫盒模型（box model）相關的樣式，是以排在首位。盒模型排在第二位，因為它決定了元件的尺寸和位置
  3. 其他屬性隻是影響元件的 内部 或者是不影響前兩組屬性，是以排在後面

完整的屬性清單及其排列順序請參考 Bootstrap property order for Stylelint

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

屬性簡寫

  1. 屬性簡寫需要你非常清楚屬性值的正确順序，而且在大多數情況下并不需要設定屬性簡寫中包含的所有值，是以建議盡量分開聲明會更加清晰；

  2. margin

     和

    padding

     相反，需要使用簡寫；

常見的屬性簡寫包括：

  • font

  • background

  • transition

  • animation

     
/* not good */
.element {
    transition: opacity 1s linear 2s;
}

/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}

媒體查詢

  1. 盡量将媒體查詢的規則靠近與他們相關的規則
  2. 不要将他們一起放到一個獨立的樣式檔案中，或者丢在文檔的最底部，這樣做隻會讓大家以後更容易忘記他們 
.element {
    ...
}

.element-avatar{
    ...
}

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

    .element-avatar {
        ...
    }
}

SCSS相關

  1. 送出的代碼中不要

    @debug
  2. 聲明順序：

    1. @extend
    2. 不包含

      @content

       的

      @include
    3. 包含

      @content

       的

      @include
    4. 自身屬性
    5. 嵌套規則

  3. @import

     引入的檔案不需要開頭的

    _

     和結尾的

    .scss

     ，詳情在這裡
使用

sass

 的

@import

 規則并不需要指明被導入檔案的全名。你可以省略

.sass

 或

.scss

檔案字尾。

當你

@import

 一個局部檔案時，還可以不寫檔案的全名，即省略檔案名開頭的下劃線。
  1. 嵌套最多不能超過5層

  2. @extend

     中使用placeholder選擇器
  3. 去掉不必要的父級引用符号

    &
  4. 操作符

為了提高可讀性，在圓括号中的數學計算表達式的數值、變量和操作符之間均添加一個空格

/* not good */
@import "_dialog.scss";

/* good */
@import "dialog";

/* not good */
.fatal {
    @extend .error;
}

/* good */
.fatal {
    @extend %error;
}

/* not good */
.element {
    & > .dialog {
        ...
    }
}

/* good */
.element {
    > .dialog {
        ...
    }
}

/* not good */
.element {
  margin: 10px 0 @variable*2 10px;
}

/* good */
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

雜項

  1. 不允許有空的規則
  2. 元素選擇器用小寫字母
  3. 去掉小數點前面的0
  4. 去掉數字中不必要的小數點和末尾的0
  5. 屬性值 後面不要加機關
  6. 同個屬性不同字首的寫法需要在垂直方向保持對齊，具體參照代碼示例的寫法（仁者見仁）
  7. 無字首的标準屬性應該寫在有字首的屬性後面
  8. 不要在同個規則裡出現重複的屬性，如果重複的屬性是連續的則沒關系
  9. 不要在一個檔案裡出現兩個相同的規則
  10. 用

    border: 0;

     代替

    border: none;
  11. 選擇器不要超過4層（在SCSS中如果超過四層應該考慮用嵌套的方式來寫）
  12. 釋出的代碼中不要有

    @import

     。 不光增加了額外的請求次數，還會導緻不可預料的問題。替代辦法有以下幾種：
    1. 使用多個 元素
    2. 通過 Sass 或 Less 之類的 CSS 預處理器将多個 CSS 檔案編譯為一個檔案
    3. 通過 Rails、Jekyll 或其他系統中提供過 CSS 檔案合并功能

詳情在這裡

  1. 盡量少用

    *

     選擇器 
/* not good */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* good */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

JavaScript

通識

以下變量全部使用var來聲明，開發中請用let、const代替

縮進

使用2空格

單行長度

  1. 不要超過80
  2. 但如果編輯器開啟

    word wrap

     可以不考慮單行長度

分号

一下幾種情況後需加分号：

  • 變量聲明
  • 表達式
  • return
  • throw
  • break
  • continue
  • do-while 
/* var declaration */
var x = 1;

/* expression statement */
x++;

/* do-while */
do {
    x++;
} while (x < 10);

空格

以下幾種情況不需要空格：

  • 對象的屬性的屬性名後 
// not good
var a = {
    b :1
};

// good
var a = {
    b: 1
};
  • 字首一進制運算符後，字尾一進制運算符前
  • 函數調用括号前
  • 無論是函數聲明還是函數表達式，

    (

     前不要空格
  • 數組的

    [

     後和

    ]

     前
  • 對象的

    {

     後和

    }

     前
  • 運算符

    {

     後和

    }

     前

以下幾種情況需要空格：

  • 二進制運算符前後
  • 三元運算符

    ?

    :

     前後
  • 代碼塊

    {

     前
  • 下列關鍵字前：

    else

     ,

    while

     ,

    catch

     ,

    finally
  • 下列關鍵字後：

    if

     ,

    else

     ,

    for

     ,

    while

     ,

    do

     ,

    switch

     ,

    case

     ,

    try

     ,

    catch

     ,

    finally

     ,

    with

     ,

    return

     ,

    typeof
  • 單行

    //

     後（若單行注釋和代碼同行，則

    //

     前也需要），多行注釋

    *

     後
  • 對象的屬性值前
  • for循環，分号後留有一個空格，前置條件如果有多個，逗号後留一個空格
  • 無論是函數聲明還是函數表達式，

    {

     前一定要有空格
  • 函數的參數之間

空行

以下幾種情況需要空行：

  • 變量聲明後（當變量聲明在代碼塊的最後一行時，則無需空行）
  • 注釋前（當注釋在代碼塊的第一行時，無需空行）
  • 代碼塊後（在函數調用、數組、對象中則無需空行）
  • 檔案最後保留一個空行 
// need blank line after variable declaration
var x = 1;

// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// need blank line before line comment
a++;

function b() {
    // not need blank line when comment is first line of block
    return a;
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

// not need blank linße when in argument list, array, object
func(
    2,
    function() {
        a++;
    },
    3ß
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];


var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

換行

換行的地方，行末必須有

,

或者運算符

以下幾種情況不需要換行：

  • 下列關鍵字後：

    else

     ,

    catch

     ,

    finally
  • 代碼塊

    {

     前

以下幾種情況需要換行：

  • 代碼塊

    {

     後和

    }

     前
  • 變量指派後 
換行的地方，行末必須有','或者運算符；

以下幾種情況不需要換行：

下列關鍵字後：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;

單行注釋

  1. 雙斜線後，必須跟一個空格
  2. 縮進與下一行代碼保持一緻
  3. 可位于一個代碼行的末尾，與代碼間隔一個空格 
if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}

var zhangsan = 'zhangsan'; // one space after code

多行注釋

最少三行,

*

後跟一個空格，具體參照代碼示例的寫法

建議在以下情況下使用：

  • 難于了解的代碼段
  • 可能存在錯誤的代碼段
  • 浏覽器特殊的HACK代碼
  • 業務邏輯強相關的代碼 
/*
 * one space after '*'
 */
var x = 1;

文檔注釋

各類标簽

@param

,

@method

等描述和例子請參考usejsdoc和JSDoc Guide(重要)

建議在以下情況下使用：

  • 所有常量
  • 所有函數
  • 所有類 
/**
 * @func
 * @desc 一個帶參數的函數
 * @param {string} a - 參數a
 * @param {number} b=1 - 參數b預設值為1
 * @param {string} c=1 - 參數c有兩種支援的取值</br>1—表示x</br>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) {
    ...
}

引号

最外層統一使用單引号

// not good
var x = "test";

// good
var y = 'foo',
    z = '<div id="test"></div>';

變量命名

  1. 标準變量采用駝峰式命名（除了對象的屬性外，主要是考慮到CGI傳回的資料）
  2. 'ID’在變量名中全大寫
  3. 'URL’在變量名中全大寫
  4. 'Android’在變量名中大寫第一個字母
  5. 'iOS’在變量名中小寫第一個，大寫後兩個字母
  6. 常量全大寫，用下劃線連接配接
  7. 函數，大寫第一個字母
  8. 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');

變量聲明

  1. 一個函數作用域中所有的變量聲明盡量提到函數首部
  2. 用一個var聲明，不允許出現兩個連續的var聲明 
function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

函數

  1. 無論是函數聲明還是函數表達式，

    (

     前不要空格，但

    {

     前一定要有空格
  2. 函數調用括号前不需要空格
  3. 立即執行函數外必須包一層括号
  4. 不要給inline function命名
  5. 參數之間用’, '分隔，注意逗号後有一個空格 
// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// not good
doSomething (item);

// good
doSomething(item);

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})();

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

// not good
var a = [1, 2, function a() {
    ...
}];

// good
var a = [1, 2, function() {
    ...
}];

// use ', ' between function parameters
var doSomething = function(a, b, c) {
    // do something
};

數組、對象

  1. 對象屬性名不需要加引号
  2. 對象以縮進的形式書寫，不要寫在一行
  3. 數組、對象最後不要有逗号（仁者見仁） 
// not good
var a = {
    'b': 1
};

var a = {b: 1};

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

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

括号

下列關鍵字後必須有大括号（即使代碼塊的内容隻有一行）：

if

,

else

,

for

,

while

,

do

,

switch

,

try

,

catch

,

finally

,

with

 
// not good
if (condition)
    doSomething();

// good
if (condition) {
    doSomething();
}

null

适用場景：

  • 初始化一個将來可能被指派為對象的變量
  • 與已經初始化的變量做比較
  • 作為一個參數為對象的函數的調用傳參
  • 作為一個傳回對象的函數的傳回值

不适用場景：

  • 不要用null來判斷函數調用時有無傳參（有可能是undefined？）
  • 不要與未初始化的變量做比較 
// not good
function test(a, b) {
    if (b === null) {
        // not mean b is not supply
        ...
    }
}

var a;

if (a === null) {
    ...
}

// good
var a = null;

if (a === null) {
    ...
}

undefined

  1. 永遠不要直接使用undefined進行變量判斷
  2. 使用typeof和字元串’undefined’對變量進行判斷 
undefined
永遠不要直接使用undefined進行變量判斷；

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

ESLint

  1. 用’=’, '!‘代替’==’, ‘!=’
  2. for-in裡一定要有hasOwnProperty的判斷
  3. 不要在内置對象的原型上添加方法，如Array, Date
  4. 不要在内層作用域的代碼裡聲明了變量，之後卻通路到了外層作用域的同名變量
  5. 變量不要先使用後聲明，使用let、const可以避免
  6. 不要在一句代碼中單單使用構造函數，記得将其指派給某個變量
  7. 不要在同個作用域下聲明同名變量
  8. 不要在一些不需要的地方加括号，例：delete(a.b)
  9. 不要使用未聲明的變量（全局變量需要加到.jshintrc檔案的globals屬性裡面）
  10. 不要聲明了變量卻不使用
  11. 不要在應該做比較的地方做指派
  12. debugger不要出現在送出的代碼裡
  13. 數組中不要存在空元素；
  14. 不要在循環内部聲明函數；
  15. 不要像這樣使用構造函數，例：

    new function () { ... }

     ,

    new Object

     ； 
// not good
if (a == 1) {
    a++;
}

// good
if (a === 1) {
    a++;
}

// good
for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        // be sure that obj[key] belongs to the object and was not inherited
        console.log(obj[key]);
    }
}

// not good
Array.prototype.count = function(value) {
    return 4;
};

// not good
var x = 1;

function test() {
    if (true) {
        var x = 0;
    }

    x += 1;
}

// not good
function test() {
    console.log(x);

    var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete(obj.attr);

// good
delete obj.attr;

// not good
if (a = 10) {
    a++;
}

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

// not good
var nums = [];

for (var i = 0; i < 10; i++) {
    (function(i) {
        nums[i] = function(j) {
            return i + j;
        };
    }(i));
}

// not good
var singleton = new function() {
    var privateVar;

    this.publicMethod = function() {
        privateVar = 1;
    };

    this.publicMethod2 = function() {
        privateVar = 2;
    };
};

雜項

  1. 不要混用tab和space
  2. 不要在一處使用多個tab或space；
  3. 換行符統一用

    LF
  4. 對上下文this的引用隻能使用

    _this

     ,

    that

     ,

    self

     其中一個來命名
  5. 行尾不要有空白字元
  6. switch的falling through和no default的情況一定要有注釋特别說明
  7. 不允許有空的代碼塊 
// not good
var a   = 1;

function Person() {
    // not good
    var me = this;

    // good
    var _this = this;

    // good
    var that = this;

    // good
    var self = this;
}

// good
switch (condition) {
    case 1:
    case 2:
        ...
        break;
    case 3:
        ...
    // why fall through
    case 4
        ...
        break;
    // why no default
}

// not good with empty block
if (condition) {

}

編輯器配置

将你的編輯器按照下面的配置進行設定，以避免常見的代碼不一緻和差異：

  • 用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。
  • 儲存檔案時，删除尾部的空白符。
  • 設定檔案編碼為 UTF-8。
  • 在檔案結尾添加一個空白行。

參照文檔并将這些配置資訊添加到項目的

.editorconfig

檔案中。例如：Bootstrap 中的 .editorconfig 執行個體。更多資訊請參考 about EditorConfig。

TODO

總結vscode 配置

總結文檔注釋的标簽

具體參考JSDoc Guide

總結 Vue 代碼風格

具體參考vue代碼風格介紹

參考與感謝

主要參考以下文章

  • Code Guide by @AlloyTeam
  • 編碼規範 by @mdo

感謝以上團隊或個人

HTML與CSS js javascript html css3 代碼規範
上一篇: 剛入職，就被各種 Code Review，真的有必要嗎？1. Code Review的價值2. Code Review的實踐3. 對團隊成員要求
下一篇: 網站開發之前端代碼規範

繼續閱讀