本文实例讲述了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)


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
执行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)


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之前
args [ 1 ]
执行3，返回改造的next之前
args [ undefined ]
执行2，返回改造的next之前
执行1，返回改造的next之前抽离通用逻辑，深入到本质，中间件是对最初处理逻辑函数进行改造，如果没有，只执行自身的逻辑。1，上面比较单一的就是只有自身逻辑的中间件上面比较单一的就是只有自身逻辑的中间件上面比较单一的就是只有自身逻辑的中间件2，具有初始处理逻辑函数next的中间件，需要接受next，返回一个新的next'具有初始处理逻辑函数next的中间件，需要接受next，返回一个新的next'具有初始处理逻辑函数next的中间件，需要接受next，返回一个新的next'感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。