Javascript中理解發布--訂閱模式

時間 2019-11-12

標籤 javascript 理解發佈訂閱模式欄目 JavaScript 简体版

原文原文鏈接

Javascript中理解發布--訂閱模式php

閱讀目錄html

回到頂部

發佈訂閱模式介紹ajax

發佈---訂閱模式又叫觀察者模式，它定義了對象間的一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，全部依賴於它的對象都將獲得通知。緩存

現實生活中的發佈-訂閱模式；app

好比小紅最近在淘寶網上看上一雙鞋子，可是呢聯繫到賣家後，才發現這雙鞋賣光了，可是小紅對這雙鞋又很是喜歡，因此呢聯繫賣家，問賣家何時有貨，賣家告訴她，要等一個星期後纔有貨，賣家告訴小紅，要是你喜歡的話，你能夠收藏咱們的店鋪，等有貨的時候再通知你，因此小紅收藏了此店鋪，但與此同時，小明，小花等也喜歡這雙鞋，也收藏了該店鋪；等來貨的時候就依次會通知他們；異步

在上面的故事中，能夠看出是一個典型的發佈訂閱模式，賣家是屬於發佈者，小紅，小明等屬於訂閱者，訂閱該店鋪，賣家做爲發佈者，當鞋子到了的時候，會依次通知小明，小紅等，依次使用旺旺等工具給他們發佈消息；函數

發佈訂閱模式的優勢：工具

支持簡單的廣播通訊，當對象狀態發生改變時，會自動通知已經訂閱過的對象。

好比上面的列子，小明，小紅不須要每天逛淘寶網看鞋子到了沒有，在合適的時間點，發佈者(賣家)來貨了的時候，會通知該訂閱者(小紅，小明等人)。測試

2. 發佈者與訂閱者耦合性下降，發佈者只管發佈一條消息出去，它不關心這條消息如何被訂閱者使用，同時，訂閱者只監聽發佈者的事件名，只要發佈者的事件名不變，它無論發佈者如何改變；同理賣家（發佈者）它只須要將鞋子來貨的這件事告訴訂閱者(買家)，他無論買家到底買仍是不買，仍是買其餘賣家的。只要鞋子到貨了就通知訂閱者便可。動畫

對於第一點，咱們平常工做中也常用到，好比咱們的ajax請求，請求有成功(success)和失敗(error)的回調函數，咱們能夠訂閱ajax的success和error事件。咱們並不關心對象在異步運行的狀態，咱們只關心success的時候或者error的時候咱們要作點咱們本身的事情就能夠了~

發佈訂閱模式的缺點：

建立訂閱者須要消耗必定的時間和內存。
雖然能夠弱化對象之間的聯繫，若是過分使用的話，反而使代碼很差理解及代碼很差維護等等。

回到頂部

如何實現發佈--訂閱模式？

首先要想好誰是發佈者(好比上面的賣家)。
而後給發佈者添加一個緩存列表，用於存放回調函數來通知訂閱者(好比上面的買家收藏了賣家的店鋪，賣家經過收藏了該店鋪的一個列表名單)。
最後就是發佈消息，發佈者遍歷這個緩存列表，依次觸發裏面存放的訂閱者回調函數。

咱們還能夠在回調函數裏面添加一點參數，好比鞋子的顏色，鞋子尺碼等信息；

咱們先來實現下簡單的發佈-訂閱模式；代碼以下：

var shoeObj = {}; // 定義發佈者
shoeObj.list = []; // 緩存列表 存放訂閱者回調函數
        
// 增長訂閱者
shoeObj.listen = function(fn) {
    shoeObj.list.push(fn);  // 訂閱消息添加到緩存列表
}

// 發佈消息
shoeObj.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments); 
    }
}
// 小紅訂閱以下消息
shoeObj.listen(function(color,size){
    console.log("顏色是："+color);
    console.log("尺碼是："+size);  
});

// 小花訂閱以下消息
shoeObj.listen(function(color,size){
    console.log("再次打印顏色是："+color);
    console.log("再次打印尺碼是："+size); 
});
shoeObj.trigger("紅色",40);
shoeObj.trigger("黑色",42);

運行結果以下：

打印如上截圖，咱們看到訂閱者接收到發佈者的每一個消息，可是呢，對於小紅來講，她只想接收顏色爲紅色的消息，不想接收顏色爲黑色的消息，爲此咱們須要對代碼進行以下改造下，咱們能夠先增長一個key，使訂閱者只訂閱本身感興趣的消息。

var shoeObj = {}; // 定義發佈者
shoeObj.list = []; // 緩存列表 存放訂閱者回調函數
        
// 增長訂閱者
shoeObj.listen = function(key,fn) {
    if(!this.list[key]) {
        // 若是尚未訂閱過此類消息，給該類消息建立一個緩存列表
        this.list[key] = []; 
    }
    this.list[key].push(fn);  // 訂閱消息添加到緩存列表
}

// 發佈消息
shoeObj.trigger = function(){
    var key = Array.prototype.shift.call(arguments); // 取出消息類型名稱
    var fns = this.list[key];  // 取出該消息對應的回調函數的集合

    // 若是沒有訂閱過該消息的話，則返回
    if(!fns || fns.length === 0) {
        return;
    }
    for(var i = 0,fn; fn = fns[i++]; ) {
        fn.apply(this,arguments); // arguments 是發佈消息時附送的參數
    }
};

// 小紅訂閱以下消息
shoeObj.listen('red',function(size){
    console.log("尺碼是："+size);  
});

// 小花訂閱以下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺碼是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

上面的代碼，咱們再來運行打印下以下：

能夠看到，訂閱者只訂閱本身感興趣的消息了；

回到頂部

