聽飛狐聊JavaScript設(shè)計模式系列09

張春雷發(fā)布于2019-08-19 17:07 / 3336人閱讀

摘要：說白了，就是對訪問進行控制。這一回，主要聊了代理模式，虛擬代理，圖片懶加載，難度適中下一回，聊一下適配器模式，難度也比較小。

本回內(nèi)容介紹

上一回，聊了門面模式，DOM2級事件，事件委托，介一回，也比較容易，代理模式（proxy），代理對象控制對本體對象的訪問，實現(xiàn)了同樣的接口，并且會把任何方法的調(diào)用傳遞到本體對象。
說白了，就是對訪問進行控制。直接上代碼，走你：

1.代理模式

代理也是對象，主要就是保護本體對象，對本體對象進行訪問控制，本體對象有的，代理對象也有，如下：

// 定義一個房子的接口,可以租，可以賣，這里就只實現(xiàn)一個好了，保留租的方法：rent，有興趣的可以擴展另一個
var House = new Interface("House",["sale"]);

// 買方
function Buyer(name){
    this.name = name;
}

// 中介，也就是代理，這里傳遞的對象是買方對象
var Proxy = function(o){
    // 買方名字
    this.buyer = o.name;
    // 業(yè)主實例
    if(this.owner==null){
        this.owner = new Owner(o);
    }
    // 驗證接口
    Interface.ensureImplements(this,House);
};

// 代理對象對本體對象的方法實現(xiàn)
Proxy.prototype = {
    // 還原構(gòu)造器
    constructor:Proxy,
    // 代理對象同樣實現(xiàn)本體的方法
    sale:function(money){
        return this.owner.sale(money);
    }
};

// 業(yè)主即本體，傳遞的對象依然是買方對象
var Owner = function(o){
    this.buyer = o.name;
    Interface.ensureImplements(this,House);
};

// 本體對象的方法實現(xiàn)
Owner.prototype = {
    constructor:Owner,
    // 本體對象的方法
    sale:function(money){
        return this.buyer+"支付了"+money+"萬元買了別墅.";
    }
};
var br = new Buyer("飛狐");
alert(new Proxy(br).sale("500"));    // 飛狐支付了500萬元買了別墅.

這個例子比較直觀，買方，賣方，中介三種角色很好的詮釋了代理模式，也比較好理解，看下一個例子，走你.

2. 虛擬代理

這里聊一個虛擬代理，就是在代理的方法被調(diào)用的時候再去實例化相關(guān)的對象。還記得之前的惰性單例模式么，虛擬代理有點類似，看例子：

// 定義一個年級
var Grades = function(){};

Grades.prototype = {
    // 檢測人數(shù)
    check:function(o){
        alert(o.length+"人");
    }
}; 

// 年級代理
var GradesProxy = function() {
    // 先不初始化Grades.
    this.gra = null;
};

GradesProxy.prototype = {
    // 這里就是按需初始化
    init: function() {
        if (!this.gra) {
            this.gra = new Grades();
        }
    },
    // 檢測學生人數(shù)
    check: function(s) {
        // 調(diào)用 init()
        this.init();
        return this.gra.check(s);
    }
}

// 測試
var students = ["大衛(wèi)","擼壕","飛狐"];
var o = new GradesProxy();
o.check(students); //3人

這個例子比較簡單，沒有寫太多方法，也沒有多帶帶寫學生類，用一個數(shù)組一筆帶過，目的是更直觀的展示在用時初始化本體對象。

慣例性裝逼，今天看新聞，鐘漢良導演，韓寒監(jiān)制的新片《沙漏》，繼《后會無期》后又一次合作，期待啊~~

這一回聊的內(nèi)容少，難度很小，比較好理解。
下面的內(nèi)容來一個實例，懶加載，懶加載是代理模式很好的一個實踐。

JS圖片懶加載

懶加載又叫延遲加載，通過自定義屬性，把真實的img地址存到自定義屬性中，如：data-url=”img”,而圖片真正的src存的是loading的圖片，如src=”loading.gif”，當拖動滾動條發(fā)生窗口的偏移，再動態(tài)將data-url的值賦給src; 實時的替換img的src的圖片路徑，繞么，看例子吧：

// 這里是html的代碼，

    
    
    
    
    
    
// ...省略很多的圖片

// 這里開始是js代碼，沒有寫script，只是簡單的模擬
function $(t){
    return document.getElementsByTagName(t);
}

// 獲取id
function lazyLoad(el) {
    // 遍歷需要加載的圖片元素
    for (var i = 0, len = el.length; i < len; i++) {
        // 根據(jù)class屬性判斷是否已經(jīng)加載過
        if (el[i].className != "load") {
            // 這里就是獲取data-url的值，也就是真實圖片路徑，替代loading圖片
            el[i].src = el[i].getAttribute("data-url");
            // 替代后加一個class屬性已經(jīng)加載過的標記
            el[i].className = "load"; 
        }
    }
};

// 滾動時執(zhí)行
window.onscroll = function() { 
    lazyLoad($("img"));
};
 // 加載后執(zhí)行
window.onload = function() {
    lazyLoad($("img"));
};

這里只是簡單的模擬，代碼量少，應(yīng)該可以很容易看懂，懶加載運用比較廣泛，可以提高性能，京東首頁目前也是這么做的。

這一回，主要聊了代理模式，虛擬代理，圖片懶加載，難度適中~~
下一回，聊一下適配器模式，難度也比較小。

客觀看完點個贊，推薦推薦唄，嘿嘿~~

注：此系飛狐原創(chuàng)，轉(zhuǎn)載請注明出處