前端EventEmitter,发布/订阅模式,Vue双向数据绑定

本文主要是介绍前端EventEmitter,发布/订阅模式,Vue双向数据绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

发布订阅模式，很多地方都用到的一种模式，简单的说就是预定一件事情，时机成熟通知你，比如我们nodejs中的fs的读写文件的流，消息事件的触发等都用到了这种方式了，虽然不是特别难，但是非常实用，实现方式也简单，基本思想就是内部保存了一个对象存储订阅的函数，调用者通过名字来触发函数，订阅多个就按照队列的形式触发。

DOM 的事件机制就是发布订阅模式最常见的实现，这大概是前端最常用的编程模型了，监听某事件，当该事件发生时，监听该事件的监听函数被调用。

实现

class EventEmitter {constructor() {this.events = Object.create(null)}on(type, handler) {;(this.events[type] || (this.events[type] = [])).push(handler)}off(type, handler) {if (this.events[type]) {this.events[type].splice(this.events[type].indexOf(handler) >>> 0, 1)}}emit(type) {let args = [].slice.call(arguments, 1)let array = this.events[type] || []array.forEach(cb => {cb.apply(this, args)})}once(type, handler) {function _fn() {handler.apply(this, arguments)this.off(type, _fn)}this.on(type, _fn)}
}
export default EventEmitter

使用

let em = new EventEmitter()function fn(price) {console.log('price', price)
}em.once('work', fn)
em.off('work', fn)
em.emit('work', 100)console.log(em)

拓展

Vue 中非父子组件组件通信

在 Vue 中不同组件之间通讯，有一种解决方案叫Event Bus，这其实就是发布订阅模式的实现，非常简单好用。

通俗易懂了解Vue双向绑定原理及实现

Vue双向绑定原理，教你一步一步实现双向绑定

参考的代码1

这个有问题,没有传参数, 需要自行修改一下

// 发布订阅模式
class EventEmitter {constructor() {// 事件对象，存放订阅的名字和事件this.events = {};}// 订阅事件的方法on(eventName,callback) {if (!this.events[eventName]) {// 注意时数据，一个名字可以订阅多个事件函数this.events[eventName] = [callback]} else  {// 存在则push到指定数组的尾部保存this.events[eventName].push(callback)}}// 触发事件的方法emit(eventName) {// 遍历执行所有订阅的事件this.events[eventName] && this.events[eventName].forEach(cb => cb());}// 移除订阅事件removeListener(eventName, callback) {if (this.events[eventName]) {this.events[eventName] = this.events[eventName].filter(cb => cb != callback)}}// 只执行一次订阅的事件，然后移除once(eventName,callback) {// 绑定的时fn, 执行的时候会触发fn函数let fn = () => {callback(); // fn函数中调用原有的callbackthis.removeListener(eventName,fn); // 删除fn, 再次执行的时候之后执行一次}this.on(eventName,fn)}
}

使用方式

let em = new EventEmitter();
let workday = 0;
em.on("work", function() {workday++;console.log("work everyday");
});em.once("love", function() {console.log("just love you");
});function makeMoney() {console.log("make one million money");
}
em.on("money",makeMoney)；let time = setInterval(() => {em.emit("work");em.removeListener("money",makeMoney);em.emit("money");em.emit("love");if (workday === 5) {console.log("have a rest")clearInterval(time);}
}, 1);

参考代码2推荐

推荐看这个

Source Code - JavaScript - 学习优雅的编码

  // source codeall = all || Object.create(null);

  // source code(all[type] || (all[type] = [])).push(handler);// my code - badif (all[type]) {all[type].push(handler)} else {all[type] = [handler]}

  // source codeall[type].splice(all[type].indexOf(handler) >>> 0, 1);

  // source code(all[type] || []).slice().map((handler) => { handler(evt); });(all['*'] || []).slice().map((handler) => { handler(type, evt); });

  // source code!!(0)             // false!!(null)          // false!!('')            // false!!(undefined)     // false!!(NaN)           // false!!(2)             // true

  // source code+'123456'        // 123456, Number+new Date()      // 1527684413484, 相当于 new Date().getTime()

参考

TypeScript/理解Event Emitter (事件派发器)推荐
Understanding Event Emitters
上面案例的github代码
一个例子 - 看尽并手写JS发布订阅模式
前端必懂EventEmitter，不懂会丢人

这篇关于前端EventEmitter,发布/订阅模式,Vue双向数据绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！