中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS中間件設計模式的用法

發布時間:2020-08-04 11:09:14 來源:億速云 閱讀:268 作者:小豬 欄目:web開發

這篇文章主要講解了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中間件設計模式的用法有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

吉林省| 阜康市| 兰考县| 英吉沙县| 济源市| 昭觉县| 大关县| 铜梁县| 营山县| 增城市| 新兴县| 仙游县| 游戏| 桂平市| 古田县| 阿坝| 肥西县| 沂南县| 吴桥县| 遂宁市| 临夏县| 福建省| 朝阳市| 永定县| 固始县| 全州县| 临颍县| 菏泽市| 兴城市| 唐海县| 涿鹿县| 铁岭市| 北辰区| 昭平县| 蚌埠市| 泽州县| 武鸣县| 万全县| 巫溪县| 武邑县| 保康县|