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

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）,自動通知它們變化的內容的設計模式

接下來，用oberver pattern來實現一個購物車列表,實現之前先說明幾個概念：

主體 (Subject)

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

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

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

觀察者（Observer）

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

聲明一個更新接口，用來獲取主體分發的通知。

兩者關系大概如下：

主要流程：

定義好主體類和觀察者類

類實例化成具體對象，綁定方法，觀察者在主體對象里注冊

操作。主體分發消息給觀察者。

具體實現代碼如下：

    
    
    
    
    



    

        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注冊，subject分布通知，但是Publish/Subscribe pattern多了個事件管道（event channel）用來集中處理監聽的事件

典型的Publish/Subscribe模式的實現代碼：

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!"
        });

兩者關系大概如下：

參考：

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

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