使用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将文本转化成JSON对象需要注意的问题
May 09 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 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
dedecms模版制作使用方法
2007/04/03 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
浅析python标准库中的glob
2020/03/13 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
公司活动策划方案
2014/01/13 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书