从模块说起

最新推荐文章于 2024-11-02 12:42:04 发布

achicuo3542

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量80

点赞数

文章标签： javascript 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/koushikan/p/5939175.html

版权

前言 angular使用起来确实方便，但读通源码能让你使用起来更得心应手，本人抽空将自己读源码时的经验分享给大家。

第一章模块
angular的模块机制.
angular中一个叫modules的对象。该对象存放所有定义的模块。
angular在创建injector的时候会将应用中所有依赖到的定义在模块中的factory会放到同一个容器（providerCache）中。虽然最终都会在同一个容器里，这种module机制也方便了开发人员组织代码。

module 的数据结构如下
{
require:Array ,
_runBlocks:Array.,
_configBlocks:Array.
_invokeQueue:Array.
}

1.创建模块
angular.module(moduleName:String,require:Array,[option(configFn)])可以创建一个模块。
该方法反返回一个含有 factory ,service,controller等方法的对象。这些方法有两个参数 fnName:string ,fn:function ,这些方法执行时会将参数中传过来的函数fn放入module的对应的队列中。而放入队里中的函数fn 以后怎样处理是已经决定了的，下表是module方法对应的处理方法和队列

function	tackle function	Queue
provider	['$provider' ,provider]	InvokeQueue
factory	['$provide', 'factory']	InvokeQueue
service	['$provide', 'service']	InvokeQueue
value	['$provide', 'value']	InvokeQueue
constant	['$provide', 'constant']	InvokeQueue
decorate	['$provide', 'decorator']	InvokeQueue
filter	['$filterProvider', 'register']	InvokeQueue
controller	['$controllerProvider', 'register']	InvokeQueue
directive	['$compileProvider', 'directive']	InvokeQueue
component	['$compileProvider', 'component']	InvokeQueue
config	['$inject' ,'invoke' ]	ConfigBlocks
run	function(block){runBlocks.push(block)	RunBlocks

继续上面的例子
aModule.factory('aServive' ,['$service',function($service){}]);

组装模块数据过程
依据上表factory方法传进的参数最终实际处理该参数的方法是$provide.factory
先不着急先存下这样的结构：
var p = ['$provide', 'factory', ['aServive' ,['$service',function($service){}] ];
p包含的信息代表以后会这样 $provide.factory（['aServive' ,['$service',function($service){}] ）处理。
依据上表factory对应队列/块为 InvokeQueue
_invokeQueue.push(p)

angular启动流程：
angular在应用启动之前会先构建内部模块ng
1.构建模块

angularModule = setupModuleLoader(window); //angularModule = angular.module

angularModule('ng', ['ngLocale'], ['$provide',
                  function ngModule($provide) {
                          $provide.provider({$$sanitizeUri: $$SanitizeUriProvider});
                          $provide.provider('$compile', $CompileProvider).
                             directive({
                                  a: htmlAnchorDirective,
                                  input: inputDirective,
                                  ...
                                  ngModelOptions: ngModelOptionsDirective
                            })
                            .directive({
                                  ngInclude: ngIncludeFillContentDirective
                            })
                            .directive(ngAttributeAliasDirectives)
                            .directive(ngEventDirectives);
                          $provide.provider({
                            $anchorScroll: $AnchorScrollProvider,
                            $animate: $AnimateProvider,
                               ...
                            $$cookieReader: $$CookieReaderProvider
                           });
                  }]
);

第三个参数configFn 是['$provide', function ngModule($provide){...} ]
configFn 会使用config处理，实际处理函数是 $inject.invoke .

出现的最多的 $provider.provider ,那provider函数有怎样的作用呢，实际作用是将passin参数组织成一定的结构放入前文提到的 cacheProvider,下一章将详细介绍。

有了module数据结构，将来$inject就可以大展拳脚。

转载于:https://www.cnblogs.com/koushikan/p/5939175.html