绵阳梓潼网站制作公司

JS中间件设计模式的用法

这篇文章主要讲解了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中间件设计模式的用法
分享网址：http://myzitong.com/article/jogjdc.html

其他资讯