發佈---訂閱模式的代碼封裝

咱們知道，對於上面的代碼，小紅去買鞋這麼一個對象shoeObj 進行訂閱，可是若是之後咱們須要對買房子或者其餘的對象進行訂閱呢，咱們須要複製上面的代碼，再從新改下里面的對象代碼；爲此咱們須要進行代碼封裝；

以下代碼封裝：

var event = {
    list: [],
    listen: function(key,fn) {
        if(!this.list[key]) {
            this.list[key] = [];
        }
        // 訂閱的消息添加到緩存列表中
        this.list[key].push(fn);
    },
    trigger: function(){
        var key = Array.prototype.shift.call(arguments);
        var fns = this.list[key];
        // 若是沒有訂閱過該消息的話，則返回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0,fn; fn = fns[i++];) {
            fn.apply(this,arguments);
        }
    }
};

咱們在定義一個initEvent函數，這個函數使全部的普通對象都具備發佈訂閱功能，以下代碼：

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

// 咱們再來測試下，咱們仍是給shoeObj這個對象添加發布-訂閱功能；
var shoeObj = {};
initEvent(shoeObj);

// 小紅訂閱以下消息
shoeObj.listen('red',function(size){
    console.log("尺碼是："+size);  
});

// 小花訂閱以下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺碼是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

回到頂部

如何取消訂閱事件？

好比上面的列子，小紅她忽然不想買鞋子了，那麼對於賣家的店鋪他不想再接受該店鋪的消息，那麼小紅能夠取消該店鋪的訂閱。

以下代碼：

event.remove = function(key,fn){
    var fns = this.list[key];
    // 若是key對應的消息沒有訂閱過的話，則返回
    if(!fns) {
        return false;
    }
    // 若是沒有傳入具體的回調函數，表示須要取消key對應消息的全部訂閱
    if(!fn) {
        fn && (fns.length = 0);
    }else {
        for(var i = fns.length - 1; i >= 0; i--) {
            var _fn = fns[i];
            if(_fn === fn) {
                fns.splice(i,1); // 刪除訂閱者的回調函數
            }
        }
    }
};

測試代碼以下：

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

// 小紅訂閱以下消息
shoeObj.listen('red',fn1 = function(size){
    console.log("尺碼是："+size);  
});

// 小花訂閱以下消息
shoeObj.listen('red',fn2 = function(size){
    console.log("再次打印尺碼是："+size); 
});
shoeObj.remove("red",fn1);
shoeObj.trigger("red",42);

運行結果以下：

回到頂部

全局--發佈訂閱對象代碼封裝

咱們再來看看咱們傳統的ajax請求吧，好比咱們傳統的ajax請求，請求成功後須要作以下事情：

渲染數據。
使用數據來作一個動畫。

那麼咱們之前確定是以下寫代碼：

$.ajax(「http://127.0.0.1/index.php」,function(data){
    rendedData(data);  // 渲染數據
    doAnimate(data);  // 實現動畫 
});

假如之後還須要作點事情的話，咱們還須要在裏面寫調用的方法；這樣代碼就耦合性很高，那麼咱們如今使用發佈-訂閱模式來看如何重構上面的業務需求代碼；

$.ajax(「http://127.0.0.1/index.php」,function(data){
    Obj.trigger(‘success’,data);  // 發佈請求成功後的消息
});
// 下面咱們來訂閱此消息，好比我如今訂閱渲染數據這個消息；
Obj.listen(「success」,function(data){
   renderData(data);
});
// 訂閱動畫這個消息
Obj.listen(「success」,function(data){
   doAnimate(data); 
});

爲此咱們能夠封裝一個全局發佈-訂閱模式對象；以下代碼：

var Event = (function(){
    var list = {},
          listen,
          trigger,
          remove;
          listen = function(key,fn){
            if(!list[key]) {
                list[key] = [];
            }
            list[key].push(fn);
        };
        trigger = function(){
            var key = Array.prototype.shift.call(arguments),
                 fns = list[key];
            if(!fns || fns.length === 0) {
                return false;
            }
            for(var i = 0, fn; fn = fns[i++];) {
                fn.apply(this,arguments);
            }
        };
        remove = function(key,fn){
            var fns = list[key];
            if(!fns) {
                return false;
            }
            if(!fn) {
                fns && (fns.length = 0);
            }else {
                for(var i = fns.length - 1; i >= 0; i--){
                    var _fn = fns[i];
                    if(_fn === fn) {
                        fns.splice(i,1);
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
})();

// 測試代碼以下：
Event.listen("color",function(size) {
    console.log("尺碼爲:"+size); // 打印出尺碼爲42
});
Event.trigger("color",42);

回到頂部

理解模塊間通訊

咱們使用上面封裝的全局的發佈-訂閱對象來實現兩個模塊之間的通訊問題；好比如今有一個頁面有一個按鈕，每次點擊此按鈕後，div中會顯示此按鈕被點擊的總次數；以下代碼：

<button id="count">點將我</button>
<div id="showcount"></div>

咱們中的a.js 負責處理點擊操做及發佈消息；以下JS代碼：

var a = (function(){
    var count = 0;
    var button = document.getElementById("count");
    button.onclick = function(){
        Event.trigger("add",count++);
    }
})();

b.js 負責監聽add這個消息，並把點擊的總次數顯示到頁面上來；以下代碼：

var b = (function(){
    var div = document.getElementById("showcount");
    Event.listen('add',function(count){
        div.innerHTML = count;
    });
})();

下面是html代碼以下，JS應用以下引用便可：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="global.js"></script>
 </head>
 <body>
    <button id="count">點將我</button>
    <div id="showcount"></div>
    <script src = "a.js"></script>
    <script src = "b.js"></script>
 </body>
</html>