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);
    
    好好学习!天天向上!
  • 相关阅读:
    k8s之StatefulSet介绍(六)
    k8s之Deployment 声明式地升级应用(五)
    k8s 挂载卷介绍(四)
    k8s 之service资源介绍(三)
    k8s几种pod的控制器
    k8s 初识pod (二)
    k8s的常用命令(一)
    k8s 学习笔记
    aws centos系统磁盘扩容
    mac更改launchpad图标大小
  • 原文地址:https://www.cnblogs.com/xwwin/p/15333800.html
Copyright © 2011-2022 走看看