js 前端 设计模式：观察者模式和发布-订阅者模式

观察者模式代码

观察者模式就是一对多事件，当事件发生的时候通知到多个观察者，所有观察者进行对应的更新操作update执行事件操作。

 // 观察者列表
    function ObserverList() {
        this.observerList = [];
    }

    ObserverList.prototype.add = function (obj) {
        return this.observerList.push(obj);
    }

    ObserverList.prototype.count = function () {
        return this.observerList.length;
    }

    ObserverList.prototype.get = function (index) {
        if (index > -1 && index < this.observerList.length) {
            return this.observerList[index];
        }
    }
    ObserverList.prototype.indexOf = function (obj, startIndex) {
        var i = startIndex || 0;
        while (i < this.observerList.length) {
            if (this.observerList[i] === obj) {
                return i;
            }
            i++;
        }
        return -1;
    }

    ObserverList.prototype.removeAt = function (index) {
        this.observerList.splice(index, 1);
    }

    // 目标
    function Subject() {
        this.observers = new ObserverList();
    }

    Subject.prototype.addObsever = function (observer) {
        this.observers.add(observer);
    }

    Subject.prototype.removeObsever = function (observer) {
        this.observers.removeAt(this.observers.indexOf(observer, 0));
    }

    Subject.prototype.notify = function (context) {
        var observerCount = this.observers.count();
        for (var i = 0; i < observerCount; i++) {
            this.observers.get(i).update(context);
        }
    }

    // 观察者
    function observer1() {
        this.update = function (context) {
            console.log(context);
        }
    }

    function observer2() {
        this.update = function (context) {
            console.log('observer2', context)
        }
    }

    var mySubject = new Subject();
    mySubject.addObsever(new observer1);
    mySubject.addObsever(new observer2);
    mySubject.notify("hello world");
    mySubject.notify("sdfsdfsldfls;kdjfskdjf");

发布-订阅模式代码

发布-订阅者模式就是一对一模式，通过固定的事件名通知到对应的该事件名订阅者。

 var pubsub = {};

    (function (myObject) {
        var topics = {};

        var subUid = -1;

        // 发布指定订阅
        myObject.publish = function (topic, args) {
            if (!topics[topic]) {
                return false;
            }

            var subscribers = topics[topic];
            var len = subscribers ? subscribers.length : 0;
            while (len--) {
                subscribers[len].func(topic, args);
            }
            return this;
        }

        // 向订阅中心添加订阅
        myObject.subscribe = function (topic, func) {
            if (!topics[topic]) {
                topics[topic] = [];
            }
            var token = (++subUid).toString();
            topics[topic].push({
                token: token,
                func: func
            })
            return token;
        }

        // 向订阅中移除订阅
        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);

    pubsub.subscribe("test", () => { console.log("hello world") });
    pubsub.publish("test");