成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

發(fā)布訂閱模式(雛形)

chemzqm / 1326人閱讀

摘要：在觸發(fā)的時(shí)候，回調(diào)此方法，從而觸發(fā)函數(shù)。發(fā)布訂閱模式比較適合寫封裝插件，我認(rèn)為拿來寫業(yè)務(wù)邏輯代碼，有點(diǎn)不太好用。接下來，我準(zhǔn)備用這個(gè)模式封裝一個(gè)上傳的組件。

初始化Event對象

var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};

主代碼：

var event = {
    list: [],
    listen: function(key, fn) {
        // 確定監(jiān)聽的事件容器默認(rèn)是一個(gè)空數(shù)組
        if(!this.list[key]) {
            this.list[key] = [];
        }
        // 訂閱的消息添加到緩存列表中
        this.list[key].push(fn);
        // 鏈?zhǔn)秸{(diào)用
        return this 
    },
    trigger: function(){
        // 獲取trigger 函數(shù)參數(shù)的第一個(gè)參數(shù)，即key鍵
        // 此時(shí)arguments 是trigger的參數(shù)類數(shù)組
        var key = Array.prototype.shift.call(arguments);
        // 拿到對應(yīng)key的監(jiān)聽事件數(shù)組
        var fns = this.list[key];
        // 如果沒有訂閱過該消息的話，則返回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0, fn;i < fns.length; i ++) {
            fn = fns[i]
            //逐個(gè)調(diào)用key鍵所對應(yīng)監(jiān)聽事件數(shù)組函數(shù)
            // 此時(shí)arguments 同樣也是trigger的參數(shù)類數(shù)組,只不過少了第一個(gè)參數(shù)
            // 將此參數(shù)傳遞給fn函數(shù)作為形參
            // this 也是fn的執(zhí)行作用域
            fn.apply(this, arguments);
        }
    }
   };

調(diào)用執(zhí)行：

    // 新建一個(gè)比如小紅的對象
    var shoeObj = {};
    // 初始化小紅對象
    initEvent(shoeObj);
    // 小紅同時(shí)訂閱如下消息（鏈?zhǔn)秸{(diào)用） 
    shoeObj.listen("red",function(size, price){
        console.log("尺碼是："+size);  
        console.log("price是" +price)
    }).listen("block", function (size, price) {
        console.log("尺碼是："+size);  
        console.log("price是" +price)
    })
    
    shoeObj.trigger("red", 40, 500);

    shoeObj.trigger("block",42, 300);

訂閱了消息后，我們可能會remove掉消息，所以Event對象新增一個(gè)方法：

// 略
remove : function(key, fn) {
       var fns = this.list[key]
       // 如果key對應(yīng)的消息沒有訂閱過的話，則返回
       if(!fns) return
       // 如果沒有傳入具體的回調(diào)函數(shù)，表示需要取消key對應(yīng)消息的所有訂閱
       if(!fn) {
         fns.length = 0 // 或者this.list[key] = []
         // fns = []   
         //fns = [] 這樣寫后，實(shí)際this.list[key]中的回調(diào)數(shù)組
         //依然存在,因?yàn)槌跏糵ns指向this.list[key]這個(gè)數(shù)組（數(shù)組是一個(gè)引用類型）
         //fns = [],代表我們將fns又指向了一個(gè)新的數(shù)組長度為空的引用數(shù)組，而這個(gè)
         // 新的引用數(shù)組 和this.list[key]這個(gè)引用數(shù)組是計(jì)算機(jī)里面占用兩個(gè)不同的
         // 堆棧。
       }else {
         for(var i = 0; i < fns.length; i ++) {
           var _fn = fns[i]
           if(_fn === fn) {
              fns.splice(i, 1) // 刪除訂閱者的回調(diào)函數(shù)
           }
         }
       }
    },
// 略

調(diào)用

    // 小紅訂閱如下消息 同時(shí)在red上面訂閱了兩個(gè)消息
    // 注意fn1 和fn2 這種寫法，比較少見，實(shí)際fn1，fn2成為了一個(gè)全局變量
    // 在remove的時(shí)候，作為具體的參數(shù)傳遞
    shoeObj.listen("red",fn1 = function(size, price){
        console.log("尺碼是1----" +size);  
        console.log("price是1----" +price)
    }).listen("red", fn2 = function(size, price){
        console.log("尺碼是2----" +size);  
        console.log("price是2----" +price)
    })
    
    //remove 掉fn2
    shoeObj.remove("red", fn2)
    // 觸發(fā)回調(diào) 此時(shí)只會回調(diào)fn1
    shoeObj.trigger("red", 40, 500);
    
    //如果remove 不傳參數(shù)，就會將red中所有的監(jiān)聽全部remove掉
    shoeObj.remove("red")
    shoeObj.trigger("red", 40, 500);

