JS中间件设计模式的用法

发布时间：2020-08-04 11:09:14 作者：小猪
来源：亿速云阅读：272

这篇文章主要讲解了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中间件设计模式的用法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。

JS中间件设计模式的用法

相关阅读