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

中介軟體作為一些輔助處理功能，應用非常廣泛，例如express中介軟體，redux中介軟體，koa中介軟體，那麼中介軟體的設計模式到底是怎樣的呢。結合中介軟體的使用例項探討和總結一下中介軟體的設計思想和一般實現模式。

仿照redux中介軟體實現模式，看如下一個例子：

function fn2(next){
  console.log('執行2，返回改造的next之前')
  return action => {
    console.log('執行2')
    next(action)
  }
}
function fn3(next){
  console.log('執行3，返回改造的next之前')
  return action => {
    console.log('執行3')
    next(action)
  }
}
function fn1(next){
  console.log('執行1，返回改造的next之前')
  return action => {
    console.log('執行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,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)

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

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

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

function fn2(action){
  console.log('執行2，返回改造的next之前')
  action+2
}
function fn3(action){
  console.log('執行3，返回改造的next之前')
  action+1
}
function fn1(action){
  console.log('執行1，返回改造的next之前')
  return action+1
  
}
 
function getData(){
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(true)
    },[...args])
    return a(b(...args))
  }
})(1)

這時的中介軟體只是一層處理邏輯，沒有傳遞初始處理邏輯，所以中介軟體是單一的，執行結果：

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

抽離通用邏輯，深入到本質，中介軟體是對最初處理邏輯函式進行改造，如果沒有，只執行自身的邏輯。

1，上面比較單一的就是隻有自身邏輯的中介軟體

2，具有初始處理邏輯函式next的中介軟體，需要接受next，返回一個新的next'

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。