[angularjs之我见] AngularJs 的DI实现

最新推荐文章于 2023-10-01 23:34:40 发布

最新推荐文章于 2023-10-01 23:34:40 发布 · 185 阅读

angularjs之我见专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了AngularJS中依赖注入的工作原理，包括provider和instance的缓存机制、配置流程及模块加载过程。通过具体步骤解释了如何通过$provide向providerCache注册provider，以及如何在config阶段对provider进行配置。

系统执行过程：
1.创建Module
2.注册Provider
3.配置Provider
4.RUN


一、providerCache 用来存储 [provider结构]

预先存储
1.$provide
providerCache.$provide =  {
    provider: supportObject(provider),
    factory: supportObject(factory),
    service: supportObject(service),
    value: supportObject(value),
    constant: supportObject(constant),
    decorator: decorator
}


2.$injector： providerCache.$injector = providerInjector =  createInternalInjector() = {
    invoke: invoke,
    instantiate: instantiate,
    get: getService,
    annotate: createInjector.$$annotate,
    has: function (name) {
        return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);
    }
}

3. 通过$provide.provider向providerCache注册其他的provider
    function provider(name, provider_) {
        assertNotHasOwnProperty(name, 'service');
        if (isFunction(provider_) || isArray(provider_)) {
            provider_ = providerInjector.instantiate(provider_);
        }
        if (!provider_.$get) {
            throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name);
        }
        return providerCache[name + providerSuffix] = provider_;
    }

整个注册过程：
1. setupModuleLoader得到Module
2. 通过Module的provider()方法开始注册provider
3. 将provider预先放到invokeQueue中，包含：
    [provider=>'$provide', method=>'provider(),service(),factory()',
        arguments=>'recipeName, factoryFunction'
    ]
4. runInvokeQueue 来执行 invokeQueue
    function runInvokeQueue(queue) {
        var i, ii;
        for (i = 0, ii = queue.length; i < ii; i++) {
            var invokeArgs = queue[i],
                provider = providerInjector.get(invokeArgs[0]);

            provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
        }
    }

5.通过providerInjector的getService('$provide')获取 $provide

6.$provide的provider()将provider放入providerCache

二、整个配置运行过程

1.setupModuleLoader得到Module
2.通过Module的config()方法开始配置
3.将配置模块预先放到configBlocks中，包含：
    [provider=>'$injector', method=>'invoke()',
        arguments=>'configFn'
    ]
4. runInvokeQueue 来执行 configBlocks
5.通过providerInjector的getService('$injector')获取 $injector

6.$injector的invoke进行 provider的DI，此时的provider为注册时的[provider结构]
因此被DI的provider应该使用名字+"Provider"，否则会提示错误。
    throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));

注:
$injector.get 为得到[provider结构]
$injector.invoke 为对[provider结构]的DI

三、instanceCache 用来存储 [provider的实例]

1. $injector：instanceCache.$injector = instanceInjector = createInternalInjector();

instanceInjector.invoke 进行各种 [provider实例]的 DI

注:
$injector.get 为得到[provider实例]
$injector.invoke 为对[provider实例]的DI

四、Module的创建
    通过 setupModuleLoader进行模块创建：
    参数1： 模块名称
    参数2： requires
参数3： 配置函数，类似于 module.config


五、providerInjector和instanceInjector
    providerInjector [provider结构]注入器
    instanceInjector [provider实例]注入器