快捷導(dǎo)航

JS中間件設(shè)計模式的深入探討與實例分析

更新時間：2020年04月11日 13:56:16 作者：qdmoment

這篇文章主要介紹了JS中間件設(shè)計模式,結(jié)合實例形式分析了JS中間件設(shè)計模式功能、原理、應(yīng)用場景及相關(guān)操作注意事項,需要的朋友可以參考下

本文實例講述了JS中間件設(shè)計模式。分享給大家供大家參考，具體如下：

中間件作為一些輔助處理功能，應(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é)果：