Observer vs Pub-Sub pattern

[gaofant101]

JavaScript观察者（发布/订阅）模式

观察者模式是目前用的地方最多的设计模式. 最常见的设计模式之一;

观察者模式也是 M-V-C 架构中的关键部分;

wikipedia Observer pattern

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.

It is mainly used to implement distributed event handling systems

在观察者模式是一种设计模式, 其中一个对象叫 subject , 保留所有观察员列表主体, 并自动通知它们中的任何状态变化, 通常是通过调用他们的方法之一.

它主要用于在"事件驱动"软件中实现分布式事件处理系统

原来一直以为 "发布商+订阅者=观察者模式", 看了大量的博客, 咬文嚼字(但也不能自己阐述清楚), 看图不说话最直观, 也最能理解模型;

Pub-Sub模式（图片来源: MSDN博客 https://msdn.microsoft.com/en-us/library/ff649664.aspx）

图片来源: 开发者俱乐部(http://developers-club.com/posts/270339/)

基本观察者示例

const Observable = {
    observers: []
    ,addObserver: function(observer) {
        this.observers.push(observer);
    }
    ,removeObserver: function(observer) {
        var index = this.observers.indexOf(observer);

        if (~index) {
            this.observers.splice(index, 1);
        }
    }
    ,notifyObservers: function (message) {
        console.log(this.observers);
        for (var i = this.observers.length - 1; i >= 0; i--) {
            this.observers[i](message);
        }
    }
};

Observable.addObserver(function(message) {
    console.log('test1 observer message: ' + message);
});

Observable.addObserver(function(message) {
    console.log('test1 observer message: ' + message);
});

const observer = function (message) {
    console.log('second observer message: ' + message);
};

Observable.addObserver(observer);

Observable.notifyObservers('test 1');

Observable.notifyObservers('test 1');

// Observable.removeObserver(observer);

Observable.notifyObservers('test 2');
// console.log(Observable);

通过ID删除观察者

const Observable = {
    observers: []
    ,lastId: -1
    ,addObserver: function(observer) {
        this.observers.push({
            callback: observer,
            id: ++this.lastId,
        });

        return this.lastId;
    }
    ,removeObserver: function(id) {
        for (let i = this.observers.length - 1; i >= 0; i--) {
            if (this.observers[i].id == id) {
                this.observers.splice(i, 1);
                return true;
            }
        }
        return false;
    }
    ,notifyObservers: function(message) {
        console.log(this.observers);
        for (let i = this.observers.length - 1; i >= 0; i--) {
            this.observers[i].callback(message);
        }
    }
};

const id_1 = Observable.addObserver(function(message) {
    console.log('first observer message: ' + message);
});

const observer = function(message) {
    console.log('second observer message: ' + message);
};

const id_2 = Observable.addObserver(observer);

Observable.notifyObservers('test1');
// Observable.removeObserver(id_1);
Observable.notifyObservers('test2');

收拢观察者对象

const Observable = {
    observers: []
    ,addObserver: function(topic, observer) {
        this.observers[topic] || (this.observers[topic] = []);

        this.observers[topic].push(observer);
    }
    ,removeObserver: function(topic, observer) {
        if (!this.observers[topic]) {
            return;
        }
        const index = this.observers[topic].indexOf(observer);

        if (~index) {
            this.observers[topic].splice(index, 1);
        }
    }
    ,notifyObserver: function(topic, message) {
        console.log(this.observers);
        if (!this.observers[topic]) {
            return;
        }

        for (var i = this.observers[topic].length - 1; i >= 0; i--) {
            this.observers[topic][i](message);
        }
    }
};

Observable.addObserver('cart', function(message) {
    console.log('cart1 observer message: ' + message);
});

Observable.addObserver('notificatons1', function(message) {
    console.log('second observer message: ' + message);
});

Observable.notifyObserver('cart', 'test1');
Observable.notifyObserver('notificatons1', 'test2');

@参考

Observer vs Pub-Sub pattern (https://hackernoon.com/observer-vs-pub-sub-pattern-50d3b27f838c)

Observer vs Pub-Sub (http://developers-club.com/posts/270339/)

Observer_pattern wikipedia (https://en.wikipedia.org/wiki/Observer_pattern)