资讯专栏INFORMATION COLUMN

angular源码分析之StaticInjector

zhouzhou / 1673人阅读

摘要:上一篇说到了平台实例在初始化的时候会创建根注入器那现在就一起看看注入器是如何创建的又是如何工作的所有引用的代码都被简化了创建注入器程序初始化时调用的创建根注入器的静态方法调用此方法会返回一个类型的实例也就是注入器类注入器的构造函数在初始化过

上一篇说到了平台实例在初始化的时候会创建根注入器,那现在就一起看看注入器是如何创建的,又是如何工作的.(所有引用的代码都被简化了)

创建注入器

程序初始化时调用的创建根注入器的静态方法:

</>复制代码

  1. abstract class Injector{
  2. static create(options: StaticProvider[]|{providers: StaticProvider[], parent?: Injector, name?: string},parent?: Injector): Injector {
  3. if (Array.isArray(options)) {
  4. return new StaticInjector(options, parent);
  5. } else {
  6. return new StaticInjector(options.providers, options.parent, options.name || null);
  7. }
  8. }

调用此方法会返回一个StaticInjector类型的实例(也就是注入器).

StaticInjector

</>复制代码

  1. export class StaticInjector implements Injector {
  2. readonly parent: Injector;
  3. readonly source: string|null;
  4. private _records: Map;
  5. constructor(providers: StaticProvider[], parent: Injector = NULL_INJECTOR, source: string|null = null) {
  6. this.parent = parent;
  7. this.source = source;
  8. const records = this._records = new Map();
  9. records.set(Injector, {token: Injector, fn: IDENT, deps: EMPTY, value: this, useNew: false});
  10. records.set(INJECTOR, {token: INJECTOR, fn: IDENT, deps: EMPTY, value: this, useNew: false});
  11. recursivelyProcessProviders(records, providers);
  12. }
  13. }

注入器的构造函数在初始化过程中的操作:

设置当前注入器的父注入器

设置注入器的源

新建注册表(_records属性,是一个Map类型)

将参数providers全部添加到注册表中

向注册表中添加服务调用了recursivelyProcessProviders函数

</>复制代码

  1. const EMPTY = [];
  2. const MULTI_PROVIDER_FN = function (): any[] { return Array.prototype.slice.call(arguments) };
  3. function recursivelyProcessProviders(records: Map, provider: StaticProvider) {
  4. if (provider instanceof Array) {
  5. for (let i = 0; i < provider.length; i++) {
  6. recursivelyProcessProviders(records, provider[i]);
  7. }
  8. } else (provider && typeof provider === "object" && provider.provide) {
  9. let token = resolveForwardRef(provider.provide);// 方法`resolveForwardRef`的作用可能是向前兼容,可以忽略
  10. const resolvedProvider = resolveProvider(provider);
  11. if (provider.multi === true) {
  12. let multiProvider: Record | undefined = records.get(token);
  13. if (multiProvider) {
  14. if (multiProvider.fn !== MULTI_PROVIDER_FN) {
  15. throw multiProviderMixError(token);
  16. }
  17. } else {
  18. records.set(token, multiProvider = {
  19. token: provider.provide,
  20. deps: [],
  21. useNew: false, // 这个值在后面获取依赖实例的时候会用到,当做判断条件
  22. fn: MULTI_PROVIDER_FN,
  23. value: EMPTY // 这个值在后面获取依赖实例的时候会用到,当做判断条件
  24. });
  25. }
  26. token = provider;
  27. multiProvider.deps.push({ token, options: OptionFlags.Default });
  28. }
  29. records.set(token, resolvedProvider);
  30. }
  31. }

recursivelyProcessProviders函数具体的执行过程:

如果provider是个数组,那就遍历后依次调用此方法.

如果provider是个对象:

1 获取token

</>复制代码

  1. let token = resolveForwardRef(provider.provide);

2 调用resolveProvider方法处理服务中可能出现的属性和依赖,返回一个Record对象,此对象会作为token的值

</>复制代码

  1. function resolveProvider(provider: SupportedProvider): Record {
  2. const deps = computeDeps(provider);
  3. let fn: Function = function (value) { return value };
  4. let value: any = [];
  5. // useUew用来标识是否需要 new
  6. let useNew: boolean = false;
  7. let provide = resolveForwardRef(provider.provide);
  8. if (USE_VALUE in provider) {
  9. value = provider.useValue;
  10. } else if (provider.useFactory) {
  11. fn = provider.useFactory;
  12. } else if (provider.useExisting) {
  13. //do nothing
  14. } else if (provider.useClass) {
  15. useNew = true;
  16. fn = resolveForwardRef(provider.useClass);
  17. } else if (typeof provide == "function") {
  18. useNew = true;
  19. fn = provide;
  20. } else {
  21. throw staticError("StaticProvider does not have [useValue|useFactory|useExisting|useClass] or [provide] is not newable", provider);
  22. }
  23. return { deps, fn, useNew, value }; // provider中不同的属性会返回包含不同值的对象
  24. }

这个方法会先调用computeDeps函数处理服务需要的依赖,它将useExisting类型的服务也转换成deps,最后返回[{ token, OptionFlags }]形式的数组(OptionFlags是枚举常量)

</>复制代码

  1. function computeDeps(provider: StaticProvider): DependencyRecord[] {
  2. let deps: DependencyRecord[] = EMPTY;
  3. const providerDeps: any[] = provider.deps;
  4. if (providerDeps && providerDeps.length) {
  5. deps = [];
  6. for (let i = 0; i < providerDeps.length; i++) {
  7. let options = OptionFlags.Default;
  8. let token = resolveForwardRef(providerDeps[i]);
  9. deps.push({ token, options });
  10. }
  11. } else if ((provider as ExistingProvider).useExisting) {
  12. const token = resolveForwardRef((provider as ExistingProvider).useExisting);
  13. deps = [{ token, options: OptionFlags.Default }];
  14. }
  15. return deps;
  16. }

resolveProvider函数最终返回的Record对象有一个缺省值:

</>复制代码

  1. {
  2. deps:[], // 包含依赖时 [{ token, options },{ token, options }]
  3. fn:function(value) { return value },
  4. useNew:false,
  5. value:[]
  6. }

执行过程中会根据provider不同的属性修改Record对象的变量为不同的值:

useValue : 修改valueuseValue的值

useFactory : 修改fn为对应的函数

useClasstypeof provide == "function"(令牌为一个函数时) : 修改fn为对应的函数,并设置useNewtrue

useExisting : 不做修改,直接使用默认值

3 如果是多处理服务(multi:ture)且为首次注册,那么在注册表中额外注册一个占位的Record

</>复制代码

  1. records.set(token, multiProvider = {
  2. token: provider.provide,
  3. deps: [],
  4. useNew: false,
  5. fn: MULTI_PROVIDER_FN,
  6. value: EMPTY
  7. });

4 非多处理服务以token为键,多处理服务以provider对象为键,返回的Record对象为值,存入注册表records

从注入器中获取实例

服务注册完,下一步就是怎么从注入器中获取服务的实例了,这会调用StaticInjectorget方法

</>复制代码

  1. export class StaticInjector implements Injector {
  2. get(token: any, notFoundValue?: any, flags: InjectFlags = InjectFlags.Default): any {
  3. // 获取token对应的record
  4. const record = this._records.get(token);
  5. return resolveToken(token, record, this._records, this.parent, notFoundValue, flags);
  6. }

get方法调用了resolveToken函数,这个函数会返回token对应的实例(就是被注入的对象)

</>复制代码

  1. const EMPTY = [];
  2. const CIRCULAR = IDENT;
  3. const IDENT = function (value: T): T { return value };
  4. function resolveToken(token: any, record: Record | undefined, records: Map, parent: Injector,
  5. notFoundValue: any, flags: InjectFlags): any {
  6. let value;
  7. if (record && !(flags & InjectFlags.SkipSelf)) {
  8. value = record.value;
  9. if (value == CIRCULAR) {
  10. throw Error(NO_NEW_LINE + "Circular dependency");
  11. } else if (value === EMPTY) {
  12. record.value = CIRCULAR;
  13. let obj = undefined;
  14. let useNew = record.useNew;
  15. let fn = record.fn;
  16. let depRecords = record.deps;
  17. let deps = EMPTY;
  18. if (depRecords.length) {
  19. deps = [];
  20. for (let i = 0; i < depRecords.length; i++) {
  21. const depRecord: DependencyRecord = depRecords[i];
  22. const options = depRecord.options;
  23. const childRecord = options & OptionFlags.CheckSelf ? records.get(depRecord.token) : undefined;
  24. deps.push(tryResolveToken(
  25. depRecord.token,
  26. childRecord,
  27. records,
  28. !childRecord && !(options & OptionFlags.CheckParent) ? NULL_INJECTOR : parent,
  29. options & OptionFlags.Optional ? null : Injector.THROW_IF_NOT_FOUND,
  30. InjectFlags.Default));
  31. }
  32. }
  33. record.value = value = useNew ? new (fn as any)(...deps) : fn.apply(obj, deps);
  34. }
  35. } else if (!(flags & InjectFlags.Self)) {
  36. value = parent.get(token, notFoundValue, InjectFlags.Default);
  37. }
  38. return value;
  39. }

函数中会先判断当前请求的token是否存在,如果不存在则去当前注入器的父注入器中寻找,如果存在:

获取token对应的record

判断record.value是否为[](非useValue类型的服务/多处理服务的默认值是[]):

ture : 非useValue类型的服务/多处理服务或此服务没有被创建过

查看是否包含依赖,包含则优先创建依赖的实例,也是调用这个函数

根据record.fn创建当前token对应的实例并更新record.value(这里需要根据record.useNew来判断是否需要用new来实例化,比如useFactory类型就不需要new,而useExisting更是直接返回了deps)

返回这个值

false : useValue类型的服务或此服务已经被创建过

直接返回这个值

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100059.html

相关文章

  • Angular 5.0 来了! 有这些大变化

    摘要:以下简单介绍的重大变化。状态转交及对的支持这样更便于在服务端和客户之间共享应用状态。状态转交的相关文档几周后会发布。我们删除很多以前废弃的如,也公布了一些新的废弃项。以上指南会详细介绍这些变更。已知问题当前已知与相关的问题。 我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦!这又是一个主版本,包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、...

    张红新 评论0 收藏0
  • Angular 5.0 来了! 有这些大变化

    摘要:以下简单介绍的重大变化。状态转交及对的支持这样更便于在服务端和客户之间共享应用状态。状态转交的相关文档几周后会发布。我们删除很多以前废弃的如,也公布了一些新的废弃项。以上指南会详细介绍这些变更。已知问题当前已知与相关的问题。 我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦!这又是一个主版本,包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、...

    DobbyKim 评论0 收藏0
  • @angular/router 源码分析注册路由

    摘要:模块主要解决程序路由状态改变和懒加载模块问题。本文主要解释程序启动后,是如何注册开发者定义的路由集合的,和实例化对象的。第六个重要的对象就是,提供了初始导航功能。 @angular/router 模块主要解决程序路由状态改变和懒加载模块问题。 比如,程序从路由状态 state1: /advisors/1/households/1 转变为路由状态 state2: /advisors/1/...

    hidogs 评论0 收藏0
  • 源码分析 @angular/cdk Portal

    摘要:这些依赖对象也进一步暴露了其设计思想。关键功能包括在上下文内挂载在上下文外挂载在上下文外共享数据。在构造必须依赖,所以可以直接创建嵌入视图,然后手动强制执行变更检测。提供了两个指令和。 @angular/material 是 Angular 官方根据 Material Design 设计语言提供的 UI 库,开发人员在开发 UI 库时发现很多 UI 组件有着共同的逻辑,所以他们把这些共...

    BearyChat 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<