使用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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
JavaScript this在函数中的指向及实例详解
Oct 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
PHP生成Flash动画的实现代码
2010/03/12 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
smarty中常用方法实例总结
2015/08/07 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
js的匿名函数使用介绍
2013/12/11 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
js获取图片宽高的方法
2015/11/25 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python服务器端收发请求的实现代码
2014/09/29 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
专业实习自我鉴定
2013/10/29 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
分家协议书范本
2016/03/22 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript