文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

前端代码常见的 Provider 究竟是什么

2024-12-02 23:40

关注

不知道你有没有在某处见过 xxProvider,Provider 并不是 23 种经典设计模式之一,但是却应用特别多,可以算是一种比较新的模式。

还有很多别的地方也经常会见到 Provider 的概念,那么 Provider 究竟是什么呢?

本文就来回答下这几个问题:

provider 是什么

provider 是提供者,从名字上和设计模式中创建对象的那些模式很像,比如工厂方法模式,但其实两者是有区别的。

工厂方法模式是用于创建不同的产品,通过继承的方式。

但有的时候创建的对象可能有别的来源,比如从别的地方获取的一个值,或者已经创建好的对象。这时候来源就不只有工厂了。

也就是说这时候要创建的对象有多种策略,工厂只是其中一种,策略 + 工厂/其他方式就是 Provider。

provider 被微软引入到了 .net 2.0,而且微软其他的一些技术产品也随处可以见 provider,比如 VSCode 的 xxxProvider、angular2 的 providers。

我们来看一些具体的应用。

provider 的具体应用

VSCode 插件的 provider 系列 api

VSCode 插件中最常见的 api 就是 registerXxxProvider,通过该 api 注册的 Provider 就是实现了 provideXxx 的对象。

比如智能补全就是注册一个 CompletionProvider,然后根据 document 的内容,返回具体的 CompletionItem 的对象。

因为 VSCode 并不关心 CompletionItem 是怎么创建出来的,只知道通过这个 provider 可以拿到需要的 completion 数据,所以设计了 provider 的 api。

  1. const provider = vscode.languages.registerCompletionItemProvider( 
  2.         'plaintext'
  3.         { 
  4.                 provideCompletionItems(document: vscode.TextDocument, position: vscode.Position) { 
  5.                         return [ 
  6.                                 new vscode.CompletionItem('log', vscode.CompletionItemKind.Method), 
  7.                                 new vscode.CompletionItem('warn', vscode.CompletionItemKind.Method), 
  8.                                 new vscode.CompletionItem('error', vscode.CompletionItemKind.Method), 
  9.                         ]; 
  10.                 } 
  11.         }, 
  12.         '.' 
  13. ); 
  14.  
  15. context.subscriptions.push(provider); 

React 中的 context 的 Provider

react 组件树可以在父组件放一些数据到 context 中,然后子组件取出来用,也是通过 provider 的方式。

父组件的作为 Provider 需要实现 getChildContext 方法,返回具体的对象。就像上面的 provideXxx 一样,react 并不关心这个对象是怎么来的。

父组件里提供 getChildContext 提供数据

  1. class Ancestor extends React.Component { 
  2.   getChildContext() { 
  3.     return { value1: "context1", value2: "context2" }; 
  4.   } 
  5.   render() { 
  6.     return 
  7.   } 
  8.  
  9. class Parent extends React.Component { 
  10.   render() { 
  11.     return  
  12.   } 

子组件里拿出来

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

当然,react 对上面的流程进行了封装,提供了 React.createContext 的 api 和 Provider、Consumer 组件。

  1. const Context = React.createContext(); 
  2.  
  3. class Child extends React.Component { 
  4.   render() { 
  5.     return ( 
  6.        
  7.         {({ value1 }) => { 
  8.           console.log(value1); 
  9.         }} 
  10.        
  11.     ); 
  12.   } 
  13.  
  14. class Parent extends React.Component { 
  15.   render() { 
  16.     return  
  17.   } 
  18.  
  19. class Ancestor extends React.Component { 
  20.   render() { 
  21.     return ( 
  22.       
  23.         value1: "context1" 
  24.       }}> 
  25.          
  26.        
  27.     ); 
  28.   } 

这里也是 provider 的思想。

Angular2 的 providers

angular 最大的特点就是实现了 ioc,也就是在容器内的对象,可以声明依赖对象,然后用到的时候会自动注入。这个对象的创建方式也是 provider 的形式。

我们知道,provider 并不关心具体对象是怎么创建的,可以动态切换多种创建策略,而 angular2 就提供了 4种策略:Class、Factory、Value、Exsiting

直接值:

  1. @NgModule({ 
  2.   providers: [ 
  3.        { provide: 'ggg', useValue: 'guang' } 
  4.   ] 
  5. }) 
  6. export class MainModule { } 

已有的:

  1. @NgModule({ 
  2.   providers: [ 
  3.       { provide: 'ggg', useExisting: Guang } 
  4.   ] 
  5. }) 
  6. export class MainModule { } 

类:

  1. @Injectable() 
  2. export class Guang { 
  3.    constructor(public name: string) { 
  4.    } 
  5. @NgModule({ 
  6.   providers: [ 
  7.        { provide: 'ggg', useClass: Guang} 
  8.   ] 
  9. }) 
  10. export class MainModule { } 

工厂:

  1. function guangFactory() { 
  2.   return () => { name'guang' }; 
  3.  
  4. @NgModule({ 
  5.   providers: [ 
  6.        { provide: 'ggg', useFacotry: guangFactory } 
  7.   ] 
  8. }) 
  9. export class MainModule { } 

可以看到,angular 提供的 provider 具体的创建策略有好多种,工厂只是其中一种方式,这是 provider 和工厂的区别。

总结

provider 是一种创建对象的模式,但是和工厂不同,它是有不同的创建策略的,算是一种复合模式,工厂只是其中一种策略,这种模式在 Angular 的 ioc 创建对象的时候、VSCode 插件注册各种处理函数的时候都有大量应用,还有 React 也基于 Provider 做 context 的传递。

Provider 是各种框架中频繁出现的一个概念,掌握 provider 的思想,对于理解框架还有我们设计代码架构都会有帮助。希望本文能够帮大家理解 Provider。

 

来源:神光的编程秘籍内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