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

資訊專欄INFORMATION COLUMN

js設(shè)計模式之觀察者模式和發(fā)布/訂閱模式

HitenDev / 817人閱讀

摘要:添加獲取長度獲取下標(biāo)通知首先我們聲明一個主體類,里面包含一個觀察者數(shù)組,還有一些操作方法。觀察者通用聲明一個更新接口,用來獲取主體分發(fā)的通知。主體分發(fā)消息給觀察者。

觀察者模式
The Observer is a design pattern where an object (known as a subject) maintains a list of objects depending on it (observers), automatically notifying them of any changes to state.

觀察者是一種 包含一系列依賴于主體(subject)的觀察者(observers),自動通知它們變化的內(nèi)容的設(shè)計模式

接下來,用oberver pattern來實(shí)現(xiàn)一個購物車列表,實(shí)現(xiàn)之前先說明幾個概念:

主體 (Subject)

維護(hù)一系列觀察者的數(shù)組,包含一些操作方法,比如增加、刪除,獲取等等。
class Subject {
    constructor() {
        this.observerList = [];
    }
    add(item) { //添加
        return this.observerList.push(item);
    }
    count() { //獲取長度
        return this.observerList.length;
    }
    get(index) { //獲取下標(biāo)
        if (index > -1 && index < this.observerList.length) {
            return this.observerList[index];
        } else {
            return null;
        }
    }
    notify(context) { //通知
        let observerCount = this.count();

        for (let i = 0; i < observerCount; i++) {
            console.dir(this.get(i))
            this.get(i).update(context);
        }
    }
}

首先我們聲明一個主體類,里面包含一個觀察者數(shù)組,還有一些操作方法。

觀察者(Observer)

class Observer {
    constructor() {
        this.update = () => { //通用interface
            //todo
        }
    }
}

聲明一個更新接口,用來獲取主體分發(fā)的通知。

兩者關(guān)系大概如下:

主要流程:

定義好主體類和觀察者類

類實(shí)例化成具體對象,綁定方法,觀察者在主體對象里注冊

操作。主體分發(fā)消息給觀察者。

具體實(shí)現(xiàn)代碼如下:





    
    
    
    Document
    



    

name: price:

list
name price action
發(fā)布/訂閱者模式
The Publish/Subscribe pattern however uses a topic/event channel which sits between the objects wishing to receive notifications (subscribers) and the object firing the event (the publisher). This event system allows code to define application specific events which can pass custom arguments containing values needed by the subscriber. The idea here is to avoid dependencies between the subscriber and publisher.

Publish/Subscribe pattern和Observer pattern和類似,都是Observer注冊,subject分布通知,但是Publish/Subscribe pattern多了個事件管道(event channel)用來集中處理監(jiān)聽的事件

典型的Publish/Subscribe模式的實(shí)現(xiàn)代碼:

var pubsub = {};
        (function(myObject) {
            // Storage for topics that can be broadcast
            // or listened to
            var topics = {};
            // An topic identifier
            var subUid = -1;
            // Publish or broadcast events of interest
            // with a specific topic name and arguments
            // such as the data to pass along  
            myObject.publish = function(topic, args) {
                if (!topics[topic]) {
                    return false;
                }
                var subscribers = topics[topic],
                    len = subscribers ? subscribers.length : 0;
                while (len--) {
                    subscribers[len].func(topic, args);
                }
                return this;
            };
            // Subscribe to events of interest
            // with a specific topic name and a
            // callback function, to be executed
            // when the topic/event is observed
            myObject.subscribe = function(topic, func) {
                if (!topics[topic]) {
                    topics[topic] = [];
                }
                var token = (++subUid).toString();
                topics[topic].push({
                    token: token,
                    func: func
                });
                return token;
            };
            // Unsubscribe from a specific
            // topic, based on a tokenized reference
            // to the subscription
            myObject.unsubscribe = function(token) {
                for (var m in topics) {
                    if (topics[m]) {
                        for (var i = 0, j = topics[m].length; i < j; i++) {
                            if (topics[m][i].token === token) {
                                topics[m].splice(i, 1);
                                return token;
                            }
                        }
                    }
                }
                return this;
            };
        }(pubsub));

test demo:

        //注冊事件
        var test = pubsub.subscribe("message", function(topic, data) {
            console.log("topic:" + topic + ",data:" + data);
        });
        //分布消息
        pubsub.publish("message", "siip"); //topic:message,data:test,a,b,c

        pubsub.publish("message", ["test", "a", "b", "c"]); //topic:message,data:test,a,b,c
        
        //刪除注冊事件
        pubsub.unsubscribe(test);

        pubsub.publish("message", {
            sender: "hello@google.com",
            body: "Hey again!"
        });

兩者關(guān)系大概如下:

參考:

1、https://addyosmani.com/resour...

2、http://blog.csdn.net/cooldrag...

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

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

相關(guān)文章

  • JS設(shè)計模式Obeserver(察者模式、Publish/Subscribe(發(fā)布/訂閱模式

    摘要:觀察者模式定義設(shè)計模式中對的定義一個對象稱為維持一系列依賴于它觀察者的對象,將有關(guān)狀態(tài)的任何變更自動通知給它們。如圖模式比較觀察者模式則多了一個類似于話題調(diào)度中心的流程,發(fā)布者和訂閱者解耦。 Obeserver(觀察者)模式 定義 《js設(shè)計模式》中對Observer的定義:一個對象(稱為subject)維持一系列依賴于它(觀察者)的對象,將有關(guān)狀態(tài)的任何變更自動通知給它們。 《設(shè)計模...

    荊兆峰 評論0 收藏0
  • JavaScript設(shè)計模式發(fā)布-訂閱模式察者模式)-Part1

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

    muzhuyu 評論0 收藏0
  • JavaScript設(shè)計模式發(fā)布-訂閱模式察者模式)-Part2

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

    Charlie_Jade 評論0 收藏0
  • JavaScript設(shè)計模式發(fā)布-訂閱模式察者模式)-Part2

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

    chemzqm 評論0 收藏0

發(fā)表評論

0條評論

HitenDev

|高級講師

TA的文章

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