JavaScript編碼規範你都瞭解多少？

JavaScript · 發表 2019-03-18 21:51:27

摘要： "當我寫這段程式碼的時候，只有上帝和我看得懂，現在...只有上帝看得懂。"這是一個調侃程式設計師程式碼的段子。作為一名JS開發者，不規範的程式碼不僅極不利於團隊的溝通合作，而且將來程式碼維護的成本也會增加，往往還會帶來執行效率甚至安全方面的問題。所以程式...

"當我寫這段程式碼的時候，只有上帝和我看得懂，現在...只有上帝看得懂。"這是一個調侃程式設計師程式碼的段子。

作為一名JS開發者，不規範的程式碼不僅極不利於團隊的溝通合作，而且將來程式碼維護的成本也會增加，往往還會帶來執行效率甚至安全方面的問題。所以程式碼質量的好壞有可能作為評判你技術高低以及是否擁有嚴謹程式碼風格的一個重要依據！

本文將針對Javascript的各種規範進行介紹，希望對各位有所益處！

一、駝峰式命名法

駝峰式命名法大家應該都比較熟悉了：駝峰式命名法又被稱為駱駝命名法，它是由小(大)寫字母開始，後續每個單詞首字母都大寫。其中首字母大寫的命名稱為大駝峰命名法（Pascal命名法），首字母小寫的命名稱為小駝峰命名法（Camel Case）。

二、變數（小駝峰式命名）

1、變數禁止濫用。當你的資料只使用一次或不使用時，沒有將其放到變數的必要。

// 定義好了之後再也沒使用過
let siteName = "zhangpeiyue.com";
// 變數太囉嗦
function fn() {
let w = 1;
let h = 2;
let num = 2;
let z = w + h;
var e = z * num;
return e;
}

建議調整為：

function fn() {
let w = 1;
let h = 2;
return (w + h) * 2;
}

2、變數儘量體現語意及所屬型別

// 好的命名方式
var minLength = 10;
var userName = 'zhangpeiyue';

// 不好的命名方式
var length = 10;
var user = 'zhangpeiyue';

注：變數的字首一般為名詞。length、count等一般表示數字型別，name、title等一般表示為字串型別，arr表示陣列。

3、指定特定變數

指定特定的變數往往會很大程度的提升你程式碼的可讀性：

// 無特定變數
if (userName.length > 7) {// 7是個什麼鬼？
//您的程式碼
}

// 擁有特定變數
const Max_Name_Length = 8;
// 十分清晰，表示名字最大的長度
if (userName.length > Max_Name_Length) {
//您的程式碼
}

4、儘可能少使用全域性變數

一般在多個函式使用相同資料時，我們一般會將該資料設為全域性變數。但全域性變數過多，極有可能會造成命名衝突：

// home.js
let userName = "zhangSan";

// hello.js
let userName = "liSi";

// my.js
let userName = "wangWu";

以上程式碼會根據載入順序讓其具有不同含義。所以儘量將你的程式碼模組化，或使用區域性變數（通過(){}的方法）。如果你的全域性變數需要共享，你可以根據所處環境使用vuex 或redux 等。

5、變數賦值

const Max_Name_Length = 8;
let userName = nameArr[0];
if (userName.length > Max_Name_Length) {
//您的程式碼
}

以上程式碼明顯不夠嚴謹，倘若nameArr 是一個空陣列，nameArr[0] 得到的值就是undefined ，而undefined 是沒有length屬性的，此時程式定會報錯！無疑以上程式碼成功埋下了一個定時炸彈。所以我們需要將程式碼進行優化：

const Max_Name_Length = 8;
let userName = fullName[0] || "";
if (userName.length > Max_Name_Length) {
//您的程式碼
}

6、變數比較

變數比較請養成使用=== 運算子的習慣，因為它不需要對型別進行轉換，比較嚴謹！

// 不建議：
let userAge = 8;
if(userAge == 8){
// 你的程式碼
}

// 建議:
let userAge = 8;
if(userAge === 8){
// 你的程式碼
}

三、函式（小駝峰式命名）

1、函式的字首一般為動詞

動詞	解釋	返回值型別
can	是否可執行某個動作（許可權）	布林值
has	是否含有某個值	布林值
is	是否為某個值	布林值
get	獲取某個值	返回獲得的值
set	設定某個值	無返回值或返回是否設定成功或返回鏈式物件
load	載入某些資料	無返回值或返回是否載入完成的結果

例如：

// 是否可寫入
function canWrite() {
return true;
}

// 獲取使用者名稱稱
function getUserName() {
return this.userName;
}

2、優先使用函數語言程式設計

for(let i =0;i<ageArr.length;i++){
ageArr[i]+=1;
}

以上程式碼實現了將陣列ageArr 的所有元素分別加1，但一看到for迴圈是不是很頭疼？以上程式碼可以優化為：

ageArr.map(item => ++item);

3、函式中不要過多的採用if else ..

if (userAge === 1) {
// 你的程式碼
} else if (userAge === 2) {
// 你的程式碼
} else if (userAge === 3) {
// 你的程式碼
} else {
// 你的程式碼 
}

以上程式碼if else過多，建議採用：

switch (userAge){
case 1:
// 你的程式碼
case 2:
// 你的程式碼
case 3:
// 你的程式碼
default:
// 你的程式碼
}

或者：

let handler={
1:()=>{
//你的程式碼
},
2:()=>{
//你的程式碼
},
3:()=>{
//你的程式碼
},
default:()=>{
//你的程式碼
}
}
handler[ageArr]() || handler["default"]()

4、儘量使用箭頭函式（不解釋）

四、建構函式（大駝峰式命名）

function Student(name) {
var _name = name; // 私有成員

// 公共方法
this.getName = function () {
return _name;
}

// 公共方式
this.setName = function (value) {
_name = value;
}
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：輸出_name私有變數的值

需要注意：1、建構函式首字母大寫。2、私有成員屬性或方法需要加上字首_ (下劃線)

五、常量（名稱全部大寫）

全部使用大寫字母和下劃線來組合命名，下劃線用以分割單詞：

var MAX_COUNT = 10;
var SITE_URL = 'http://www.zhangpeiyue.com';

六、註釋

1、單行註釋

單獨一行：// (雙斜線)與註釋文字之間保留一個空格。

// 設定站點地址
var SITE_URL = 'http://www.zhangpeiyue.com';

在程式碼後面添加註釋：// (雙斜線)與程式碼之間保留一個空格，並且//(雙斜線)與註釋文字之間保留一個空格。

var SITE_URL = 'http://www.zhangpeiyue.com'; // 設定站點地址

2、多行註釋

若開始(/* )和結束(*/ )都在一行，建議採用單行註釋。

若至少三行註釋時，第一行為/* ，最後行為*/ ，其他行以* 開始，並且註釋文字與* 保留一個空格。

/*
* 程式碼執行到這裡後會呼叫setTitle()函式
* setTitle()：設定title的值
*/
setTitle();

—————END—————

喜歡本文的朋友們，歡迎關注微信公眾號張培躍，收看更多精彩內容