• 设计模式:观察者模式


    观察者模式:

    ☂ 参考:谈谈 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'
    

  • 相关阅读:
    激光打印机基于主机驱动程序、基于 PCL 驱动程序和 PostScript 驱动程序有何区别?
    转贴:打印机语言PostScript和PCL的比较
    编译器相关配置简介
    Graphics View的体系结构
    解决重装Qt后不能编译Examples的问题
    有符号数和无符号数的区别
    51单片机的外设
    AT89S52单片机P3口解惑
    双向端口设计
    AT89s52单片机的掉电测试
  • 原文地址:https://www.cnblogs.com/Ruth92/p/5886088.html
Copyright © 2020-2023  润新知