摘要：生成項目后，中的代碼這里調(diào)用了包中導(dǎo)出的函數(shù)這個函數(shù)是瀏覽器平臺的工廠函數(shù)執(zhí)行會返回瀏覽器平臺的實例函數(shù)是通過函數(shù)創(chuàng)建的這個函數(shù)接收個參數(shù)父平臺工廠函數(shù)平臺名稱服務(wù)提供商的數(shù)組顧名思義函數(shù)的作用是創(chuàng)建平臺工廠的函數(shù)在框架被加

cli生成項目后，main.ts中的代碼

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

這里調(diào)用了@angular/platform-browser-dynamic包中導(dǎo)出的platformBrowserDynamic函數(shù),這個函數(shù)是瀏覽器平臺的工廠函數(shù),執(zhí)行會返回瀏覽器平臺的實例

export const platformBrowserDynamic = createPlatformFactory(platformCoreDynamic, "browserDynamic", INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS);

platformBrowserDynamic函數(shù)是通過createPlatformFactory函數(shù)創(chuàng)建的,這個函數(shù)接收3個參數(shù),parentPlatformFactory(父平臺工廠函數(shù)),name(平臺名稱),providers(服務(wù)提供商的數(shù)組)

export function createPlatformFactory(
    parentPlatformFactory: ((extraProviders?: StaticProvider[]) => PlatformRef) | null,
    name: string, providers: StaticProvider[] = []): (extraProviders?: StaticProvider[]) =>
    PlatformRef {
  const desc = `Platform: ${name}`;
  const marker = new InjectionToken(desc);
  return (extraProviders: StaticProvider[] = []) => {
    let platform = getPlatform();
    if (!platform || platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
      if (parentPlatformFactory) {
        parentPlatformFactory(
            providers.concat(extraProviders).concat({provide: marker, useValue: true}));
      } else {
        const injectedProviders: StaticProvider[] =
            providers.concat(extraProviders).concat({provide: marker, useValue: true});
        createPlatform(Injector.create({providers: injectedProviders, name: desc}));
      }
    }
    return assertPlatform(marker);
  };
}

在angular框架被加載后,會執(zhí)行這個函數(shù),并傳入了三個參數(shù)分別為 platformCoreDynamic, "browserDynamic", INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS

看第一個參數(shù)platformCoreDynamic:

export const platformCoreDynamic = createPlatformFactory(platformCore, "coreDynamic", [
    {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
    {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
]);

第一個參數(shù)也是通過createPlatformFactory函數(shù)創(chuàng)建的一個工廠函數(shù),這里執(zhí)行的時候又傳入了三個參數(shù)platformCore,"coreDynamic"和一個提供商數(shù)組

第一個參數(shù)platformCore:

export const platformCore = createPlatformFactory(null, "core", _CORE_PLATFORM_PROVIDERS);

又是通過createPlatformFactory函數(shù)創(chuàng)建的... ,但好在沒有在繼續(xù)傳入父平臺作為參數(shù),所以應(yīng)用初始化時執(zhí)行的第一個函數(shù)就是這個了

這里有點繞,屢一下函數(shù)的執(zhí)行過程:

createPlatformFactory(null, "core", _CORE_PLATFORM_PROVIDERS)執(zhí)行返回platformCore函數(shù)

createPlatformFactory(platformCore, "coreDynamic", [...])執(zhí)行返回platformCoreDynamic函數(shù)

createPlatformFactory(platformCoreDynamic, "browserDynamic", INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS)執(zhí)行返回platformBrowserDynamic函數(shù)

platformBrowserDynamic()執(zhí)行返回平臺實例

要注意到這里創(chuàng)建的都是工廠函數(shù),而不是平臺實例,在angular框架被加載后,就會開始執(zhí)行,此時應(yīng)用還沒有正式啟動

在執(zhí)行platformBrowserDynamic()后,應(yīng)用開始啟動,實例化core平臺(這里的調(diào)用順序就不貼出來了,雖然工廠函數(shù)的調(diào)用順序是platformBrowserDynamic->platformCoreDynamic->platformCore,但是實例化的只有core平臺)

coreDynamic平臺和browserDynamic平臺的工廠函數(shù)并不是創(chuàng)建子平臺的實例,而是添加服務(wù)提供商,被實例化的只有一個平臺實例,只不過會改變PLATFORM_IDtoken的值

core平臺實例化之前,首先創(chuàng)建了應(yīng)用的根注入器

createPlatform(Injector.create({providers: injectedProviders, name: desc}));

在core平臺實例化過程中,又通過子平臺工廠函數(shù)的參數(shù)和區(qū)域變量,傳入了一些服務(wù)提供商,然后將這些提供商統(tǒng)一注冊到了注入器中:

// 這里的變量名是我命名的不是源碼中的名字,用以區(qū)分各個平臺下注冊的提供商
export const browserDynamic_PROVIDERS: StaticProvider[] = [
  {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID},
  {provide: PLATFORM_INITIALIZER, useValue: initDomAdapter, multi: true},
  {provide: PlatformLocation, useClass: BrowserPlatformLocation, deps: [DOCUMENT]},
  {provide: DOCUMENT, useFactory: _document, deps: []},
  {
    provide: COMPILER_OPTIONS,
    useValue: {providers: [{provide: ResourceLoader, useClass: ResourceLoaderImpl, deps: []}]},
    multi: true
  },
  {provide: PLATFORM_ID, useValue: PLATFORM_BROWSER_ID}
];

export const coreDynamic_PROVIDERS: StaticProvider[] = [
  {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
  {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]}
];

export const core_PROVIDERS: StaticProvider[] = [
  // Set a default platform name for platforms that don"t set it explicitly.
  {provide: PLATFORM_ID, useValue: "unknown"},
  {provide: PlatformRef, deps: [Injector]},
  {provide: TestabilityRegistry, deps: []},
  {provide: Console, deps: []},
]

然后進行初始化的操作,包括BrowserDomAdapter(DOM適配器)和BrowserGetTestability

export function createPlatform(injector: Injector): PlatformRef {
  if (_platform && !_platform.destroyed &&
      !_platform.injector.get(ALLOW_MULTIPLE_PLATFORMS, false)) {
    throw new Error(
        "There can be only one platform. Destroy the previous one to create a new one.");
  }
  _platform = injector.get(PlatformRef);
  // 初始化操作 browserDynamic平臺下的PLATFORM_INITIALIZER服務(wù)
  const inits = injector.get(PLATFORM_INITIALIZER, null);
  if (inits) inits.forEach((init: any) => init());
  return _platform;
}

這里初始化操作是通過PLATFORM_INITIALIZERtoken注入,然后遍歷執(zhí)行,所以也可以在應(yīng)用中注入PLATFORM_INITIALIZER,然后執(zhí)行一些啟動時的自定義的任務(wù).

到這里,core平臺的實例化就完成了.

ps:

除了platform-browser-dynamic之外還有platform-browser模塊,這兩個模塊的區(qū)別是編譯方式的不同,platform-browser-dynamic模塊提供jit編譯,也就是說編譯在瀏覽器內(nèi)完成,而platform-browser模塊提供aot編譯,編譯在本地完成.

在代碼層面上來說,platform-browser模塊下core平臺的子平臺只有browser平臺,而platform-browser-dynamic模塊下,core平臺的子平臺包含coreDynamic平臺和browserDynamic平臺,并添加了額外的服務(wù)提供商

  {
    provide: COMPILER_OPTIONS,
    useValue: {providers: [{provide: ResourceLoader, useClass: ResourceLoaderImpl, deps: []}]},
    multi: true
  },
  {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},