日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
淺析洋蔥模型

 [[407985]]

前言

使用過koa的小伙伴們都應(yīng)該對洋蔥模型有所了解，koa的獨特的中間件流程控制就是通過洋蔥模型來實現(xiàn)的，那么洋蔥模型是什么，又是如何實現(xiàn)的呢?

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)贛榆免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

洋蔥模型介紹

介紹

上圖是洋蔥模型比較經(jīng)典的一個圖，通過這個圖可以看到，洋蔥模型就像一個洋蔥一個，是分成多層的，而一個請求進(jìn)入的時候，會從外到內(nèi)依次經(jīng)過每一層，到最內(nèi)側(cè)之后又從內(nèi)到外依次經(jīng)過每一次，而我們就可以在這每一層上面做自己需要做的操作。

比如一個請求，在koa接收到請求的時候，首先需要鑒權(quán)，然后需要對請求參數(shù)解析等等，完成請求之后，需要處理異常，添加請求頭等等操作，而這些操作就可以放到洋蔥模型的每一層上面做處理。

示例代碼

如下代碼為koa的一段示例代碼:

 
 
 
 
      
  
  
  
  1. const Koa = require('koa'); 
    2.   
  
  
  
  2. const app = new Koa(); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. app.use(async (ctx, next) => { 
    5.   
  
  
  
  5.   console.log(1); 
    6.   
  
  
  
  6.   await next(); 
    7.   
  
  
  
  7.   console.log(2); 
    8.   
  
  
  
  8. }); 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. app.use(async (ctx, next) => { 
    11.   
  
  
  
  11.   console.log(3); 
    12.   
  
  
  
  12.   await next(); 
    13.   
  
  
  
  13.   console.log(4); 
    14.   
  
  
  
  14. }); 
    15.   
  
  
  
  15. app.use(async (ctx, next) => { 
    16.   
  
  
  
  16.   console.log(5); 
    17.   
  
  
  
  17.   await next(); 
    18.   
  
  
  
  18.   console.log(6); 
    19.   
  
  
  
  19. }); 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. app.listen(8000); 
    22.

執(zhí)行上面的代碼，會發(fā)現(xiàn)輸出的數(shù)字順序為1,3,5,6,4,2，與上面介紹的洋蔥模型的執(zhí)行順序是一致的。

洋蔥模型實現(xiàn)

首先我們先分析一下上面的代碼app.use傳入了一個異步的函數(shù)，而且app.use可以被使用多次，而這些函數(shù)在請求進(jìn)入的時候會依次被調(diào)用，這是不是與發(fā)布訂閱者模式是一致的，那首先我們來實現(xiàn)一個app.use