結(jié)束語
發(fā)布訂閱模式是js中36中設(shè)計(jì)模式中最常見的模式，也是很重要的設(shè)計(jì)模式。其實(shí)我們在寫項(xiàng)目邏輯代碼的時(shí)候，無形中也運(yùn)用了這個(gè)思想，最常見的是click觸發(fā)回調(diào)。比如我們定義一個(gè)方法，在定義的時(shí)候已經(jīng)listen在一個(gè)對象上，或window對象上。在click觸發(fā)的時(shí)候，回調(diào)此方法，從而觸發(fā)函數(shù)。
發(fā)布訂閱模式比較適合寫封裝插件，我認(rèn)為拿來寫業(yè)務(wù)邏輯代碼，有點(diǎn)不太好用。當(dāng)然這只是我自己的觀點(diǎn)。
接下來，我準(zhǔn)備用這個(gè)模式封裝一個(gè)上傳的組件。

附錄（參考文獻(xiàn)）

cn一篇博文

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107046.html

相關(guān)文章

  • 一步步理解觀察者模式

    摘要：今天說說觀察者模式，這是一個(gè)非常常見的模式，很多事件的分發(fā)都基于此模式。這里將從一個(gè)題目來說說此模式的使用，有這樣一道題某市一家報(bào)社開張，市民訂閱報(bào)紙，嘗試使用觀察者模式解決此問題。在使用觀察者模式前，先說說普通的處理方法。 今天說說觀察者模式，這是一個(gè)非常常見的模式，很多事件的分發(fā)都基于此模式。 這里將從一個(gè)題目來說說此模式的使用，有這樣一道題： 某市一家報(bào)社開張，市民訂閱報(bào)紙，嘗試...

    leanxi 評論0 收藏0

  • promise 基礎(chǔ)版（雛形）

    摘要：以下方式寫提示未定義涉及閉包作用域鏈的問題改進(jìn)方式調(diào)用實(shí)例化回調(diào)函數(shù)執(zhí)行成功，并執(zhí)行函數(shù)，此時(shí)在回調(diào)隊(duì)列里面添加一一個(gè)函數(shù)，并將的參數(shù)傳遞出去。否則直接執(zhí)行回調(diào)函數(shù)，不會由來觸發(fā)的回調(diào)函數(shù)執(zhí)行。 function Promise(fn){ //需要一個(gè)成功時(shí)的回調(diào) var self = this var callback; //一個(gè)實(shí)例的方法，用來注冊異...

    羅志環(huán) 評論0 收藏0

  • 我了解到的JavaScript異步編程

    摘要：接下來我們看下三類異步編程的實(shí)現(xiàn)。事件監(jiān)聽事件發(fā)布訂閱事件監(jiān)聽是一種非常常見的異步編程模式，它是一種典型的邏輯分離方式，對代碼解耦很有用處。 一、 一道面試題 前段時(shí)間面試，考察比較多的是js異步編程方面的相關(guān)知識點(diǎn)，如今，正好輪到自己分享技術(shù)，所以想把js異步編程學(xué)習(xí)下，做個(gè)總結(jié)。下面這個(gè)demo 概括了大多數(shù)面試過程中遇到的問題： for(var i = 0; i < 3; i++...

    RichardXG 評論0 收藏0

  • 《JavaScript設(shè)計(jì)模式》讀后感 覺很復(fù)雜

    摘要：想繼續(xù)了解設(shè)計(jì)模式必須要先搞懂面向?qū)ο缶幊?，否則只會讓你自己更痛苦。創(chuàng)建型設(shè)計(jì)模式主要有簡單工廠模式，工廠方法模式，抽象工廠模式，建造者模式，原型模式和單例模式，下面一一道來。而工廠方法模式本意是將實(shí)際創(chuàng)建對象的工作推遲到子類中。 接觸前端兩三個(gè)月的時(shí)候，那時(shí)候只是聽說設(shè)計(jì)模式很重要，然后我就去讀了一本設(shè)計(jì)模式的書，讀了一部分，也不知道這些設(shè)計(jì)模式到底設(shè)計(jì)出來干嘛的，然后就沒再看了。后...

    e10101 評論0 收藏0

  • 訂閱發(fā)布模式和觀察者模式的區(qū)別

    摘要：或許以前認(rèn)為訂閱發(fā)布模式是觀察者模式的一種別稱，但是發(fā)展至今，概念已經(jīng)有了不少區(qū)別。參考文章訂閱發(fā)布模式和觀察者模式真的不一樣 首選我們需要先了解兩者的定義和實(shí)現(xiàn)的方式，才能更好的區(qū)分兩者的不同點(diǎn)。 或許以前認(rèn)為訂閱發(fā)布模式是觀察者模式的一種別稱，但是發(fā)展至今，概念已經(jīng)有了不少區(qū)別。 訂閱發(fā)布模式 在軟件架構(gòu)中，發(fā)布-訂閱是一種消息范式，消息的發(fā)送者（稱為發(fā)布者）不會將消息直接發(fā)送給特...

    ysl_unh 評論0 收藏0

發(fā)表評論

0條評論

chemzqm

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<