JS中間件設(shè)計模式的用法

這篇文章主要講解了JS中間件設(shè)計模式的用法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

網(wǎng)站是企業(yè)的互聯(lián)網(wǎng)名片，是開展互聯(lián)網(wǎng)業(yè)務(wù)基礎(chǔ)平臺。在目標(biāo)明確的基礎(chǔ)上，創(chuàng)新互聯(lián)憑借團隊豐富的設(shè)計經(jīng)驗完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案，自成立以來，一直致力于為企業(yè)提供從域名與空間、網(wǎng)站策劃、網(wǎng)站設(shè)計、品牌網(wǎng)站設(shè)計、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。

中間件作為一些輔助處理功能，應(yīng)用非常廣泛，例如express中間件，redux中間件，koa中間件，那么中間件的設(shè)計模式到底是怎樣的呢。結(jié)合中間件的使用實例探討和總結(jié)一下中間件的設(shè)計思想和一般實現(xiàn)模式。

仿照redux中間件實現(xiàn)模式，看如下一個例子：

function fn2(next){
  console.log('執(zhí)行2，返回改造的next之前')
  return action => {
    console.log('執(zhí)行2')
    next(action)
  }
}
function fn3(next){
  console.log('執(zhí)行3，返回改造的next之前')
  return action => {
    console.log('執(zhí)行3')
    next(action)
  }
}
function fn1(next){
  console.log('執(zhí)行1，返回改造的next之前')
  return action => {
    console.log('執(zhí)行1')
    getData().then( data => {
      next(action)
    })
  }
  
}
 
function getData(){
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(true)
    },3000)
  })
}
const next = (action) => {
  console.log('action',action)
}
// compose([fn1,fn2,fn3])(next)
const mm = [fn1,fn2,fn3].reduce(function(a,b,currentIndex,arr){
  console.log("a",a)
  console.log("b",b)
  return function(...args){
    console.log('args',[...args][0].toString())
    return a(b(...args))
  }
})(next)(1)

運行結(jié)果：這里類似與洋蔥圈模型，但是是先從里向外，再由外向里

執(zhí)行3，返回改造的next之前
args action => {
        console.log('執(zhí)行3')
        next(action)
    }
執(zhí)行2，返回改造的next之前
執(zhí)行1，返回改造的next之前
執(zhí)行1
執(zhí)行2
執(zhí)行3
action 1

接下來對上面的實例進行簡化：

function fn2(action){
  console.log('執(zhí)行2，返回改造的next之前')
  action+2
}
function fn3(action){
  console.log('執(zhí)行3，返回改造的next之前')
  action+1
}
function fn1(action){
  console.log('執(zhí)行1，返回改造的next之前')
  return action+1
  
}
 
function getData(){
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(true)
    },3000)
  })
}
const next = (action) => {
  console.log('action',action)
}
// compose([fn1,fn2,fn3])(next)
const mm = [fn1,fn2,fn3].reduce(function(a,b,currentIndex,arr){
  console.log("a",a)
  console.log("b",b)
  return function(...args){
    console.log('args',[...args])
    return a(b(...args))
  }
})(1)

這時的中間件只是一層處理邏輯，沒有傳遞初始處理邏輯，所以中間件是單一的，運行結(jié)果：

args [ 1 ]
執(zhí)行3，返回改造的next之前
args [ undefined ]
執(zhí)行2，返回改造的next之前
執(zhí)行1，返回改造的next之前

抽離通用邏輯，深入到本質(zhì)，中間件是對最初處理邏輯函數(shù)進行改造，如果沒有，只執(zhí)行自身的邏輯。

1，上面比較單一的就是只有自身邏輯的中間件

2，具有初始處理邏輯函數(shù)next的中間件，需要接受next，返回一個新的next'

看完上述內(nèi)容，是不是對JS中間件設(shè)計模式的用法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：JS中間件設(shè)計模式的用法
文章分享：http://muchs.cn/article12/jogjdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、微信公眾號、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站制作、定制網(wǎng)站、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容