欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript事件發(fā)布/訂閱模式原理與用法分析

 更新時(shí)間：2018年08月21日 09:57:24   作者：咕咚蘿卜  
這篇文章主要介紹了JavaScript事件發(fā)布/訂閱模式,結(jié)合實(shí)例形式簡單分析了javascript發(fā)布/訂閱模式的概念、原理及簡單使用方法,需要的朋友可以參考下

本文實(shí)例講述了JavaScript事件發(fā)布/訂閱模式原理與用法。分享給大家供大家參考，具體如下：

1、發(fā)布/訂閱模式也是諸多設(shè)計(jì)模式當(dāng)中的一種；

2、這種方式可以在es5下相當(dāng)優(yōu)雅地處理異步操作；

3、什么是發(fā)布/訂閱呢？我們舉個(gè)栗子：

假設(shè)fn1，fn2，fn3都可以視作一個(gè)事件的發(fā)布者，執(zhí)行它，就會發(fā)布一個(gè)事件。這個(gè)時(shí)候，我們可以通過一個(gè)事件的訂閱者去批量訂閱并處理這些事件，包括它們的先后順序。增加一個(gè)消息訂閱者的方法：

class AsyncFunArr {
 constructor (...arr) {
  this.funcArr = [...arr]
 }
 next () {
  const fn = this.funcArr.shift()
  if (typeof fn === 'function') fn()
 }
 run () {
  this.next()
 }
}

4、調(diào)用

//首先將fn1,fn2,fn3訂閱
const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3)
//fn1，fn2，fn3作為分布者分別調(diào)用其next()方法：
function fn1 () {
 console.log('Function 1')
 asyncFunArr.next()
}
function fn2 () {
 setTimeout(() => {
  console.log('Function 2')
  asyncFunArr.next()
 }, 500)
}
function fn3 () {
 console.log('Function 3')
 asyncFunArr.next()
}

5、輸出：

// Function 1
// Function 2
// Function 3

6、總結(jié)：

通過上述方法，可以實(shí)現(xiàn)很多，如異步請求數(shù)據(jù)等。

7、參考資料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論