使用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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 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与MySQL交互使用详解
2006/10/09 PHP
php写的AES加密解密类分享
2014/06/20 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
node.js的事件机制
2017/02/08 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python简单判断序列是否为空的方法
2015/06/30 Python
基于python实现雪花算法过程详解
2019/11/16 Python
python 并发下载器实现方法示例
2019/11/22 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
管理标语大全
2014/06/24 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
雷锋电影观后感
2015/06/10 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书