[[416082]]

不知道你有沒有在某處見過 xxProvider，Provider 并不是 23 種經(jīng)典設(shè)計(jì)模式之一，但是卻應(yīng)用特別多，可以算是一種比較新的模式。

• Angular2 中提供了創(chuàng)建對(duì)象的時(shí)候基于 Provider
• VSCode 插件中有各種 registerXxxProvider 的 api
• React 提供了 Provider 組件用于 context 數(shù)據(jù)的傳遞

還有很多別的地方也經(jīng)常會(huì)見到 Provider 的概念，那么 Provider 究竟是什么呢?

本文就來回答下這幾個(gè)問題：

• provider 是什么
• provider 創(chuàng)建對(duì)象和 factory 有什么區(qū)別
• provider 的具體應(yīng)用

provider 是什么

provider 是提供者，從名字上和設(shè)計(jì)模式中創(chuàng)建對(duì)象的那些模式很像，比如工廠方法模式，但其實(shí)兩者是有區(qū)別的。

工廠方法模式是用于創(chuàng)建不同的產(chǎn)品，通過繼承的方式。

但有的時(shí)候創(chuàng)建的對(duì)象可能有別的來源，比如從別的地方獲取的一個(gè)值，或者已經(jīng)創(chuàng)建好的對(duì)象。這時(shí)候來源就不只有工廠了。

也就是說這時(shí)候要?jiǎng)?chuàng)建的對(duì)象有多種策略，工廠只是其中一種，策略 + 工廠/其他方式就是 Provider。

provider 被微軟引入到了 .net 2.0，而且微軟其他的一些技術(shù)產(chǎn)品也隨處可以見 provider，比如 VSCode 的 xxxProvider、angular2 的 providers。

我們來看一些具體的應(yīng)用。

provider 的具體應(yīng)用

VSCode 插件的 provider 系列 api

VSCode 插件中最常見的 api 就是 registerXxxProvider，通過該 api 注冊(cè)的 Provider 就是實(shí)現(xiàn)了 provideXxx 的對(duì)象。

比如智能補(bǔ)全就是注冊(cè)一個(gè) CompletionProvider，然后根據(jù) document 的內(nèi)容，返回具體的 CompletionItem 的對(duì)象。

因?yàn)?VSCode 并不關(guān)心 CompletionItem 是怎么創(chuàng)建出來的，只知道通過這個(gè) provider 可以拿到需要的 completion 數(shù)據(jù)，所以設(shè)計(jì)了 provider 的 api。

const provider = vscode.languages.registerCompletionItemProvider( 
        'plaintext', 
        { 
                provideCompletionItems(document: vscode.TextDocument, position: vscode.Position) { 
                        return [ 
                                new vscode.CompletionItem('log', vscode.CompletionItemKind.Method), 
                                new vscode.CompletionItem('warn', vscode.CompletionItemKind.Method), 
                                new vscode.CompletionItem('error', vscode.CompletionItemKind.Method), 
                        ]; 
                } 
        }, 
        '.' 
); 
 
context.subscriptions.push(provider); 

React 中的 context 的 Provider

react 組件樹可以在父組件放一些數(shù)據(jù)到 context 中，然后子組件取出來用，也是通過 provider 的方式。

父組件的作為 Provider 需要實(shí)現(xiàn) getChildContext 方法，返回具體的對(duì)象。就像上面的 provideXxx 一樣，react 并不關(guān)心這個(gè)對(duì)象是怎么來的。

父組件里提供 getChildContext 提供數(shù)據(jù)

class Ancestor extends React.Component { 
  getChildContext() { 
    return { value1: "context1", value2: "context2" }; 
  } 
  render() { 
    return <Parent />; 
  } 
} 
 
class Parent extends React.Component { 
  render() { 
    return <Child /> 
  } 
} 

子組件里拿出來

class Child extends React.Component { 
  render() { 
    console.log(this.context.value1); 
  } 
} 

當(dāng)然，react 對(duì)上面的流程進(jìn)行了封裝，提供了 React.createContext 的 api 和 Provider、Consumer 組件。

const Context = React.createContext(); 
 
class Child extends React.Component { 
  render() { 
    return ( 
      <Context.Consumer> 
        {({ value1 }) => { 
          console.log(value1); 
        }} 
      </Context.Consumer> 
    ); 
  } 
} 
 
class Parent extends React.Component { 
  render() { 
    return <Child /> 
  } 
} 
 
class Ancestor extends React.Component { 
  render() { 
    return ( 
      <Context.Provider value={{ 
        value1: "context1" 
      }}> 
        <Parent /> 
      </Context.Provider> 
    ); 
  } 
} 

這里也是 provider 的思想。

Angular2 的 providers

angular 最大的特點(diǎn)就是實(shí)現(xiàn)了 ioc，也就是在容器內(nèi)的對(duì)象，可以聲明依賴對(duì)象，然后用到的時(shí)候會(huì)自動(dòng)注入。這個(gè)對(duì)象的創(chuàng)建方式也是 provider 的形式。

我們知道，provider 并不關(guān)心具體對(duì)象是怎么創(chuàng)建的，可以動(dòng)態(tài)切換多種創(chuàng)建策略，而 angular2 就提供了 4種策略：Class、Factory、Value、Exsiting

直接值：

@NgModule({ 
  providers: [ 
       { provide: 'ggg', useValue: 'guang' } 
  ] 
}) 
export class MainModule { } 

已有的：

@NgModule({ 
  providers: [ 
      { provide: 'ggg', useExisting: Guang } 
  ] 
}) 
export class MainModule { } 

類:

@Injectable() 
export class Guang { 
   constructor(public name: string) { 
   } 
} 
@NgModule({ 
  providers: [ 
       { provide: 'ggg', useClass: Guang} 
  ] 
}) 
export class MainModule { } 

工廠：

function guangFactory() { 
  return () => { name: 'guang' }; 
} 
 
@NgModule({ 
  providers: [ 
       { provide: 'ggg', useFacotry: guangFactory } 
  ] 
}) 
export class MainModule { } 

可以看到，angular 提供的 provider 具體的創(chuàng)建策略有好多種，工廠只是其中一種方式，這是 provider 和工廠的區(qū)別。

總結(jié)

provider 是一種創(chuàng)建對(duì)象的模式，但是和工廠不同，它是有不同的創(chuàng)建策略的，算是一種復(fù)合模式，工廠只是其中一種策略，這種模式在 Angular 的 ioc 創(chuàng)建對(duì)象的時(shí)候、VSCode 插件注冊(cè)各種處理函數(shù)的時(shí)候都有大量應(yīng)用，還有 React 也基于 Provider 做 context 的傳遞。

Provider 是各種框架中頻繁出現(xiàn)的一個(gè)概念，掌握 provider 的思想，對(duì)于理解框架還有我們?cè)O(shè)計(jì)代碼架構(gòu)都會(huì)有幫助。希望本文能夠幫大家理解 Provider。