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
    })

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


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