使用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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
Javascript倒计时代码
Aug 12 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
Vue中props的使用详解
Jun 15 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 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
实用函数10
2007/11/08 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
php实现的用户查询类实例
2015/06/18 PHP
功能强大的php文件上传类
2016/08/29 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
小程序实现列表删除功能
2018/10/30 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
一份python入门应该看的学习资料
2018/04/11 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
请假条范文大全
2014/04/10 职场文书
个人安全生产承诺书
2014/05/22 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
唐山大地震的观后感
2015/06/05 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS