JS发布订阅模式封装(纯手工)

简介: 发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。

类式定义方式

class EventEmitter {
   
   
  handlers = {
   
   };

  on(type, handler, once = false) {
   
   
    if (!this.handlers[type]) {
   
   
      this.handlers[type] = [];
    }

    if (!this.handlers[type].includes(handler)) {
   
   
      this.handlers[type].push(handler);
      handler.once = once;
    }
  }

  once(type, hanlder) {
   
   
    this.on(type, hanlder, true);
  }

  off(type, handler) {
   
   
    if (this.handlers[type]) {
   
   
      this.handlers[type] = this.handlers[type].filter((h) => h !== handler);
    }
  }

  trigger(type) {
   
   
    if (this.handlers[type]) {
   
   
      this.handlers[type].forEach((handler) => {
   
   
        handler.call(this);

        if (handler.once) {
   
   
          this.off(type, handler);
        }
      });
    }
  }
}

测试和打印

const ev = new EventEmitter();
function handler1() {
   
   
  console.log("handler1");
}
function handler2() {
   
   
  console.log("handler2");
}
function handler3() {
   
   
  console.log("handler3");
}
ev.on("test", handler1);
ev.on("test", handler2);
ev.on("test", handler3);
ev.trigger("test");
ev.trigger("test");

输出如下:
image.png

相关文章
|
5月前
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
|
5月前
uni-app 65egg.js聊天类chat.js封装(二)
uni-app 65egg.js聊天类chat.js封装(二)
46 1
|
5月前
|
JavaScript
JS封装节流函数
JS封装节流函数
53 0
|
9天前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
42 1
crypto-js中AES的加解密封装
|
3月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
109 2
|
3月前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
37 2
|
4月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
46 5
|
3月前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
29 0
|
3月前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
36 0
|
3月前
|
前端开发 JavaScript 开发者
前端 JS 经典:通用性函数封装思路
前端 JS 经典:通用性函数封装思路
27 0