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

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

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

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

中間件作為一些輔助處理功能，應用非常廣泛，例如express中間件，redux中間件，koa中間件，那么中間件的設計模式到底是怎樣的呢。結合中間件的使用實例探討和總結一下中間件的設計思想和一般實現(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)

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

執(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)

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