溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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
執行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)
},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'
看完上述內容，是不是對JS中間件設計模式的用法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
