閉包 Closure

閉包 Closure

閉包可以用來解偶 function 之間的依賴。
// 用閉包的方式建立一個通用的單例模式
var  getSingle = function(fn) {
    var result;
    return function(){
        return result || (result = fn.apply(this.arguments));
    }
}
// 建立登入彈跳視窗
var createLoginDiv = function(){
    var div = document.createElement('div');
    div.innerHTML = '我是登入彈出視窗';
    div.style.display = 'none';
    document.body.appendChild(div);

    return div;
}

// 套用 getSingle 閉包
var createSingleLoginDiv = getSingle(createLoginDiv);

// 當按下登入按鈕時建立並顯示「登入彈跳視窗」
document.getElementById('loginBtn').onclick = function () {
    var loginLayer = createSingleLoginDiv();
    loginLayer.style.display = 'block';
};

/**
 * getSingle 可以輕鬆套用其他 function
 */
var createScript = function(){
    ...
}
var createIframe = function(){
    ...
}
var createButton = function(){
    ...
}
var createSingleScript = getSingle(createScript);
var createSingleIframe = getSingle(createIframe);
var createSingleButton = getSingle(createButton);

留言

這個網誌中的熱門文章

Git Commit Message 這樣寫會更好,替專案引入規範與範例

Gitlab 合併請求 Merge Request 是什麼?

PHP OO 物件導向基礎教學