使用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 相关文章推荐
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
vue之数据交互实例代码
Jun 16 Javascript
微信小程序block的使用教程
Apr 01 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
npm qs模块使用详解
Feb 07 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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脚本的10个技巧(5)
2006/10/09 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Python中logging模块的用法实例
2014/09/29 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python中Lambda表达式详解
2019/11/20 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Pycharm Git 设置方法
2020/09/15 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
高级方案规划工程师岗位职责
2013/11/29 职场文书
大学生求职自荐信
2013/12/12 职场文书
质检员岗位职责
2013/12/17 职场文书
北体毕业生求职信
2014/02/28 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
工程部部长岗位职责
2015/02/12 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
virtualenv隔离Python环境的问题解析
2022/06/21 Python