聽(tīng)飛狐聊JavaScript設(shè)計(jì)模式系列09

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

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

本回內(nèi)容介紹

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

1.代理模式

代理也是對(duì)象，主要就是保護(hù)本體對(duì)象，對(duì)本體對(duì)象進(jìn)行訪問(wèn)控制，本體對(duì)象有的，代理對(duì)象也有，如下：

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

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

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

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

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

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

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

2. 虛擬代理

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

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

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

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

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

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

這個(gè)例子比較簡(jiǎn)單，沒(méi)有寫(xiě)太多方法，也沒(méi)有多帶帶寫(xiě)學(xué)生類(lèi)，用一個(gè)數(shù)組一筆帶過(guò)，目的是更直觀的展示在用時(shí)初始化本體對(duì)象。

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

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

JS圖片懶加載

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

// 這里是html的代碼，

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

// 這里開(kāi)始是js代碼，沒(méi)有寫(xiě)script，只是簡(jiǎn)單的模擬
function $(t){
    return document.getElementsByTagName(t);
}

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

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

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

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

客觀看完點(diǎn)個(gè)贊，推薦推薦唄，嘿嘿~~

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