Javascript設計模式之代理模式

擼狗吸貓發表於2019-04-08
JavaScript設計模式

前言：菜雞也有夢想，而我的夢想就是進一個真正的網際網路大廠。以前學習的時候沒有系統的整理，從今天開始要保持每週寫部落格的習慣，希望自己可以有所成長。為了培養程式設計思維，決定從設計模式開始寫起。我是通過讀《Javascript設計模式與開發實踐》來學習設計模式，並且將知識點和收穫記錄在部落格中。

此文僅記錄本人閱讀《JavaScript設計模式與開發實踐》的知識點與想法，感謝作者曾探大大寫出這麼好的一本書。如有冒犯，請聯絡本人：markcoder@outlook.com處理，請大家購買正版書籍。

1.代理模式介紹

代理模式的定義：為一個物件提供一種代理以方便對它的訪問。
代理模式可以解決避免對一些物件的直接訪問，以此為基礎，常見的有保護代理和虛擬代理。保護代理可以在代理中直接拒絕對物件的訪問；虛擬代理可以延遲訪問到真正需要的時候，以節省程式開銷。

2.程式碼示例

圖片懶載入 
let myImage = (function () {
    let imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        SetSrc: function (src) {
            imgNode.src = src;
        }
    }
})();

let proxyImage = (function () {
    let img = new Image;
    img.onload = function () {
        myImage.SetSrc(this.src);
    }
    return {
        SetSrc: function (src) {
             myImage.SetSrc('xxx/loading.png');
             this.src = src;
        }
    }
})();

proxyImage.SetSrc('xxx/img.png'); // 真正要載入的圖片
複製程式碼

3.快取代理模式

let mult = function () {
    let a = 1;
    for (let i = 0; i < arguments.length; i++) {
        a = a * arguments[i];
    }
    return a;
}

let proxyMult = (function () {
    let cache = [];
    return function () {
        let args = Array.prototype.join.call(arguments, ',');
        if (cache[args]) {
            return cache[args]
        }
        return cache[args] = mult.apply(this, arguments);
    }
})()

 proxyMult( 1, 2, 3, 4 ); // 輸出：24 
 proxyMult( 1, 2, 3, 4 ); // 輸出：24
複製程式碼

4.用高階函式動態建立代理

通過傳入高階函式這種更加靈活的方式，可以為各種計算方法建立快取代理。現在這些計算方法被當作引數傳入一個專門用於建立快取代理的工廠中，這樣一來，我們就可以為乘法、加法、減法等建立快取代理，程式碼如下： 
/**************** 計算乘積 *****************/ 
var mult = function(){ 
    var a = 1; 
    for ( var i = 0, l = arguments.length; i < l; i++ ){ 
        a = a * arguments[i]; 
    } 
    return a; 
}; 
/**************** 計算加和 *****************/ 
var plus = function(){ 
    var a = 0; 
    for ( var i = 0, l = arguments.length; i < l; i++ ){ 
        a = a + arguments[i]; 
    } 
    return a; 
}; 
/**************** 建立快取代理的工廠 *****************/ 
var createProxyFactory = function( fn ){ 
    var cache = {}; 
    return function(){ 
        var args = Array.prototype.join.call( arguments, ',' ); 
        if (cache[ args ]){ 
            return cache[ args ]; 
        } 
        return cache[ args ] = fn.apply( this, arguments ); 
    } 
}; 
var proxyMult = createProxyFactory( mult ), 
proxyPlus = createProxyFactory( plus ); 
alert ( proxyMult( 1, 2, 3, 4 ) ); // 輸出：24 
alert ( proxyMult( 1, 2, 3, 4 ) ); // 輸出：24 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 輸出：10 
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 輸出：10 
複製程式碼

相關文章