使用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 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
举例讲解Python常用模块
2019/03/08 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
集团薪酬管理制度
2014/01/13 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
公司管理制度范本
2015/08/03 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python