码迷,mamicode.com
首页 > 其他好文 > 详细

设计模式之观察者模式 DOM0级和DOM2级封装

时间:2020-01-11 22:18:34      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:length   ons   var   apply   观察者模式   事件处理   for   his   OLE   

DEM0级:

   var Observer = (function() {
        /* 
            声明一个空对象,存储事件和触发事件
        */
        var obj = {};

        return {
            // 添加事件---事件名,事件处理程序
            add: function(name, fn) {
                // 将事件写入对象
                obj[name] = fn;
            },
            // 触发事件---事件名,参数
            trigger: function(name, args = []) {
                obj[name].apply(obj, args);
            }
        };
    })();
    // Observer 就是观察者, 接口暴露的对象
    module.exports = Observer;
});

DOM2级:

var Observer = (function() {
        /* 
            声明一个空对象,存储事件和触发事件
        */
        var obj = {};

        return {
            // 添加事件---事件名,事件处理程序
            add: function(name, fn) {
                // 将事件写入对象---- 存储事件使用数组
                // 判断事件是否存在
                if (obj[name]) {
                    // 存在
                    obj[name].push(fn);

                } else {
                    // 不存在
                    obj[name] = [fn];
                }
            },
            // 触发事件---事件名,参数
            trigger: function(name, args = []) {
                obj[name].forEach(function(value) {
                    value.apply(obj, args);
                });
              
            },
            // 取消事件
            off: function(name, fn) {
                if (arguments.length == 0) {
                    // 取消所有事件
                    obj = {};
                } else if (arguments.length == 1) {
                    // 取消指定名称的事件
                    obj[name] = [];
                } else if (arguments.length == 2) {
                    obj[name].forEach(function(value, index) {
                        if (value == fn) {
                            // 在数组中移除该值
                            obj[name].splice(index, 1);
                        }
                    });
                }

                console.log(obj);
            },
            // 一次性事件
            once: function(name, fn) {
                // 备份this
                var me = this;
                // 为了防止传入为函数体
                function demo() {
                    fn();
                    // 移除事件
                    me.off(name, demo);
                }
                // 添加事件
                this.add(name, demo);

            }
        };
    })();  

设计模式之观察者模式 DOM0级和DOM2级封装

标签:length   ons   var   apply   观察者模式   事件处理   for   his   OLE   

原文地址:https://www.cnblogs.com/yess/p/12181221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!