javascript 發布訂閱

The question 發布于2019-08-21 10:18 / 1828人閱讀

摘要：參考資料發布訂閱自定義事件一自定義事件二二維碼前言前端異步編程主要包括回調函數，事件監聽，。在前端異步編程的基礎上，能夠實現發布訂閱消息范式。消息的發送者發布者不是計劃發送其消息給特定的接收者訂閱者。最終作為模塊發布聯系方式電子郵箱

參考資料

發布/訂閱：http://zh.wikipedia.org/wiki/%E5%8F%91%E5%B8%83/%E8%AE%A2%E9%98%85

自定義事件一： https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

自定義事件二： https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

二維碼

前言

前端異步編程主要包括回調函數，事件監聽，promise/defer。

在前端異步編程的基礎上，能夠實現發布/訂閱（Publish/subscribe）消息范式。消息的發送者（發布者）不是計劃發送其消息給特定的接收者（訂閱者）。訂閱者對一個或多個類別表達興趣，于是只接收感興趣的消息，而不需要知道什么樣的發布者發布的消息。這種發布者和訂閱者的解耦可以允許更好的可擴展性和更為動態的網絡拓撲.

根據發布/訂閱模式介紹，與Event loop高度相似，遂選擇基于DOM事件實現。

如有興趣，請加入共同coding，共同成長https://github.com/bornkiller/subscriber.git

代碼實現

定義發布/訂閱構造函數

    function SourceCribe () {
        // 生成發布/訂閱器DOM節點
        var body = document.querySelector("body");
        if (!document.querySelector(".magazine")) {
            var element = document.createElement("mark");
            element.setAttribute("class", "magazine");
            body.appendChild(element);
        }
        this.magazine = document.querySelector(".magazine");

        // 消息發布實現
        this.publish = function (source, data) {
            if (!typeof source === "string") {
                return false;
            }
            var oEvent = new CustomEvent(source, {
                bubbles: true,
                cancelable: false,
                detail:data
            });
            this.magazine.dispatchEvent(oEvent);
        };

        // 訂閱實現，handler需要使用顯式聲明函數，不要使用匿名函數
        this.subscribe = function (source, handler) {
            if(!typeof source === "string" || !typeof value === "function") {
                return false;
            }

            this.magazine.addEventListener(source, handler, false);
        };

        // 取消訂閱
        this.unsubcribe = function (source, handler) {
            if(!typeof source === "string" || !typeof value === "function") {
                return false;
            }

            this.magazine.removeEventListener(source, handler, false);
        };
    }

實際調用

(function(window){
    window.addEventListener("load",function(evt){

        var sourceCribe = new SourceCribe();

        var loveHandlerAlways = function (evt) {
            console.log("always " + evt.detail);
        };
        var loveHandlerEver = function (evt) {
            console.log("ever " + evt.detail);
        };

        sourceCribe.subscribe("love", loveHandlerAlways);
        sourceCribe.subscribe("love", loveHandlerEver);

        sourceCribe.publish("love","500 days with summer");

        sourceCribe.unsubcribe("love", loveHandlerAlways);
        sourceCribe.publish("love","500 days with summer");
    });

})(window)

后續

處理好兼容性，特別是IE10-全線。

當前為基于主題的實現，會引入基于內容，實現混合發布/訂閱。

最終作為AMD模塊發布

聯系方式

QQ/電子郵箱: 491229492

云服務器 GPU云服務器發布訂閱模式訂閱發布模式 sqlserver發布訂閱 DTS 訂閱發布模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85278.html

JavaScript 發布-訂閱模式

摘要：發布訂閱模式訂閱者把自己想訂閱的事件注冊到調度中心，當發布者發布該事件到調度中心，也就是該事件觸發時，由調度中心統一調度訂閱者注冊到調度中心的處理代碼。發布-訂閱模式，看似陌生，其實不然。工作中經常會用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他們都使用了發布-訂閱模式，讓開發變得更加高效方便。一...

13651657101 2019-08-26 13:53 評論0 收藏0
JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part1

摘要：設計模式與開發實踐讀書筆記。發布訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關系。附設計模式之發布訂閱模式觀察者模式數據結構和算法系列棧隊列優先隊列循環隊列設計模式系列設計模式之策略模式《JavaScript設計模式與開發實踐》讀書筆記。發布-訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關系。當一個對象的狀態發生改變時，所有依賴它的對象都將得到通知。例...

muzhuyu 2019-08-20 12:06 評論0 收藏0
JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part2

摘要：設計模式與開發實踐讀書筆記。看此文章前，建議先看設計模式之發布訂閱模式觀察者模式在中，已經介紹了什么是發布訂閱模式，同時，也實現了發布訂閱模式。《JavaScript設計模式與開發實踐》讀書筆記。看此文章前，建議先看JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part1 在Part1中，已經介紹了什么是發布-訂閱模式，同時，也實現了發布-訂閱模式。但是，就Part1...

Charlie_Jade 2019-08-20 13:45 評論0 收藏0
JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part2

摘要：設計模式與開發實踐讀書筆記。看此文章前，建議先看設計模式之發布訂閱模式觀察者模式在中，已經介紹了什么是發布訂閱模式，同時，也實現了發布訂閱模式。《JavaScript設計模式與開發實踐》讀書筆記。看此文章前，建議先看JavaScript設計模式之發布-訂閱模式（觀察者模式）-Part1 在Part1中，已經介紹了什么是發布-訂閱模式，同時，也實現了發布-訂閱模式。但是，就Part1...

chemzqm 2019-08-01 16:12 評論0 收藏0