JavaScript笔记之队列与事件队列

最近根据工作需要参考网上资料编写了 JavaScript 的队列，并根据实际需求增加事件队列机制。具体代码如下：

1.构建 队列 数据结构对象

按照以往原型实现方式构建接口。

/*
* 队列
*/
let Queue = function () {
  // 存储
  this._items = []
}

/*
* 元素添加到队列中
*/
Queue.prototype.enqueue = function (element) {
  this._items.push(element)
}

/*
* 队列中删除前端元素
*/
Queue.prototype.dequeue = function () {
  return this._items.shift()
}

/*
* 查看前端元素
*/
Queue.prototype.front = function () {
  return this._items[0]
}

/*
* 判断队列是否为空
*/
Queue.prototype.isEmpty = function () {
  return this._items.length === 0
}

/*
* 查看队列中元素的个数
*/
Queue.prototype.size = function () {
  return this._items.length
}

export default Queue

2.队列使用

实例化队列，调用接口。

// 实例化
let queue = new Queue()

// 压入元素进队列
queue.enqueue('123')
queue.enqueue(123)
queue.enqueue({ val: 123 })

// 删除前端元素
queue.dequeue() // delete { val: 123}

// 查看前端元素
queue.front() // 123

// 获取队列大小
queue.size() // 2

3.构建 事件队列 数据结构对象

在队列的基础上，我们可以构建事件队列机制。事件队列提供拿到队首元素直接执行、并删除队首的方法，有效结合 WebWorker 等机制实现事件轮询。

// 引入先前定义好的队列
import Queue from './queue.js'

/*
* 事件队列
* 特点：FIFO 先进先出
*/
let EventQueue = function () {
  // 存储
  this._eventQueue = new Queue()
}

/*
* 元素添加到队列中
*/
EventQueue.prototype.enqueue = function (fn) {
  return this._eventQueue.enqueue(fn)
}

/*
* 队列中删除前端元素
*/
EventQueue.prototype.dequeue = function () {
  return this._eventQueue.dequeue()
}

/*
* 执行队首事件
*/
EventQueue.prototype.excute = function () {
  // 取出队首事件，并运行
  this._eventQueue.front()()

  // 移除队首事件
  return this._eventQueue.dequeue()
}

/*
* 判断队列是否为空
*/
EventQueue.prototype.isEmpty = function () {
  return this._items.length === 0
}

/*
* 查看队列中元素的个数
*/
EventQueue.prototype.size = function () {
  return this._items.length
}

export default EventQueue

4.事件队列使用

// 实例化
let event_queue = new EventQueue()

// 压入元素进队列
event_queue.enqueue(() => { console.log('Hello, world!') })

// 获取队列大小
event_queue.size() // 1

// 执行事件
event_queue.excute() // Hello, world

// 获取队列大小
event_queue.size() // 0

注：示例代码可参见 个人前端知识库。

---

created by @SpiderWang
转载请注明作者及链接