現在代碼的格式都有 eslint、prettier、babel 這些來保證，但是技術手段再高端都不能解決代碼可讀性的問題。

因為這個只有個人才能解決。但是註意一下事項，可以顯著提高代碼的可讀性、可識別性。

一、變量相關

　　1、限量數量的定義。

　　　　不要濫用變量，數據只使用一次或者不使用就無需裝到變量中。

1 let kpi = 4;  // 沒用的就刪掉
2 function example() {
3   let a = 1;
4   let b = 2;
5   return 2*a + b + 1;
6 }

　　2、變量命名

　　　　無需對每個變量都寫註釋，從名字上就看懂。

1 //
 
 不要
2 let fName = ‘guo‘;
3 let lName = ‘zheng‘;
4 // 要這樣
5 let firstName = ‘guo‘;
6 let lastName = ‘zheng‘;

　　3、特定的變量

1 if(value > 8) {
2   // 為什麽要大於 8 ，8 表示什麽？長度？位移？還是高度？
3 }
4 // 應為
5 const MAX_INPUT_LENGTH = 8;
6 if(value > MAX_INPUT_LENGTH) {
7   // 一目了然  
8 }

　　4、變量命名

1 // 過於啰嗦
2 let nameString;
 
3 let theUsers;
4 // 要簡潔
5 let name;
6 let users;

　　5、使用說明性的變量 -- 即 有意義的變量

 1 const address = ‘One Infinite Loop, Cupertino 95014‘;
 2 const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
 3 saveCityZipCode(
 4   address.match(cityZipCodeRegex)[1], // 這個公式要幹嘛？
 5   address.match(cityZipCodeRegex)[2], //
 
 這個公式要幹嘛？
 6 )
 7 // 用變量名解釋長代碼的含義
 8 const address = ‘One Infinite Loop, Cupertino 95014‘;
 9 const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
10 const [, city, zipCode] = address.match(cityZipCodeRegex) || [];  // 解構賦值
11 saveCityZipCode(city, zipCode)

　　6、避免使用太多全局變零

　　　　少用或者使用替代方案。

　　　　你可以選擇只用局部變量，通過（）{} 的方法。

　　　　如果確實有很多的全局變量需要共享，你可以使用vuex，redux 或者 自己參考 flux 模式寫一個。

　　7、變量賦值

　　　　對於求職獲取的變量，做好兜底。

 1 // 沒有兜底
 2 const MIN_NAME_LENGTH = 8;
 3 let lastName = fullName[1];
 4 if(lastName.length > MIN_NAME_LENGTH) {
 5   // 這樣就給代碼埋了一個坑。當fullName 為一個元素時呢？ 比如：fullName = [‘guo‘]
 6 }
 7 // 做好兜底
 8 const MIN_NAME_LENGTH = 8;
 9 let lastName = fullName[1] || ‘‘;
10 if(lastName.length > MIN_NAME_LENGTH) {
11   ...
12 }
13 // 其實在項目中很多求值變量，對於每個求值變量都需要做好兜底
14 let propertyValue = Object.attr || 0; // 因為 Object.attr 有可能為空，所以要做好兜底。但是變量賦值不需要兜底。

　二、函數相關

　　1、函數命名

　　　　對於返回 true 或 false 的函數，最好以 should、is、can、has 開頭

1 function showFriendsList() {} // 現在問，返回的是一個數組，還是對象，還是 true or false。無法知道。
2 // 一目了然
3 function isEmpty() {}
4 function hasClass() {}
5 function canOpen() {}
6 function shouldShow() {}

　　2、功能函數最好為純函數

　　　　不要讓功能函數的輸出變化無常。功能函數使用純函數，輸入一致，輸出結果永遠唯一。

1 function plusAbc(a, b, c) {
2   let c = fetch(‘../api‘); // 因為 api 變化，輸出變化。
3   return a + b + c;
4 }
5 // 純函數
6 function plusAbc(a, b, c) {
7   return a + b + c;
8 }

　　3、函數傳參

1 pageXOffset.getSVG(api, true, false); // 讓人看不懂這三個參數
2 pageXOffset.getSVG({
3   imageApi: api,
4   includePageBackground: true,
5   compress: false
6   // 一目了然 知道這些參數是控制什麽。
7 });

　　4、動作函數要以動詞開頭

1 function sendEmailToUser() {}; 2 function getUserInfo() {};

　　5、一個函數完成一個獨立功能，不要一個函數混雜多個功能。

　　　　當函數需要做更多事情時，他們會更難以編寫、測試、理解、組合。當你能將一個函數抽離出來只完成一個動作，他們將更容易進行重構並且代碼更容易閱讀。

　　6、優先使用命令式編程。

1 // 使用for循環編程
2 for(var i=1;i<10;i++) {
3   // 每一項要做的事情
4 }
5 // 命令式
6 let b = a.map(item => {
7   // 每一項要做的事情
8 })

　　7、函數過多使用if else

　　　　可以使用switch 替代，或者數組 替代。參考上一篇。

三、盡量使用ES6, 有可能的話使用 ES7

　　1、使用箭頭函數 代替傳統函數

1 // 傳統
2 function add() {}
3 // 箭頭函數
4 let add = () => {}

　　2、連接字符串

　　　　使用模板字符串 代替 傳統 +

1 // 傳統
2 let str = ‘hello‘ + name;
3 // 模板
4 let str = `hello${name}`

　　3、使用解構賦值

 1 // 傳統
 2 let data = { name: ‘guo‘, age: 11 };
 3 let name = data.name;
 4 let age = data.age;
 5 
 6 let fullName = [‘guo‘, ‘zheng‘];
 7 let firstName = fullName[0];
 8 let lastName = fullName[1];
 9 
10 // 解構賦值
11 let data = { name: ‘guo‘, age: 11 };
12 const {name, age} = data;
13 
14 let fullName = [‘guo‘, ‘zheng‘];
15 const [firstName, lastName] = fullName;

　　4、盡量使用 class

　　　　不太會，以後再補

僅作學習筆記，如有雷同不是巧合，可能是參考過。

寫出良好風格的JS代碼