關於 Airbnb 的撰寫風格
Airbnb 的撰寫風格筆記
Function
7.1 使用命名的函數表達式而不是函數聲明
為什麼?直接寫上函數聲明，這意味著可能很容易的使用到此函數，這會造成可讀性和可維護性。
//bad
function foo(){ ... }
//bad
const foo = function(){...}
//good
const shor = function logUniqueMoreDesciptiveLexicalFoo() {...}
7.2 將立即調用的函數表達式包裝在括號中
為什麼?立即調用函數表達式是一個單元，將其包裝起來將其調用便能清晰的表現出來。
(function() {
console.log("Welcome");
})();
7.3 7.4 盡量不要在 if、while 區塊內寫入語句，函數聲明不是語句
//bad
if(currentUser){
function test(){
console.log('Nope.');
}
}
//good
let test;
if(currentUser){
test = () => {
console.log('Yup.');
}
}
7.6 函數內不要使用參數，使用 ... 語法
//bad
function concatenateAll(){
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
//good
function concatenateAll(...args){
return args.join();
}
7.7 使用默認參數語法，而不是對函數參數進行設定
//ready bad
function handleThing(opts){
opts = opts || {};
}
//still bad
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
}
// good
function handleThings(opts = {}) {
// ...
}
7.9 始終將默認參數方在最後面
//bad
function handleThing(opts = {}, name){
//..
}
//good
function handleThing(name, opts = {}){
//..
}
7.10 不要使用建構函數來創造一個新的函數
為什麼?以這種方式創建函數將評估與 eval() 類似的字串符，從而打開漏洞
//bad
var add = new Function('a','b','return a+b');
//still bad
var subtract = Function('a', 'b', 'return a - b');
7.12 如果參數為物件，另外設定變數為參數
為什麼? 操作作為參數傳入的對象可能會在原始調用中引起不必要的變量副作用
//bad
function fi(obj){
obj.key = 1;
}
//good
function f2(obj){
const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}
Tips
到底是誰的屬性?
可用 hasOwnProperty 檢查屬性是屬於當前物件，還是位於原型串鏈中
到底是誰的屬性?
可用 hasOwnProperty 檢查屬性是屬於當前物件，還是位於原型串鏈中
adkjs.hasOwnProperty('name') //true
adkjs.hasOwnProperty('setComments') //false
- name 的確是存在於 adkjs 中的，而 setComments 並不是物件 ydkjs_1 中，是在原型串鏈中。
- hasOwnProperty 只會檢查該物件，而不會檢查整條原型串鏈。
- for loop prop in obj 會檢查整個原型串鏈且為可列舉的屬性。
- prop in obj 會檢查整個原型串鏈，不管屬性是否可列舉。
7.14 最好使用點差運算符號 ... 來調用可變函數
為什麼?它更乾淨，的顯示陣列資料
//bad
const x = [1,2,3,4,5];
console.log.apply(console, x);
//good
const x = [1,2,3,4,5];
console.log(...x); //顯示陣列數值，1 2 3 4 5
//bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));
//good
new Date(...[2016, 8, 5]);