前端開發小總結

減少多重if…else判斷

爲了後期測試調試方便，可以先分析業務，把多個if…else判斷分成下面幾個部分去分別判斷：
1. 空值判斷
2. 業務判斷
3. 狀態判斷

立即執行函數

var a = 2;
(function IIFE(global) {
    var a = 3;
    console.log(a);  // 3
    console.log(global.a);  // 2
})(window);
console.log(a);  // 2

傳入一個函數作爲參數

var a = 2;
(function IIFE(def) {
    def(window);
})(function def(global) {
    var a = 3;
    console.log(a);  // 3
    console.log(global.a);  // 2
});

由於函數被包含在一對 ( ) 括號內部，因此成爲了一個表達式，通過在末尾加上另外一個 ( ) 可以立即執行這個函數，比如 (function foo(){ .. })()。第一個 ( ) 將函數變成表達式，第二個 ( ) 執行了這個函數。
相較於傳統的 IIFE 形式，很多人都更喜歡另一個改進的形式:(function(){ .. }())。仔 細觀察其中的區別。第一種形式中函數表達式被包含在 ( ) 中，然後在後面用另一個 () 括 號來調用。第二種形式中用來調用的 () 括號被移進了用來包裝的 ( ) 括號中。

try…catch會創建一個塊級作用域

try {
    undefined();
} catch(err) {
    console.log(err);  // TypeError: undefined is not a function
    at test02.js:10
}
console.log(err);  
// 報錯：Uncaught ReferenceError: err is not defined

變量提升

變量和函數聲明會被提升到作用域的頂部，但是函數表達式不會被提升。同時，值得注意的細節是函數聲明會首先被提升，然後纔是變量。

foo();  // undefined
function foo() {
    console.log(a);
    var a = 2;
}

bar();  // 報錯Uncaught TypeError: bar is not a function
var bar = function baz() {
    console.log(2);
}