码迷,mamicode.com
首页 > 其他好文 > 详细

前端面试(蚂蚁金服笔试) - 手写事件总栈 EventBus

时间:2021-05-24 13:06:22      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:名称   通过   other   函数   array   his   info   面试   class   

最近参加了一次蚂蚁金服的面试,其中有两道笔试题,分别是手写事件总栈和手写模板引擎

手写模板引擎比较复杂,除了需要识别 {{data.name}} 这种基本情况之外, 还要兼顾 {{data.info[1]}}{{data.others["about"]}}

于是先记录下手写事件总栈,后面再完善手写模板引擎的代码

 

一、什么是事件总栈

在 Vue 2.x 中,有两种能在任意组件中传参的方式:状态管理 Vuex 和事件总栈 EventBus

但 EventBus 并非 Vue 首创,它作为一种事件的发布订阅模式,一直活跃在各种代码框架中

EventBus 化了各个组件之间进行通信的复杂度,其工作原理在于对事件的监听与手动触发:

// 实例化事件总栈
const events = new EventBus();

// 监听自定义事件
events.on(my-event, (value) => {
  console.log(value);
});

// 触发事件
events.emit(my-event, helloworld);

而这种先注册事件监听函数,然后通过触发事件来传参的行为其实是一种发布订阅模式 

 

二、发布订阅模式

发布订阅模式是一种广泛应用于异步编程的模式,是回调函数的事件化,常常用来解耦业务逻辑

作为一个事件总栈,它应当具备一个任务队列,以及三个方法:订阅方法、发布方法、取消订阅

class EventBus {
  constructor() {
    this.tasks = {}; // 按事件名称创建任务队列
  }
  // 注册事件(订阅)
  on() {}
  // 触发事件(发布)
  emit() {}
  // 移除指定回调(取消订阅)
  off() {}
}

 

首先来实现订阅方法 on()

它的作用是将事件的处理函数加入任务队列,所以需要接收两个参数:事件名称、事件的处理函数

/**
 * 注册事件(订阅)
 * @param {String} type  事件名称
 * @param {Function} fn  回调函数
 */
on(type, fn) {
  // 如果还没有注册过该事件,则创建对应事件的队列
  if (!this.tasks[type]) {
    this.tasks[type] = [];
  }
  // 将回调函数加入队列
  this.tasks[type].push(fn);
}

 

然后是触发事件的方法 emit()

其功能是每触发一次事件,会执行对应事件的所有回调函数。所以它的参数必须有一个是事件名称,另外还可以传入一个参数作为回调函数的参数

/**
 * 触发事件(发布)
 * @param {String} type  事件名称
 * @param {...any} args  传入的参数,不限个数
 */
emit(type, ...args) {
  // 如果该事件没有被注册,则返回
  if (!this.tasks[type]) {
    return;
  }
  // 遍历执行对应的回调数组,并传入参数
  this.tasks[type].forEach(fn => fn(...args));
}

 

最后是注销方法 off(),它将需要注销的事件处理函数从对应事件的任务队列中清除

/**
 * 移除指定回调(取消订阅)
 * @param {String} type  事件名称
 * @param {Function} fn  回调函数
 */
off(type, fn) {
  const tasks = this.tasks[type];
// 校验事件队列是否存在 if (!Array.isArray(tasks)) { return; } // 利用 filter 删除队列中的指定函数 this.tasks[type] = tasks.filter(cb => fn !== cb); }

 到这里一个简单的事件总栈就已经完成,可以通过第一部分的测试代码进行测试

 

三、完整代码

通常事件总栈内除了上面提到的三种方法外,还会包含一个 once() 方法,用来注册一个只能执行一次的事件,会在下面的代码中体现

class EventBus {
  constructor() {
    this.tasks = {}; // 按事件名称创建任务队列
  }

  /**
   * 注册事件(订阅)
   * @param {String} type  事件名称
   * @param {Function} fn  回调函数
   */
  on(type, fn) {
    // 如果还没有注册过该事件,则创建对应事件的队列
    if (!this.tasks[type]) {
      this.tasks[type] = [];
    }
    // 将回调函数加入队列
    this.tasks[type].push(fn);
  }
  
  /**
   * 注册一个只能执行一次的事件
   * @params type[String] 事件类型
   * @params fn[Function] 回调函数
   */
  once(type, fn) {
    if (!this.tasks[type]) {
      this.tasks[type] = [];
    }

    const that = this;
    // 注意该函数必须是具名函数,因为需要删除,但该名称只在函数内部有效
    function _once(...args) {
      fn(...args);
      that.off(type, _once); // 执行一次后注销
    }

    this.tasks[type].push(_once);
  }

  /**
   * 触发事件(发布)
   * @param {String} type  事件名称
   * @param {...any} args  传入的参数,不限个数
   */
  emit(type, ...args) {
    // 如果该事件没有被注册,则返回
    if (!this.tasks[type]) {
      return;
    }
    // 遍历执行对应的回调数组,并传入参数
    this.tasks[type].forEach((fn) => fn(...args));
  }

  /**
   * 移除指定回调(取消订阅)
   * @param {String} type  事件名称
   * @param {Function} fn  回调函数
   */
  off(type, fn) {
    const tasks = this.tasks[type];
    // 校验事件队列是否存在
    if (!Array.isArray(tasks)) {
      return;
    }

    // 利用 filter 删除队列中的指定函数
    this.tasks[type] = tasks.filter((cb) => fn !== cb);
  }
}

 

前端面试(蚂蚁金服笔试) - 手写事件总栈 EventBus

标签:名称   通过   other   函数   array   his   info   面试   class   

原文地址:https://www.cnblogs.com/wisewrong/p/14768071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!