zoukankan      html  css  js  c++  java
  • 前端常用设计模式之观察者模式

    前情

    在前端开发越来越复杂的今天,越来越需要一些设计模式来提高开发质量和效率

    定义

    属于行为型模式,当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知依赖它的对象。

    代码演示

    自定义事件监听器,注册一批方法,一次触发

    let obj1 = {
      fn() {
        console.log('fn1');
      }
    }
    
    let obj2 = {
      fn() {
        console.log('fn2');
      }
    }
    
    class MyEvent{
      constructor() {
        this.handles = {};
      }
    
      /**
       * 事件注册
       * @param {String} eventName 
       * @param {Function} fn 
       */
      addEvent(eventName, fn) {
        if (typeof this.handles[eventName] === 'undefined') {
          this.handles[eventName] = [];
        }
        this.handles[eventName].push(fn);
      }
    
      /**
       * 事件触发
       * @param {String} evnetName 
       */
      trigger(evnetName) {
        if (!(evnetName in this.handles)) {
          return ;
        }
        this.handles[evnetName].forEach(fn => {
          fn();
        })
      }
    }
    
    let eventObj = new MyEvent();
    // 事件注册
    eventObj.addEvent('myevent', obj1.fn);
    eventObj.addEvent('myevent', obj2.fn);
    
    // 事件触发
    setTimeout(() => {
      eventObj.trigger('myevent');
    }, 1100);
    
    好好学习!天天向上!
  • 相关阅读:
    MSMQ简例
    C#观察者模式简例
    C#常见算法题目(面试准备)
    HttpWebRequest
    自定义Attribute简例
    .Net下的 ORM框架介紹
    for xml path的应用
    .net中日至框架log4net.dll如何使用
    动态载入.ascx用户控件
    wap 2.0 编写规范
  • 原文地址:https://www.cnblogs.com/xwwin/p/15333800.html
Copyright © 2011-2022 走看看