js 程式碼優化
阿新 • • 發佈：2018-12-20
一、變數相關
（1）變數數量的定義
問題：濫用變數
let kpi = 4; // 定義好了之後再也沒用過 function example() { var a = 1; var b = 2; var c = a+b; var d = c+1; var e = d+a; return e; }
修改：資料只使用一次或不使用就無需裝到變數中
let kpi = 4; // 沒用的就刪除掉，不然過三個月自己都不敢刪，怕是不是那用到了 function example() { var a = 1; var b = 2;return 2a+b+1; }
（2）變數的命名
問題：自我感覺良好的縮寫
let fName = 'jackie'; // 看起來命名挺規範，縮寫，駝峰法都用上，ESlint各種檢測規範的工具都通過，But，fName是啥？這時候，你是不是想說What are you 弄啥呢？ let lName = 'willen'; // 這個問題和上面的一樣
修改：無需對每個變數都寫註釋，從名字上就看懂
let firstName = 'jackie'; // 怎麼樣，是不是一目瞭然。少被噴了一次 let lastName = 'willen'; ```
（3）特定的變數
問題：無說明的引數
if (value.length < 8) { // 為什麼要小於8，8表示啥？長度，還是位移，還是高度？Oh,my God!! .... }
修改：新增變數
const MAX_INPUT_LENGTH = 8; if (value.length < MAX_INPUT_LENGTH) { // 一目瞭然，不能超過最大輸入長度 .... }
（4）變數的命名
問題：命名過於囉嗦
let nameString;
let theUsers;
修改：做到簡潔明瞭
let name; let users;
（5）使用說明性的變數（即有意義的變數名）
問題：長程式碼不知道啥意思
const address = 'One Infinite Loop, Cupertino 95014'; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; saveCityZipCode( address.match(cityZipCodeRegex)[1], // 這個公式到底要幹嘛，對不起，原作者已經離職了。自己看程式碼 address.match(cityZipCodeRegex)[2], // 這個公式到底要幹嘛，對不起，原作者已經離職了。自己看程式碼 );
修改：用變數名來解釋長程式碼的含義
const address = 'One Infinite Loop, Cupertino 95014'; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; const [, city, zipCode] = address.match(cityZipCodeRegex) || []; saveCityZipCode(city, zipCode);
（6）避免使用太多的全域性變數
問題：在不同的檔案不停的定義全域性變數
//name.js window.name = 'a'; hello.js window.name = 'b'; time.js window.name = 'c'; //三個檔案的先後載入順序不同，都會使得window.name的值不同，同時，你對window.name的修改了都有可能不生效，因為你不知道你修改過之後別人是不是又在別的說明檔案中對其的值重置了。所以隨著檔案的增多，會導致一團亂麻。
修改：少用或使用替代方案
1.可以選擇只用區域性變數。通過(){}的方法。
2.如果你確實用很多的全域性變數需要共享，你可以使用vuex,redux或者你自己參考flux模式寫一個也行。
（7）變數的賦值。
問題：對於求值獲取的變數，沒有兜底。
const MIN_NAME_LENGTH = 8; let lastName = fullName[1]; if(lastName.length > MIN_NAME_LENGTH) { // 這樣你就給你的程式碼成功的埋了一個坑，你有考慮過如果fullName = ['jackie']這樣的情況嗎？這樣程式一跑起來就爆炸。要不你試試。 .... }
修改： 對於求值變數，做好兜底。
const MIN_NAME_LENGTH = 8; let lastName = fullName[1] || ''; // 做好兜底，fullName[1]中取不到的時候，不至於賦值個undefined,至少還有個空字元，從根本上講，lastName的變數型別還是String，String原型鏈上的特性都能使用，不會報錯。不會變成undefined。 if(lastName.length > MIN_NAME_LENGTH) { .... } 其實在專案中有很多求值變數，對於每個求值變數都需要做好兜底。 let propertyValue = Object.attr || 0; // 因為Object.attr有可能為空，所以需要兜底。 但是，賦值變數就不需要兜底了。 let a = 2; // 因為有底了，所以不要兜著。 let myName = 'Tiny'; // 因為有底了，所以不要兜著。
二、函式相關
（1）函式命名
問題：從命名無法知道返回值型別
function showFriendsList() {....} // 現在問，你知道這個返回的是一個數組，還是一個物件，還是true or false。你能答的上來否？你能答得上來我請你吃松鶴樓的滿漢全席還請你不要當真。
修改：對於返回true or false的函式，最好以should/is/can/has開頭
function shouldShowFriendsList() {...} function isEmpty() {...} function canCreateDocuments() {...} function hasLicense() {...}
（2）功能函式最好為純函式
問題：不要讓功能函式的輸出變化無常。
function plusAbc(a, b, c) { // 這個函式的輸出將變化無常，因為api返回的值一旦改變，同樣輸入函式的a，b,c的值，但函式返回的結果卻不一定相同。 var c = fetch('../api'); return a+b+c; }
修改：功能函式使用純函式，輸入一致，輸出結果永遠唯一
function plusAbc(a, b, c) { // 同樣輸入函式的a，b,c的值，但函式返回的結果永遠相同。 return a+b+c; }
（3）函式傳參
問題：傳參無說明
page.getSVG(api, true, false); // true和false啥意思，一目不了然
修改：傳參有說明
page.getSVG({ imageApi: api, includePageBackground: true, // 一目瞭然，知道這些true和false是啥意思 compress: false, })
（4）動作函式要以動詞開頭
問題：無法辨別函式意圖
function emlU(user) { .... }
修改：動詞開頭，函式意圖就很明顯
function sendEmailToUser(user) { .... }
（5）一個函式完成一個獨立的功能，不要一個函式混雜多個功能
注意：這是軟體工程中最重要的一條規則，當函式需要做更多的事情時，它們將會更難進行編寫、測試、理解和組合。當你能將一個函式抽離出只完成一個動作，他們將能夠很容易的進行重構並且你的程式碼將會更容易閱讀。如果你嚴格遵守本條規則，你將會領先於許多開發者。
問題：函式功能混亂，一個函式包含多個功能。最後就像能以一當百的老師傅一樣，被亂拳打死（亂拳（功能複雜函式）打死老師傅（老程式設計師））
function sendEmailToClients(clients) { clients.forEach(client => { const clientRecord = database.lookup(client) if (clientRecord.isActive()) { email(client) } }) }
修改：功能拆解,
function sendEmailToActiveClients(clients) { //各個擊破，易於維護和複用 clients.filter(isActiveClient).forEach(email) } function isActiveClient(client) { const clientRecord = database.lookup(client) return clientRecord.isActive() }
（6）優先使用指令式程式設計
問題：使用for迴圈程式設計
for(i = 1; i <= 10; i++) { // 一看到for迴圈讓人頓生不想看的情愫 a[i] = a[i] +1; }
修改：使用指令式程式設計
let b = a.map(item => ++item) // 怎麼樣，是不是很好理解，就是把a的值每項加一賦值給b就可以了。現在在javascript中幾乎所有的for迴圈都可以被map,filter,find,some,any,forEach等命令式編成取代。
（7）函式中過多的採用if else ..
問題：if else過多
if (a === 1) { ... } else if (a ===2) { ... } else if (a === 3) { ... } else { ... }
修改：可以使用switch替代或用陣列替代
//方法一： switch(a) { case 1: .... case 2: .... case 3: .... default: .... } //方法二 let handler = { 1: () => {....}, 2: () => {....}. 3: () => {....}, default: () => {....} } handler[a]() || handler['default']()
三、儘量使用ES6，有可以能的話ES7中新語法
（1）儘量使用箭頭函式
問題：採用傳統函式
function foo() { // code }
修改：使用箭頭函式
let foo = () => { // code }
（2）連線字串
問題：採用傳統+號
var message = 'Hello ' + name + ', it\'s ' + time + ' now'
修改：採用模板字元
var message = `Hello ${name}, it's ${time} now`
（3）使用結構賦值
問題：使用傳統賦值
var data = { name: 'dys', age: 1 }; var name = data.name; var age = data.age; var fullName = ['jackie', 'willen']; var firstName = fullName[0]; var lastName = fullName[1];
修改：使用結構賦值
const data = {name:'dys', age:1}; const {name, age} = data; // 怎麼樣，是不是簡單明瞭 var fullName = ['jackie', 'willen']; const [firstName, lastName] = fullName;
（4） 儘量使用類class
問題：採用傳統的函式原型鏈實現繼承
//典型的 ES5 的類(function)在繼承、構造和方法定義方面可讀性較差，當需要繼承時，優先選用 class。程式碼太多，就省略了。
修改：採用ES6類實現繼承
class Animal { constructor(age) { this.age = age } move() { /* ... */ } } class Mammal extends Animal { constructor(age, furColor) { super(age) this.furColor = furColor } liveBirth() { /* ... */ } } class Human extends Mammal { constructor(age, furColor, languageSpoken) { super(age, furColor) this.languageSpoken = languageSpoken } speak() { /* ... */ } }
先寫到這了，這是目前為止發現的問題，這篇文章中並沒有完全覆蓋到常見的寫程式碼的不好的習慣，所以你如果覺的有需要補充的，都可以在文章下方評論，或者直接到下面的Github的這篇文章中評論。
參考連結：
https://blog.risingstack.com/javascript-clean-coding-best-practices-node-js-at-scale/（JavaScript Clean Coding Best Practices）
https://www.zhihu.com/question/20635785 （如何寫出優美的 JavaScript 程式碼？）