JavaScript 代碼風格指南，你在使用哪一種代碼風格？

時間 2019-12-17

標籤 javascript 代碼風格指南在使哪一種欄目 JavaScript 简体版

原文原文鏈接

代碼風格

咱們的代碼必須儘量的清晰和易讀。javascript

這實際是一種編程藝術 —— 以一種正確而且人們易讀的方式編碼來完成一個複雜的任務。一個良好的代碼風格大大有助於實現這一點。html

語法

下面是一個備忘單，其中列出了一些建議的規則（詳情請參閱下文）：java

如今，讓咱們詳細討論一下這些規則和它們的緣由吧。node

注意：沒有什麼規則是「必須」的react

沒有什麼規則是「刻在石頭上」的。這些是風格偏好，而不是宗教教條。git

花括號

在大多數的 JavaScript 項目中，花括號以 "Egyptian" 風格（譯註："egyptian" 風格又稱 K&R 風格 — 代碼段的開括號位於一行的末尾，而不是另起一行的風格）書寫，左花括號與相應的關鍵詞在同一行上 — 而不是新起一行。左括號前還應該有一個空格，以下所示：程序員

if (condition) {
  // do this
  // ...and that
  // ...and that
}
複製代碼

單行構造（如 if (condition) doSomething()）也是一個重要的用例。咱們是否應該使用花括號？若是是，那麼在哪裏？es6

下面是這幾種狀況的註釋，你能夠本身判斷一下它們的可讀性：github

😠 初學者常這樣寫。很是很差！這裏不須要花括號：npm
```
if (n < 0) {alert(`Power ${n} is not supported`);}
複製代碼
```
😠 拆分爲單獨的行，不帶花括號。永遠不要這樣作，添加新行很容易出錯：
```
if (n < 0)
  alert(`Power ${n} is not supported`);
複製代碼
```
😏 寫成一行，不帶花括號 — 若是短的話，也是能夠的：
```
if (n < 0) alert(`Power ${n} is not supported`);
複製代碼
```

😃 最好的方式：

if (n < 0) {
  alert(`Power ${n} is not supported`);
}
複製代碼

對於很短的代碼，寫成一行是能夠接受的：例如 if (cond) return null。可是代碼塊（最後一個示例）一般更具可讀性。

行的長度

沒有人喜歡讀一長串代碼，最好將代碼分割一下。

例如：

// 回勾引號 ` 容許將字符串拆分爲多行
let str = ` Ecma International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript. `;
複製代碼

對於 if 語句：

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}
複製代碼

一行代碼的最大長度應該在團隊層面上達成一致。一般是 80 或 120 個字符。

縮進

有兩種類型的縮進：

水平方向上的縮進：2 或 4 個空格。

一個水平縮進一般由 2 或 4 個空格或者「Tab」製表符（key key:Tab）構成。選擇哪個方式是一場古老的聖戰。現在空格更廣泛一點。

選擇空格而不是 tabs 的優勢之一是，這容許你作出比「Tab」製表符更加靈活的縮進配置。

例如，咱們能夠將參數與左括號對齊，像下面這樣：
```
show(parameters,
     aligned, // 左邊有 5 個空格
     one,
     after,
     another
  ) {
  // ...
}
複製代碼
```
垂直方向上的縮進：用於將代碼拆分紅邏輯塊的空行。

即便是單個函數一般也被分割爲數個邏輯塊。在下面的示例中，初始化的變量、主循環結構和返回值都被垂直分割了：
```
function pow(x, n) {
  let result = 1;
  // <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  // <--
  return result;
}
複製代碼
```
插入一個額外的空行有助於使代碼更具可讀性。寫代碼時，不該該出現連續超過 9 行都沒有被垂直分割的代碼。

分號

每個語句後面都應該有一個分號。即便它能夠被跳過。

有一些編程語言的分號確實是可選的，那些語言中也不多使用分號。可是在 JavaScript 中，極少數狀況下，換行符有時不會被解釋爲分號，這時代碼就容易出錯。更多內容請參閱代碼結構一章的內容。

若是你是一個有經驗的 JavaScript 程序員，你能夠選擇像 StandardJS 這樣的無分號的代碼風格。不然，最好使用分號以免可能出現的陷阱。大多數開發人員都應該使用分號。

嵌套的層級

儘可能避免代碼嵌套層級過深。

例如，在循環中，有時候使用 continue 指令以免額外的嵌套是一個好主意。

例如，不該該像下面這樣添加嵌套的 if 條件：

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 又一層嵌套
  }
}
複製代碼

