前端代码经常见到的Provider是什么

更新日期: 2021-08-08阅读: 1.2k标签: 代码

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

  • angular2 中提供了创建对象的时候基于 Provider
  • VSCode 插件中有各种 registerXxxProvider 的 api
  • react 提供了 Provider 组件用于 context 数据的传递

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

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

  • provider 是什么
  • provider 创建对象和 factory 有什么区别
  • 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。

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 组件树可以在父组件放一些数据到 context 中,然后子组件取出来用,也是通过 provider 的方式。

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

父组件里提供 getChildContext 提供数据

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);
  }
}
复制代码

当然,react 对上面的流程进行了封装,提供了 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 最大的特点就是实现了 ioc,也就是在容器内的对象,可以声明依赖对象,然后用到的时候会自动注入。这个对象的创建方式也是 provider 的形式。

我们知道,provider 并不关心具体对象是怎么创建的,可以动态切换多种创建策略,而 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 具体的创建策略有好多种,工厂只是其中一种方式,这是 provider 和工厂的区别。

总结

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

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

作者:zxg_神说要有光
链接:https://juejin.cn/post/6993837545461121038
来源:掘金

链接: https://fly63.com/article/detial/10619

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!