国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javascript 發(fā)布訂閱

The question / 1833人閱讀

摘要：參考資料發(fā)布訂閱自定義事件一自定義事件二二維碼前言前端異步編程主要包括回調(diào)函數(shù)，事件監(jiān)聽，。在前端異步編程的基礎(chǔ)上，能夠?qū)崿F(xiàn)發(fā)布訂閱消息范式。消息的發(fā)送者發(fā)布者不是計劃發(fā)送其消息給特定的接收者訂閱者。最終作為模塊發(fā)布聯(lián)系方式電子郵箱

參考資料

發(fā)布/訂閱：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

二維碼

前言

前端異步編程主要包括回調(diào)函數(shù)，事件監(jiān)聽，promise/defer。

在前端異步編程的基礎(chǔ)上，能夠?qū)崿F(xiàn)發(fā)布/訂閱（Publish/subscribe）消息范式。消息的發(fā)送者（發(fā)布者）不是計劃發(fā)送其消息給特定的接收者（訂閱者）。訂閱者對一個或多個類別表達興趣，于是只接收感興趣的消息，而不需要知道什么樣的發(fā)布者發(fā)布的消息。這種發(fā)布者和訂閱者的解耦可以允許更好的可擴展性和更為動態(tài)的網(wǎng)絡(luò)拓撲.

根據(jù)發(fā)布/訂閱模式介紹，與Event loop高度相似，遂選擇基于DOM事件實現(xiàn)。

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

代碼實現(xiàn)

定義發(fā)布/訂閱構(gòu)造函數(shù)

    function SourceCribe () {
        // 生成發(fā)布/訂閱器DOM節(jié)點
        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");

        // 消息發(fā)布實現(xiàn)
        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);
        };

        // 訂閱實現(xiàn)，handler需要使用顯式聲明函數(shù)，不要使用匿名函數(shù)
        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);
        };
    }

實際調(diào)用

(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)
后續(xù)

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

當(dāng)前為基于主題的實現(xiàn)，會引入基于內(nèi)容，實現(xiàn)混合發(fā)布/訂閱。

最終作為AMD模塊發(fā)布

聯(lián)系方式

QQ/電子郵箱: 491229492

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85278.html

相關(guān)文章

  • JavaScript 發(fā)布-訂閱模式

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

    13651657101 評論0 收藏0

  • JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part1

    摘要：設(shè)計模式與開發(fā)實踐讀書筆記。發(fā)布訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關(guān)系。附設(shè)計模式之發(fā)布訂閱模式觀察者模式數(shù)據(jù)結(jié)構(gòu)和算法系列棧隊列優(yōu)先隊列循環(huán)隊列設(shè)計模式系列設(shè)計模式之策略模式 《JavaScript設(shè)計模式與開發(fā)實踐》讀書筆記。 發(fā)布-訂閱模式又叫觀察者模式，它定義了對象之間的一種一對多的依賴關(guān)系。當(dāng)一個對象的狀態(tài)發(fā)生改變時，所有依賴它的對象都將得到通知。 例...

    muzhuyu 評論0 收藏0

  • JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part2

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

    Charlie_Jade 評論0 收藏0

  • JavaScript設(shè)計模式之發(fā)布-訂閱模式（觀察者模式）-Part2

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

    chemzqm 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<