咱們能夠這樣寫：

for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 沒有額外的嵌套
}
複製代碼

使用 if/else 和 return 也能夠作相似的事情。

例如，下面的兩個結構是相同的。

第一個：

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}
複製代碼

第二個：

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}
複製代碼

可是第二個更具可讀性，由於 n < 0 這個「特殊狀況」在一開始就被處理了。一旦條件經過檢查，代碼執行就能夠進入到「主」代碼流，而不須要額外的嵌套。

函數位置

若是你正在寫幾個「輔助類」的函數和一些使用它們的代碼，那麼有三種方式來組織這些函數。

在調用這些函數的代碼的上方聲明這些函數：

// 函數聲明
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// 調用函數的代碼
let elem = createElement();
setHandler(elem);
walkAround();
複製代碼

先寫調用代碼，再寫函數

// 調用函數的代碼
let elem = createElement();
setHandler(elem);
walkAround();

// --- 輔助類函數 ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}
複製代碼

混合：在第一次使用一個函數時，對該函數進行聲明。

大多數狀況下，第二種方式更好。

這是由於閱讀代碼時，咱們首先想要知道的是「它作了什麼」。若是代碼先行，那麼在整個程序的最開始就展現出了這些信息。以後，可能咱們就不須要閱讀這些函數了，尤爲是他們的名字清晰地展現出了他們的功能的時候。

風格指南

風格指南包含了「若是編寫」代碼的通用規則，例如：使用哪一個引號、用多少空格來縮進、一行代碼最大長度等很是多的細節。

當團隊中的全部成員都使用相同的風格指南時，代碼看起來將是統一的。不管是團隊中誰寫的，都是同樣的風格。

固然，一個團隊能夠制定他們本身的風格指南，可是不必這樣作。如今已經有了不少制定好的代碼風格指南可供選擇。

一些受歡迎的選擇：

若是你是一個初學者，你能夠從本章中上面的內容開始。而後你能夠瀏覽其餘風格指南，並選擇一個你最喜歡的。

自動檢查器

檢查器（Linters）是能夠自動檢查代碼樣式，並提出改進建議的工具。

他們的妙處在於進行代碼風格檢查時，還能夠發現一些代碼錯誤，例如變量或函數名中的錯別字。所以，即便你不想堅持某一種特定的代碼風格，我也建議你安裝一個檢查器。

下面是一些最出名的代碼檢查工具：

JSLint — 第一批檢查器之一。
JSHint — 比 JSLint 多了更多設置。
ESLint — 應該是最新的一個。

它們都可以作好代碼檢查。我使用的是 ESLint。

大多數檢查器均可以與編輯器集成在一塊兒：只需在編輯器中啓用插件並配置代碼風格便可。

例如，要使用 ESLint 你應該這樣作：

安裝 Node.JS。
使用 npm install -g eslint 命令（npm 是一個 JavaScript 包安裝工具）安裝 ESLint。
在你的 JavaScript 項目的根目錄（包含該項目的全部文件的那個文件夾）建立一個名爲 .eslintrc 的配置文件。
在集成了 ESLint 的編輯器中安裝/啓用插件。大多數編輯器都有這個選項。

下面是一個 .eslintrc 文件的例子：

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
    "indent": ["warning", 2]
  }
}
複製代碼

這裏的 "extends" 指令表示咱們是基於 "eslint:recommended" 的設置項而進行設置的。以後，咱們制定咱們本身的規則。

你也能夠從網上下載風格規則集並進行擴展。有關安裝的更多詳細信息，請參見 eslint.org/docs/user-g…

此外，某些 IDE 有內置的檢查器，這很是方便，可是不像 ESLint 那樣可自定義。

總結

本章描述的（和提到的代碼風格指南中的）全部語法規則，都旨在幫助你提升代碼可讀性。他們都是值得商榷的。

當咱們思考如何寫「更好」的代碼的時候，咱們應該問本身的問題是：「什麼可讓代碼可讀性更高，更容易被理解？」和「什麼能夠幫助咱們避免錯誤？」這些是咱們討論和選擇代碼風格時要牢記的主要原則。

閱讀流行的代碼風格指南，能夠幫助你瞭解有關代碼風格的變化趨勢和最佳實踐的最新想法。

做業題

先本身作題目再看答案。

很差的代碼風格

重要程度：⭐️⭐️⭐️⭐

下面的代碼風格有什麼問題？

function pow(x,n) {
  let result=1;
  for(let i=0;i<n;i++) {result*=x;}
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else
{
  alert(pow(x,n))
}
複製代碼