JavaScript中事件發(fā)布/訂閱模式的原理是什么

這篇文章給大家介紹JavaScript中事件發(fā)布/訂閱模式的原理是什么，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

具體如下：

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

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

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

假設(shè)fn1，fn2，fn3都可以視作一個(gè)事件的發(fā)布者，執(zhí)行它，就會(huì)發(fā)布一個(gè)事件。這個(gè)時(shí)候，我們可以通過(guò)一個(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

JavaScript的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫(xiě)HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

關(guān)于JavaScript中事件發(fā)布/訂閱模式的原理是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。