• 设计模式:观察者模式


    观察者模式:

    ☂ 参考:谈谈 JavaScript 的观察者模式(自定义事件)

    这是一种创建松散耦合代码的技术。

    它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

    由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。

    主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。

    /**
     * 观察者模式:
     */
    var Event = {
        // 通过 on 接口监听事件 EventName
        // 如果事件 eventName 被触发,则执行 callback 回调函数
        on: function(eventName, callback) {
            if (!this.handles) {
                // this.handles = {};   // 对象引用会引起共享
                Object.defineProperty(this, 'handles', {
                    value: {},
                    enumerable: false,
                    configurable: true,
                    writable: true
                })
            }
    
            if (!this.handles[eventName]) {
                this.handles[eventName] = [];
            }
    
            this.handles[eventName].push(callback);
        },
    
        // 触发事件
        emit: function() {
            var eventName = arguments[0],
                callbackArr = this.handles[eventName],
                args = arguments[1];
    
            if (callbackArr) {
                for (var i = 0; i < callbackArr.length; i++) {
                    callbackArr[i](args);
                }
            }
        }
    }
    
    // 测试1
    Event.on('test', function(result) {
        console.log(result);    // 输出 'hello world'
    });
    
    Event.on('test', function() {
        console.log('test');    // 输出 'test'
    });
    
    Event.emit('test', 'hello world');
    
    
    // 测试2
    var person1 = {};
    var person2 = {};
    
    Object.assign(person1, Event);
    Object.assign(person2, Event);
    
    person1.on('call1', function() {
        console.log('person1');
    });
    
    person2.on('call2', function() {
        console.log('person2');
    });
    
    person1.emit('call1');  // 输出 'person1'
    person1.emit('call2');  // 没有输出
    person2.emit('call1');  // 没有输出
    person2.emit('call2');  // 输出 'person2'
    

  • 相关阅读:
    Linux内存分析
    mysql 分表
    安装YCM
    c/c++ 之静态库
    ubuntu20 宽带连接
    数据对齐
    计算机中浮点数的表示
    整数的表示
    信息的储存
    SparseTable ST表
  • 原文地址:https://www.cnblogs.com/Ruth92/p/5886088.html
Copyright © 2020-2023  润新知