快捷導(dǎo)航

在vue中封裝的彈窗組件使用隊(duì)列模式實(shí)現(xiàn)方法

更新時(shí)間：2020年07月23日 11:10:56 投稿：mrr

這篇文章主要介紹了在vue中封裝的彈窗組件使用隊(duì)列模式實(shí)現(xiàn)方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

由于業(yè)務(wù)需要，需要在封裝的彈窗組件中引入定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果，但是如果同時(shí)觸發(fā)兩個(gè)彈窗，就會(huì)導(dǎo)致計(jì)時(shí)器bug，前一個(gè)彈窗的定時(shí)器沒有被清除，倒計(jì)時(shí)就會(huì)錯(cuò)亂，此時(shí)想到的解決辦法就是采用隊(duì)列模式，將每一個(gè)需要的彈窗存到隊(duì)列中，依次的將彈窗展示出來，同時(shí)清除定時(shí)器

什么是隊(duì)列

隊(duì)列（Queue）是先進(jìn)先出（FIFO, First-In-First-Out）的線性表。在具體應(yīng)用中通常用鏈表或者數(shù)組來實(shí)現(xiàn)。隊(duì)列只允許在尾部進(jìn)行插入操作（入隊(duì) enqueue），在頭部進(jìn)行刪除操作（出隊(duì) dequeue）。隊(duì)列的操作方式和堆棧類似，唯一的區(qū)別在于隊(duì)列只允許新數(shù)據(jù)在后端進(jìn)行添加。

JavaScript實(shí)現(xiàn)隊(duì)列的效果

function ArrayQueue(){ 
  var arr = []; 
    //入隊(duì)操作 
  this.push = function(element){ 
    arr.push(element); 
    return true; 
  } 
    //出隊(duì)操作 
  this.pop = function(){ 
    return arr.shift(); 
  } 
    //獲取隊(duì)首 
  this.getFront = function(){ 
    return arr[0]; 
  } 
    //獲取隊(duì)尾 
  this.getRear = function(){ 
    return arr[arr.length - 1] 
  } 
    //清空隊(duì)列 
  this.clear = function(){ 
    arr = []; 
  } 
    //獲取隊(duì)長(zhǎng) 
  this.size = function(){ 
    return length; 
  } 
}

和vue封裝的彈窗組件使用

首先要配合組件封裝隊(duì)列要進(jìn)行修改

class Queue {
 dataStore = []
 constructor(){
  this.dataStore=[]
 }
 enqueue(e) {
  this.dataStore.push(e)
  console.warn('入隊(duì)',this.dataStore);
 }

 dequeue() {
  this.dataStore.shift()
  console.warn('出隊(duì)',this.dataStore);
 }

 front() {
  console.log(this.dataStore,'front')
  return this.dataStore[0]()
 }
 select(){
  return this.dataStore[0]
 }

 back() {
  return this.dataStore[this.dataStore.length - 1]
 }

 isEmpty() {
  if (this.dataStore.length == 0) {
   return true
  }
  return false
 }

 toString() {
  return this.dataStore.join(',')
 }
}

export default Queue

在彈出第一個(gè)隊(duì)列的時(shí)候需要自執(zhí)行。

在你的封裝組件的函數(shù)中引入這個(gè)隊(duì)列，同時(shí)實(shí)例化這個(gè)隊(duì)列，寫入兩個(gè)方法.

const pushDialog = (eventName) => {
 if (queue.isEmpty()) {
  queue.enqueue(eventName);
  openDialog();
 } else {
  queue.enqueue(eventName);
 }
}
const openDialog = () => {
 // 打開彈窗
 queue.front();
}

在安裝的方法中將每一個(gè)彈窗加入隊(duì)列中

需要注意的是，每個(gè)彈窗是要被銷毀的，不然會(huì)導(dǎo)致方法重復(fù)。

舉例在確認(rèn)方法和定時(shí)器后怎么出隊(duì)列和清空定時(shí)器

到此這篇關(guān)于在vue中封裝的彈窗組件使用隊(duì)列模式實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 封裝的彈窗組件隊(duì)列模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: