前端代码中常见的Provider是什么？Angular2提供了基于ProviderVSCode插件的api，在创建对象时有各种registerXxxProvider。React为上下文数据传输提供了Provider组件。Provider的概念还有很多地方经常看到。那么究竟什么是Provider呢？?本文将回答以下问题：什么是提供者？创建对象和工厂有什么区别？提供者的具体应用是什么？什么是供应商？工厂方法模式，其实两者是有区别的。工厂方法模式用于通过继承的方式创建不同的产品。但有时创建的对象可能有其他来源，比如从其他地方获取的值，或者已经创建的对象。这时候，源头就不仅仅是工厂了。也就是说此时要创建的对象有多种策略，工厂只是其中一种。策略+工厂/其他方法就是Providers。provider是微软在.net2.0引入的，在微软的其他一些技术产品中随处可见provider的身影，比如VSCode的xxxProvider，angular2的providers。让我们看一些具体的应用。Provider的具体应用VSCode插件的provider系列apiVSCode插件中最常见的api是registerXxxProvider，通过这个api注册的Provider是一个实现了provideXxx的对象。比如智能补全就是注册一个CompletionProvider，然后根据文档的内容返回一个具体的CompletionItem对象。因为VSCode并不关心CompletionItem是如何创建的，它只知道需要的补全数据可以通过这个provider获取，所以设计了provider的api。constprovider=vscode.languages.registerCompletionItemProvider('plaintext',{provideCompletionItems(document:vscode.TextDocument,position:vscode.Position){return[newvscode.CompletionItem('log',vscode.CompletionItemKind.Method),newvscode.CompletionItem('warn',vscode.CompletionItemKind.Method),newvscode.CompletionItem('error',vscode.CompletionItemKind.Method),];}},'.');context.subscriptions.push(provider);React中context的ProviderReact组件树可以把一些数据放到父组件中的context中，然后再取出来供子组件使用，也是通过provider。作为Provider的父组件需要实现getChildContext方法返回一个具体的对象。就像上面的provideXxx一样，react并不关心这个对象是怎么来的。在父组件中提供getChildContext提供数据{return}}子组件classChildextendsReact.Component{render(){console.log(this.context.value1);}}当然react封装了上面的过程，提供了React.createContextAPI和Provider、Consumer组件。constContext=React.createContext();classChildextendsReact.Component{render(){return({({value1})=>{console.log(value1);}});}}classParentextendsReact.Component{render(){return}}classAncestoreextendsReact.Component{render(){return();}}这也是provider的思路。Angular2的providers最大的特点就是实现了ioc，即容器中的对象可以声明依赖对象，然后在使用时自动注入。这个对象的创建方式也是provider的形式。我们知道provider并不关心具体对象是如何创建的，可以动态切换多种创建策略，而angular2提供了4种策略：Class,Factory,Value,Exsitingdirectvalue:@NgModule({providers:[{provide:'ggg',useValue:'guang'}]})exportclassMainModule{}存在：@NgModule({providers:[{provide:'ggg',useExisting:Guang}]})exportclassMainModule{}类：@Injectable()exportclassGuang{constructor(publicname:string){}}@NgModule({providers:[{provide:'ggg',useClass:Guang}]})exportclassMainModule{}factory:functionguangFactory(){return()=>{name:'guang'};}@NgModule({providers:[{provide:'ggg',useFacotry:guangFactory}]})exportclassMainModule{}可以看到angular提供的provider有很多具体的创建策略，工厂只是其中之一这样一来，这就是provider和factory的区别。总结一下，provider是一种创建对象的模式，但是和factory不同的是，它有不同的创建策略。它是一种复合模式，工厂只是其中一种策略。这种模式在Angular的ioc创建对象的时候用到，VSCode插件注册各种处理函数的时候应用很多，React也是基于Provider传递上下文的。Provider是一个在各种框架中频繁出现的概念。掌握provider的思想，对于理解框架和设计代码结构会有帮助。希望这篇文章能帮助大家了解Provider。
