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

Posted 2021-03-16 yess

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

            }
        };
    })();