JS中的观察者模式DEMO

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/michael51/article/details/88600718

观察者模式

这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。

例子

假如我们正在开发一个商城网站，网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件，就是必须先用ajax异步请求获取用户的登录信息。这是很正常的，比如用户的名字和头像要显示在header模块里，而这两个字段都来自用户登录后返回的信息。这个时候，我们就可以把这几个模块的渲染事件都放到一个数组里面，然后待登录成功之后再遍历这个数组并且调用每一个方法。

var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发，则执行callback回调函数
    on: function (eventName, callback) {
        //我的代码
        if (!this.handles) {
            this.handles = {};
        }

        if (!this.handles[eventName]) {
            this.handles[eventName] = [];
        }
        this.handles[eventName].push(callback);
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
        //console.info('eventName', eventName);
        // console.info('this.handles', this.handles);

        if (this.handles[arguments[0]]) {
            for (var i = 0; i < this.handles[arguments[0]].length; i++) {
                this.handles[arguments[0]] i;
            }
        }
    }
};

绑定事件

Event.on('test', function (result) {
   console.log(result);
});

Event.on('test', function () {
   console.log('test');
});

//触发
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'