JavaScript程式設計規範

星期日, 10月 31, 2021

JavaScript程式設計規範

前言

程式設計規範是編程的風格指南。它們通常包括：

變量和函數的命名和聲明規則。
空格、縮格和註釋的使用規則。
編程實做和原則。

程式設計規範確保質量：

提高代碼可讀性。
讓代碼維護更簡單。

大綱

變量和函數的命名

使用駝峰(camelCase)命名法作為變量和函數的命名。

所有名字都以字母開頭。
若是有幾個分別意義的幾個字組合的詞，第一個字開頭小寫，後幾個字開頭用為大寫。

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

運算符前後空格

始終在運算符 ( = + - * / ) 和逗號之後放置空格。

let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];

代碼縮格

始終使用 2 個空格來縮進代碼區塊。

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

不要使用 Tab鍵 進行縮進。不同的編輯器對 Tab鍵的解釋不同。

語句規則

簡單語句的一般規則：

總是以分號 ";"結束簡單的語句。

const cars = ["Volvo", "Saab", "Fiat"];

複合語句的一般規則：

將左括號放在第一行的末尾。
在左括號前使用一個空格。
將右括號放在一個新行上，沒有前導空格。
不要以分號結束複合語句。

Functions 函式

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

Loops 迴圈

for (let i = 0; i < 5; i++) {
  x += i;
}

Conditions 條件式

if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

物件規則

物件定義的一般規則：

將左括號與物件名稱放在同一行。
在每個屬性與其值之間使用冒號加一個空格。
在字符串值周圍使用引號，若是數值周圍則不需要引號。
不要在最後一個屬性值後添加逗號。
將右括號放在一個新行上，沒有前導空格。
始終以分號結束物件定義。

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

可以在一行上壓縮短物件，僅在屬性之間使用空格，如下所示：

const person = {name:"John", age:50, eyeColor:"blue"};

語句長度< 80 個字

如果 JavaScript 語句不能放在一行中，最好將它打斷的地方是在運算符或逗號之後。

document.getElementById("demo").innerHTML =
"Hello Dolly.";

命名規範

始終對所有代碼使用相同的命名規範。例如：

以駝峰命名的變量名和函數名
大寫的全局變量（我們沒有，但很常見）
大寫的常量（如 PI）
連字符 "-" 可能會被誤認為是減法。 JavaScript 名稱中不允許使用連字符作為命名。

你應該在變量名中使用連字符、駝峰式大小寫還是下劃線？

這是程序員經常討論的問題。答案取決於你問的是誰：

HTML 和 CSS 中的連字符 "-"：

HTML5 屬性可以以 data-（數據數量、數據價格）開頭。
CSS 在屬性名稱（字體大小）中使用連字符。

Uuderscores下劃線 "_"：

許多程序員更喜歡使用下劃線 (date_of_birth)，尤其是在 SQL 數據庫中。

PHP 文檔中經常使用下劃線。

PascalCase 帕斯卡案例：

PascalCase 通常是 C 程序員的首選。

camelCase

camelCase 由 JavaScript 本身、jQuery 和其他 JavaScript 庫使用。

不要以 $ 符號開頭名稱。它會使您與許多 JavaScript 庫名稱發生衝突。

在 HTML 中加載 JavaScript

使用簡單的語法加載外部腳本。

<script src="myscript.js"></script>

存取 HTML 元素

使用“凌亂”的 HTML 樣式的結果可能會導致 JavaScript 錯誤。

這兩個 JavaScript 語句會產生不同的結果：

const obj = getElementById("Demo")
const obj = getElementById("demo")

文件擴展名

HTML 文件應具有 .html 擴展名（允許使用 .htm）。

CSS 文件應該有一個 .css 擴展名。

JavaScript 文件應具有 .js 擴展名。

文件名使用小寫

大多數 Web 服務器（Apache、Unix）對文件名區分大小寫：

london.jpg 不能作為 London.jpg 存取。

其他 Web 服務器（Microsoft、IIS）不區分大小寫：

london.jpg 可以作為 London.jpg 或 london.jpg 訪問。

如果混合使用大寫和小寫，則必須非常一致。

