使用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 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 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 小乘法表实现代码
2009/07/16 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
jquery datepicker参数介绍和示例
2014/04/15 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python的log日志功能及设置方法
2019/07/11 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
导师评语大全
2014/04/26 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
群众路线表态发言材料
2014/10/17 职场文书
寒假安全保证书
2015/02/28 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2016年教代会开幕词
2016/03/04 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis