使用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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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初学入门
2006/11/19 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php中Snoopy类用法实例
2015/06/19 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python CSV模块使用实例
2015/04/09 Python
python3爬取数据至mysql的方法
2018/06/26 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
大学生的应聘自我评价
2013/12/13 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
护理见习报告范文
2014/11/03 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
Golang的继承模拟实例
2021/06/30 Golang
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python