使用js实现单链解决前端队列问题的方法


Posted in Javascript onFebruary 03, 2020

使用场景

  • 比如前端需要处理什么队列一类的业务
  • 比如有人下单,需要弹出什么弹窗

首先先声明一个类

接收一个 数组对象:items

class ChainQueue {
 constructor(items) {
  this.items = items || []
  this.maxNum = 200
 }
}

为队列添加数组队列

// 添加数组队列
entryArrQueue(node) {
 Array.isArray(node)
 node.map(item => this.items.push(item))
}

为当前队列添加单个对象

// 添加队列
entryQueue(node) {
 if (this.items.length > this.maxNum) {
  return
 }
 if (Array.isArray(node)) {
  node.map(item => this.items.push(item))
 } else {
  this.items.push(node)
 }
}

删除队列,返回删除的当前的项目

deleteQueue(func = () => {}) {
 assert(isFunc(func), `${func} is not function`)
 func(this.items.shift())
}

返回队列的第一个

front() {
 return this.items[0]
}

清除队列

clear() {
 this.items = []
}

所有代码

const isFunc = v => typeof v === 'function'
const assert = (condition, msg) => {
 if (!condition) throw new Error(`[dashboard]${msg}`)
}
class ChainQueue {
 constructor(items) {
  this.items = items || []
  this.maxNum = 200
 }

 // 添加数组队列
 entryArrQueue(node) {
  Array.isArray(node)
  node.map(item => this.items.push(item))
 }

 // 添加队列
 entryQueue(node) {
  if (this.items.length > this.maxNum) {
   return
  }
  if (Array.isArray(node)) {
   node.map(item => this.items.push(item))
  } else {
   this.items.push(node)
  }
 }

 // 删除队列,返回删除的当前的项目
 deleteQueue(func = () => {}) {
  assert(isFunc(func), `${func} is not function`)
  func(this.items.shift())
 }

 // 返回队列的第一个
 front() {
  return this.items[0]
 }

 // 清除队列
 clear() {
  this.items = []
 }
 get size() {
  return this.items.length
 }

 get isEmpty() {
  return !this.items.length
 }

 print() {
  console.log(this.items.toString())
  console.log(this.items)
 }
 result() {
  return this.items
 }
}

module.exports = ChainQueue

// export default ChainQueue
// export default (ChainQueue = new ChainQueue())

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
javascript递归函数定义和用法示例分析
Jul 22 Javascript
javscript 数组扁平化的实现
Feb 03 #Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 #Javascript
JavaScript中的类型检查
Feb 03 #Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 #Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 #Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 #Javascript
You might like
PHP文件读写操作之文件写入代码
2011/01/13 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
eslint 的三大通用规则详解
2019/05/16 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python构造函数及解构函数介绍
2015/02/26 Python
对pandas中Series的map函数详解
2018/07/25 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python中return的返回和执行实例
2019/12/24 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
自荐书模板
2013/12/15 职场文书
学习十八大报告感言
2014/02/04 职场文书
干部下基层实施方案
2014/03/14 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
司法助理专业自荐书
2014/06/13 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
股东授权委托书
2014/10/15 职场文书
南京南京观后感
2015/06/02 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
javascript Number 与 Math对象的介绍
2021/11/17 Javascript