快捷導(dǎo)航

JS中間件設(shè)計(jì)模式的深入探討與實(shí)例分析

更新時(shí)間：2020年04月11日 13:56:16 作者：qdmoment

這篇文章主要介紹了JS中間件設(shè)計(jì)模式,結(jié)合實(shí)例形式分析了JS中間件設(shè)計(jì)模式功能、原理、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS中間件設(shè)計(jì)模式。分享給大家供大家參考，具體如下：

中間件作為一些輔助處理功能，應(yīng)用非常廣泛，例如express中間件，redux中間件，koa中間件，那么中間件的設(shè)計(jì)模式到底是怎樣的呢。結(jié)合中間件的使用實(shí)例探討和總結(jié)一下中間件的設(shè)計(jì)思想和一般實(shí)現(xiàn)模式。

仿照redux中間件實(shí)現(xiàn)模式，看如下一個(gè)例子：

function fn2(next){
  console.log('執(zhí)行2，返回改造的next之前')
  return action => {
    console.log('執(zhí)行2')
    next(action)
  }
}
function fn3(next){
  console.log('執(zhí)行3，返回改造的next之前')
  return action => {
    console.log('執(zhí)行3')
    next(action)
  }
}
function fn1(next){
  console.log('執(zhí)行1，返回改造的next之前')
  return action => {
    console.log('執(zhí)行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)

運(yùn)行結(jié)果：這里類(lèi)似與洋蔥圈模型，但是是先從里向外，再由外向里

執(zhí)行3，返回改造的next之前
args action => {
        console.log('執(zhí)行3')
        next(action)
    }
執(zhí)行2，返回改造的next之前
執(zhí)行1，返回改造的next之前
執(zhí)行1
執(zhí)行2
執(zhí)行3
action 1

接下來(lái)對(duì)上面的實(shí)例進(jìn)行簡(jiǎn)化：

function fn2(action){
  console.log('執(zhí)行2，返回改造的next之前')
  action+2
}
function fn3(action){
  console.log('執(zhí)行3，返回改造的next之前')
  action+1
}
function fn1(action){
  console.log('執(zhí)行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)

這時(shí)的中間件只是一層處理邏輯，沒(méi)有傳遞初始處理邏輯，所以中間件是單一的，運(yùn)行結(jié)果：