實現(xiàn)一個app.use

 
 
 
 
      
  
  
  
  1. export interface Middleware { 
    2.   
  
  
  
  2.   (...rest: any): Promise; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. export default class Onion { 
    6.   
  
  
  
  6.   middlewares: Middleware[] = []; 
    7.   
  
  
  
  7.   constructor(middlewares: Middleware[] = []) { 
    8.   
  
  
  
  8.     this.middlewares = middlewares; 
    9.   
  
  
  
  9.   } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   use(middleware: Middleware) { 
    12.   
  
  
  
  12.     this.middlewares.push(middleware); 
    13.   
  
  
  
  13.   } 
    14.   
  
  
  
  14. } 
    15.

上面代碼我們定義了一個Onion類，通過這個類我們就可以將訂閱函數(shù)進(jìn)行收集，如下代碼所示

 
 
 
 
      
  
  
  
  1. const onion = new Onion() 
    2.   
  
  
  
  2. onion.use(async(params, next)=> { 
    3.   
  
  
  
  3.    console.log(1) 
    4.   
  
  
  
  4.    await next() 
    5.   
  
  
  
  5.    console.log(2) 
    6.   
  
  
  
  6. }) 
    7.

發(fā)布者在收集完訂閱函數(shù)后需要有觸發(fā)的時機(jī)，這時候就需要再給Onion添加一個執(zhí)行函數(shù)

完善Onion

有小伙伴想到發(fā)布訂閱者的實現(xiàn)代碼，可能就會想到這樣做:

 
 
 
 
      
  
  
  
  1. export default class Onion { 
    2.   
  
  
  
  2.   middlewares: Middleware[] = []; 
    3.   
  
  
  
  3.   constructor(middlewares: Middleware[] = []) { 
    4.   
  
  
  
  4.     this.middlewares = middlewares; 
    5.   
  
  
  
  5.   } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.   use(middleware: Middleware) { 
    8.   
  
  
  
  8.     this.middlewares.push(middleware); 
    9.   
  
  
  
  9.   } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   execute(params: any) { 
    12.   
  
  
  
  12.     this.middlewares.forEach(fn => { 
    13.   
  
  
  
  13.           fn(params) 
    14.   
  
  
  
  14.        }) 
    15.   
  
  
  
  15.   } 
    16.   
  
  
  
  16. } 
    17.

但是這樣做的話，就無法滿足洋蔥模型的先入后出的順序，那我們應(yīng)該怎么做呢?

1.定義 compose函數(shù)

 
 
 
 
      
  
  
  
  1. function compose(middlewares: Array) { 
    2.   
  
  
  
  2. if (!Array.isArray(middlewares)) { 
    3.   
  
  
  
  3.  throw new Error('中間件必須是數(shù)組'); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5. for (let i = 0; i < middlewares.length; i++) { 
    6.   
  
  
  
  6.  if (typeof middlewares[i] !== 'function') { 
    7.   
  
  
  
  7.    throw new Error('中間件的每一項都必須是函數(shù)'); 
    8.   
  
  
  
  8.  } 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. return (params: any) => { 
    12.   
  
  
  
  12.  let index = 0; 
    13.   
  
  
  
  13.  function dispatch(fn: Middleware | undefined) { 
    14.   
  
  
  
  14.    if (!fn) { 
    15.   
  
  
  
  15.      return Promise.resolve(); 
    16.   
  
  
  
  16.    } 
    17.   
  
  
  
  17.    const next = () => dispatch(middlewares[++index]); 
    18.   
  
  
  
  18.    return Promise.resolve(fn(params, next)); 
    19.   
  
  
  
  19.  } 
    20.   
  
  
  
  20.  return dispatch(middlewares[index]); 
    21.   
  
  
  
  21. }; 
    22.   
  
  
  
  22. } 
    23.

2.實現(xiàn)execute

 
 
 
 
      
  
  
  
  1. export default class Onion { 
    2.   
  
  
  
  2. middlewares: Middleware[] = []; 
    3.   
  
  
  
  3. constructor(middlewares: Middleware[] = []) { 
    4.   
  
  
  
  4.  this.middlewares = middlewares; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. use(middleware: Middleware) { 
    8.   
  
  
  
  8.  this.middlewares.push(middleware); 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. execute(params: any) { 
    12.   
  
  
  
  12.  const fn = compose(this.middlewares); 
    13.   
  
  
  
  13.  return fn(params); 
    14.   
  
  
  
  14. } 
    15.   
  
  
  
  15. } 
    16.

通過定義componse函數(shù)，可以將中間件函數(shù)依次按照順序來執(zhí)行。

 
 
 
 
      
  
  
  
  1. const onion = new Onion(); 
    2.   
  
  
  
  2. onion.use(async (params: any, next: Middleware) => { 
    3.   
  
  
  
  3.  console.log(1); 
    4.   
  
  
  
  4.  await next(); 
    5.   
  
  
  
  5.  console.log(2); 
    6.   
  
  
  
  6. }); 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. onion.use(async (params: any, next: Middleware) => { 
    9.   
  
  
  
  9.  console.log(3); 
    10.   
  
  
  
  10.  await next(); 
    11.   
  
  
  
  11.  console.log(4); 
    12.   
  
  
  
  12. }); 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. onion.use(async (params: any, next: Middleware) => { 
    15.   
  
  
  
  15.  console.log(5); 
    16.   
  
  
  
  16.  await next(); 
    17.   
  
  
  
  17.  console.log(6); 
    18.   
  
  
  
  18. }); 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20. onion.execute({}); 
    21.

這樣我們就實現(xiàn)了一個簡易版的洋蔥模型。

本文轉(zhuǎn)載自微信公眾號「前端有的玩」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端有的玩公眾號。


網(wǎng)站題目：淺析洋蔥模型
網(wǎng)頁路徑：http://www.5511xx.com/article/dpeghcp.html