寫出良好風格的JS代碼
現在代碼的格式都有 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代碼