摘要：添加獲取長(zhǎng)度獲取下標(biāo)通知首先我們聲明一個(gè)主體類，里面包含一個(gè)觀察者數(shù)組，還有一些操作方法。觀察者通用聲明一個(gè)更新接口，用來獲取主體分發(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）,自動(dòng)通知它們變化的內(nèi)容的設(shè)計(jì)模式

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

主體 (Subject)

維護(hù)一系列觀察者的數(shù)組，包含一些操作方法，比如增加、刪除，獲取等等。

class Subject {
    constructor() {
        this.observerList = [];
    }
    add(item) { //添加
        return this.observerList.push(item);
    }
    count() { //獲取長(zhǎng)度
        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);
        }
    }
}

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

觀察者（Observer）

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

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

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

主要流程：

定義好主體類和觀察者類

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

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

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

    
    
    
    
    



    

        name:
         price:
        
        
        
        
    

    

        
list
        

            

                

                    name
                
                

                    price
                
                

                    action
                
            
        
        

        
    
    

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注冊(cè)，subject分布通知，但是Publish/Subscribe pattern多了個(gè)事件管道（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:

        //注冊(cè)事件
        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
        
        //刪除注冊(cè)事件
        pubsub.unsubscribe(test);

        pubsub.publish("message", {
            sender: "[email protected]",
            body: "Hey again!"
        });

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

參考：

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

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