本文實例講述了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,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)

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

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

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

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程序設計有所幫助。