js自定义事件

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

js自定义事件的基本原理： 主要元素：事件清单，触发器，添加器，添加器将监听程序存到一个数组中，调用触发器时，将事件清单里面的每个回调函数执行一遍。

 /**
     自定义事件
     */
    var EventHandle = {
        events: {}, //  事件清单
        // 添加器，向事件列表添加自定义事件和回调函数
        on: function (ev, callback) {
            callback = callback || function () {
            };
            if (typeof this.events[ev] === 'undefined') {
                this.events[ev] = [callback];
            } else {
                this.events[ev].push(callback);
            }
        },
        // 触发器，触发开关，循环事件清单
        emit: function (ev, args) {
            this.events[ev].forEach(function (fn) {
                fn(args);
            });
        },
        // 从移除事件清单中移除自定义事件
        off: function (ev) {
            delete this.events[ev];
        }
    };

    EventHandle.on('打招呼', function () {
        alert('你好')
    })
    EventHandle.emit('打招呼')

自定义事件的作用

作用非常多，比如你造轮子时可以用来处理一些异步的操作，比如自己封装个ajax来处理网络请求:

 MyAjax.send(url);
    MyAjax.on("success", function () {
        // TODO
    })
    MyAjax.on("error", function () {
        // TODO
    })

还比如一个单页面商城网站需要发送网络请求从后台返回数据，然后进行多个模块组件的渲染(导航头,消息通知,用户中心等)，我们可以把这些渲染操作放在一个事件清单中，当网络请求成功返回之后触发自定义事件，遍历这些操作逐个渲染。