如果您從不區分大小寫的服務器遷移到區分大小寫的服務器，即使是很小的錯誤也會破壞您的網站。

為避免這些問題，請始終使用小寫文件名（如果可能）。

註解 comment

清楚的註解幫助你在一段時間後的回憶，與他人的可讀性。
只註解具有模組、函數、區塊、任務、邏輯複雜性的相關內容。
不要在程式碼庫中留下注釋掉的程式碼。
不需要日誌註釋。
避免使用位置標記。

避免全局變量

盡量減少使用全局變量。這包括所有數據類型、物件和函數。

全局變量和函數可以被其他腳本覆蓋。

局部變量必須使用 var 關鍵字或 let 關鍵字聲明，否則它們將成為全局變量。

開頭聲明

將所有聲明放在每個腳本或函數的頂部是一種很好的編碼習慣。

提供更清晰的代碼
提供一個地方來查找局部變量
更容易避免不需要的（隱含的）全局變量
減少不必要的重新聲明的可能性

// 開頭聲明變數
let firstName, lastName, price, discount, fullPrice;

// 稍後使用
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

局部變量範例

function myFunction() {
  let a = 4;
  return a * a;
}

全局變量，一個函數也可以存取在函數外定義的變量，像這樣：

let a = 4;
function myFunction() {
  return a * a;
}

在上一個例子中，a 是一個全局變量。

在網頁中，全局變量屬於 window 物件。

頁面（和window）中的所有腳本都可以使用（和更改）全局變量。

在前二個示例中， a 是局部變量。

局部變量只能在定義它的函數內部使用。它對其他函數和其他腳本代碼隱藏。

同名的全局變量和局部變量是不同的變量。修改一個，不會修改另一個。

初始化變量

在聲明變量時對其進行初始化是一種很好的編碼習慣。這會使得：

提供更清晰的代碼。
提供一個地方來初始化變量。
避免未定義的值。
初始化變量提供了預期用途（和預期數據類型）的概念。

// 在一開頭就宣告與初始值
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

使用 const 聲明物件

使用 const 聲明物件，將防止任何意外的類型更改：

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // 錯誤! 更改物件類型變為 字串string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // 這裡就不會發生問題

使用 const 聲明陣列

使用 const 聲明陣列，將防止任何意外的類型更改：

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // 錯誤! 更改物件類型變為 數字

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // 這裡就不會發生問題

不要使用 new Object()

使用 "" 代替 new String()
使用 0 代替 new Number()
使用 false 而不是 new Boolean()
使用 {} 而不是 new Object()
使用 [] 而不是 new Array()
使用 /()/ 代替 new RegExp()
使用 function (){} 而不是 new Function()

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

小心自動類型轉換

JavaScript 是鬆散類型的語言。

一個變量可以包含所有數據類型。

一個變量可以改變它的數據類型：

let x = "Hello";     // typeof x 是字串 string 
x = 5;               // 更改 typeof x 變為數字 number

請注意，數字可能會意外轉換為字符串或 NaN（非數字）。在進行數學運算時，JavaScript 可以將數字轉換為字符串：.

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

從字符串中減去字符串不會產生錯誤，但會返回 NaN（非數字）：

"Hello" - "Dolly"    // returns NaN

盡量使用 "===" 比較運算符號

== 比較運算符總是在比較之前轉換類型（到匹配類型）。

=== 運算符強制比較值和類型：

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

使用參數默認值

如果調用函數時缺少參數，則缺少參數的值將設置為 undefined。

未定義的值可能會破壞您的代碼。為參數分配默認值是一個好習慣。

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015版本開始，允許在函數定義中使用預設的參數值：

function (a=1, b=1) { /*function code*/ }

用默認值結束你的 switch

始終以默認值結束 switch 語句。即使你認為沒有必要。

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

避免將數字、字符串和布爾值作為物件

始終將數字、字符串或布爾值視為原始值。不作為物件。

將這些類型聲明為物件，會降低執行速度，並產生令人討厭的副作用：

let x = "John";             
let y = new String("John");
(x === y) // false。 因為 x 是一個字符串而 y 是一個物件。

let x = new String("John");             
let y = new String("John");
(x == y) // false。因為你不能比較對象。