angularjs-1.3代码学习 模块

花了点时间，阅读了下angularjs的源码。本次先从模块化开始。

angular可以通过module的api来实现前端代码的模块化管理。跟define类似。但不具备异步加载脚本的功能。先从最基本的module开始。查看代码发现angular对module的定义是在setupModuleLoader方法中定义的

function setupModuleLoader(window) {

var $injectorMinErr = minErr('$injector');
var ngMinErr = minErr('ng');

function ensure(obj, name, factory) {
return obj[name] || (obj[name] = factory());
}

var angular = ensure(window, 'angular', Object);

// We need to expose `angular.$$minErr` to modules such as `ngResource` that reference it during bootstrap
angular.$$minErr = angular.$$minErr || minErr;

return ensure(angular, 'module', function() {

return function module(name, requires, configFn) {
//省略.....
return ensure(modules, name, function() {
　　　　　//省略...

return moduleInstance;
});
};
});

}

可以看到源码中是通过ensure函数，将module定义到angular，并且在函数内返回函数，这就使用到了闭包，angular的目的是为了存储对应的module信息。在整个angular模块系统中，源码通过modules来存储所有用户定义的模块。当用户对自己定义的模块注册服务时(factory，service，provider，value时)，这些服务会被存在各自模块内部的invokeQueue数组中维护。这同样是一个闭包。

当setupModuleLoader方法执行结束之后，返回的值是一个moduleInstance。这也是我们在外部调用angular.module时返回的值，看一下内部结构：

var moduleInstance = {
// Private state
_invokeQueue: invokeQueue,
_configBlocks: configBlocks,
_runBlocks: runBlocks,
requires: requires,
name: name,
provider: invokeLater('$provide', 'provider'),
factory: invokeLater('$provide', 'factory'),
service: invokeLater('$provide', 'service'),
value: invokeLater('$provide', 'value'),
constant: invokeLater('$provide', 'constant', 'unshift'),
animation: invokeLater('$animateProvider', 'register'),
filter: invokeLater('$filterProvider', 'register'),
controller: invokeLater('$controllerProvider', 'register'),
directive: invokeLater('$compileProvider', 'directive'),
config: config,
run: function(block) {
runBlocks.push(block);
return this;
}
};

我们可以使用_invokeQueue属性查看，当前module下面注册了哪些服务。另外moduleInstance也向外部公开了诸如provider，factory.service这些接口，供用户去注册自定义服务。至于如何注册的，是通过其内部的invokeLater方法，统统加入到invokeQueue数组中

function invokeLater(provider, method, insertMethod, queue) {
if (!queue) queue = invokeQueue;
return function() {
queue[insertMethod || 'push']([provider, method, arguments]);
return moduleInstance;
};
}

目前，我们大致了解了模块的定义和一般服务的注册。大致调用代码如下：

var app = angular.module("A", []); //定义一个模块A
app.service("A1", function(){
console.log(1);
});  //在模块A上定义一个服务A1

ok，万事俱备，只欠业炎。我们如何使用它？angular提供了一个injector的方法，我们来看一下。从内部函数publishExternalAPI中看到injector的定义，它来源于angular的一个叫做createInInjector的函数。

function createInjector(modulesToLoad, strictDi) {
strictDi = (strictDi === true);
var INSTANTIATING = {},
providerSuffix = 'Provider',
path = [],
loadedModules = new HashMap([], true),
providerCache = {
$provide: {
provider: supportObject(provider),
factory: supportObject(factory),
service: supportObject(service),
value: supportObject(value),
constant: supportObject(constant),
decorator: decorator
}
};
var  providerInjector = (providerCache.$injector =
createInternalInjector(providerCache, function(serviceName, caller) {
if (angular.isString(caller)) {
path.push(caller);
}
throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));
}))
var instanceCache = {};
var instanceInjector = (instanceCache.$injector =
createInternalInjector(instanceCache, function(serviceName, caller) {
var provider = providerInjector.get(serviceName + providerSuffix, caller);
return instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
}));
forEach(loadModules(modulesToLoad), function(fn) { instanceInjector.invoke(fn || noop); });

return instanceInjector;
// 省略.....
}

可以看出，内部定义了两个核心对象providerCache和instanceCache。它们都是由createInternalInjector函数生成。那进入createInternalInjector函数里看一下

function createInternalInjector(cache, factory) {
//....
return {
invoke: invoke,
instantiate: instantiate,
get: getService,
annotate: createInjector.$$annotate,
has: function(name) {
//对象本身是否有该属性
return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);
}
};
}

因为createInjector函数中最终返回的是instanceInjector，而此君指向的则是instanceCache的$injector属性，而这个属性则是createInternalInjector函数的返回值。换言之，用户可以在外部调用这些方法

var injector = angular.injector(["A"]);
//其中injector就是createInternalInjector函数的返回的对象

在我们调用这些接口之前，需要告诉angular去执行哪个模块里的服务，让我们回到createInjector函数中，看一下函数最后的for循环

forEach(loadModules(modulesToLoad), function(fn) { instanceInjector.invoke(fn || noop); });

可以猜想这个loadModules函数的作用应该是获取模块。简单看一下loadModules

function loadModules(modulesToLoad) {
var runBlocks = [], moduleFn;
forEach(modulesToLoad, function(module) {
if (loadedModules.get(module)) return; //先尝试去loadedModules查找
loadedModules.put(module, true);

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]);
}
}

try {
if (isString(module)) {
moduleFn = angularModule(module); //angularModule其实就是外部用户调用的module接口，获取到对应模块
runBlocks = runBlocks.concat(loadModules(moduleFn.requires)).concat(moduleFn._runBlocks);//如果模块有依赖则事先获取依赖模块
runInvokeQueue(moduleFn._invokeQueue);//之前所有的声明的服务都被存在放这个模块的invokeQueue数组中
runInvokeQueue(moduleFn._configBlocks);
} else if (isFunction(module)) {
runBlocks.push(providerInjector.invoke(module));
} else if (isArray(module)) {
runBlocks.push(providerInjector.invoke(module));
} else {
assertArgFn(module, 'module');
}
} catch (e) {
if (isArray(module)) {
module = module[module.length - 1];
}
if (e.message && e.stack && e.stack.indexOf(e.message) == -1) {
// Safari & FF's stack traces don't contain error.message content
// unlike those of Chrome and IE
// So if stack doesn't contain message, we create a new string that contains both.
// Since error.stack is read-only in Safari, I'm overriding e and not e.stack here.
/* jshint -W022 */
e = e.message + '\n' + e.stack;
}
throw $injectorMinErr('modulerr', "Failed to instantiate module {0} due to:\n{1}",
module, e.stack || e.message || e);
}
});
return runBlocks;
}

在runInvokeQueue中，我们看到源码获取了之前用户存在放invokeQueue中的服务对象，并且通过get方法及getService方法去获取服务。这里有个细节地方，源码是通过providerInjector的get方法来获取的，那我们看getService源码的时候，其中的cache则应该是在之前createInjector函数中的providerCache。

function getService(serviceName, caller) {
if (cache.hasOwnProperty(serviceName)) {
if (cache[serviceName] === INSTANTIATING) {
throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
serviceName + ' <- ' + path.join(' <- '));
}
return cache[serviceName];
} else {
try {
path.unshift(serviceName);
cache[serviceName] = INSTANTIATING;
return cache[serviceName] = factory(serviceName, caller);
} catch (err) {
if (cache[serviceName] === INSTANTIATING) {
delete cache[serviceName];
}
throw err;
} finally {
path.shift();
}
}
}

基本还是先尝试在cache中找一次，没有则创建并保存在cache中。因为之前providerInjector中就已经有了$provider何$inject这样的方法。所以在

var invokeArgs = queue[i],
provider = providerInjector.get(invokeArgs[0]);

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

中，provider就是：

providerCache = {
$provide: {
provider: supportObject(provider),
factory: supportObject(factory),
service: supportObject(service),
value: supportObject(value),
constant: supportObject(constant),
decorator: decorator
}
};

然后，再有后面的一步provider[invokeArgs[1].apply(provider, invokeArgs[2])]。看到这里我们突然恍然大悟，开始angular为什么要使用

provider: invokeLater('$provide', 'provider'),
factory: invokeLater('$provide', 'factory'),
service: invokeLater('$provide', 'service'),
value: invokeLater('$provide', 'value'),
constant: invokeLater('$provide', 'constant', 'unshift'),
animation: invokeLater('$animateProvider', 'register'),
filter: invokeLater('$filterProvider', 'register'),
controller: invokeLater('$controllerProvider', 'register'),
directive: invokeLater('$compileProvider', 'directive'),

这类写法注册的原因了，也就是现在我们才真正调用具体service，factory或者是value等api去执行或者讲要初始化我们自定义的服务。这里我们顺便看一下factory，service和provider的内部实现，这些API以后我们会经常用到：

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_; //并存储在本地缓存中
}

function factory(name, factoryFn, enforce) {
return provider(name, { //底层调用的是provider
$get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
});
}

function service(name, constructor) {
return factory(name, ['$injector', function($injector) { //底层调用factory
return $injector.instantiate(constructor);
}]);
}

function value(name, val) { return factory(name, valueFn(val), false); } //底层调用factory

factory，service和value基本底层都是使用的provider方法。可以看到provider方法需要$get的这种键值对的方式将函数传入。所以我们在外部使用这一系列API的方式，大致

var app = angular.module("A", []);
app.service("A1", function(){
console.log(1);
});
app.factory("B1", [function(){
console.log(2);
return {};
}]);
app.provider("C1", {
$get: function(){
console.log(3);
}
});
app.value("D1", 4);
app.constant("E1", 5);

有兴趣的朋友可以试下，service使用factory的方法定义可以不可以^_^。至此，我们之前使用injector()方法实际上获取到了instanceInjector。目前我们还是没有触发或者执行我们定义的服务，实际上instanceInjector上提供了如下几个方法：

return {
invoke: invoke,
instantiate: instantiate,
get: getService,
annotate: createInjector.$$annotate,
has: function(name) {
//对象本身是否有该属性
return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);
}
};

当我们执行get方法的时候，我们注册的服务的以执行！

function getService(serviceName, caller) {
if (cache.hasOwnProperty(serviceName)) {
if (cache[serviceName] === INSTANTIATING) {
throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
serviceName + ' <- ' + path.join(' <- '));
}
return cache[serviceName];
} else {
try {
path.unshift(serviceName);
cache[serviceName] = INSTANTIATING;
return cache[serviceName] = factory(serviceName, caller);
} catch (err) {
if (cache[serviceName] === INSTANTIATING) {
delete cache[serviceName];
}
throw err;
} finally {
path.shift();
}
}
}

这里你可能会奇怪这个factory到底是哪个？是来自于providerInjector的还是来自instanceInjector的？实际上factory是由instanceInjector中定义的回调函数。为什么呢？因为上文我们说了外部调用injector的时候angular内部返回的是instanceInjector。所以在instanceInjector上调用get时，这个factory应该就是instanceInjector上注册的回调函数，来看一下这个回调：

function(serviceName, caller) {
var provider = providerInjector.get(serviceName + providerSuffix, caller);
return instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
}

在instanceInjector的回调里面调用providerInjector的get，其实这个很清楚，之前angular将所有服务存储都存放在了providerCache里面，而外部对用户而言，他无法直接修改providerCache里面的东西。重复的get我们就不看，来看一下invoke方法：

function invoke(fn, self, locals, serviceName) {
if (typeof locals === 'string') {
serviceName = locals;
locals = null;
}

var args = [],
$inject = createInjector.$$annotate(fn, strictDi, serviceName),
length, i,
key;

for (i = 0, length = $inject.length; i < length; i++) {
key = $inject[i];
if (typeof key !== 'string') {
throw $injectorMinErr('itkn',
'Incorrect injection token! Expected service name as string, got {0}', key);
}
args.push(
locals && locals.hasOwnProperty(key)
? locals[key]
: getService(key, serviceName)
);
}
if (isArray(fn)) {
fn = fn[length];
}

// http://jsperf.com/angularjs-invoke-apply-vs-switch // #5388
return fn.apply(self, args); //执行服务
}

千呼万唤始出来啊。服务的执行在invoke方法得到执行，那么我们算是基本的将module和服务注册和执行的流程简单的过了一遍。

简单回顾一下，angular的module实际上就是用了两层闭包来管理对象，没有动态异步加载模块，这个功能有点类似namespace。比较鸡肋。另外返回的moduleInstance中有factory，service，provider，value等一些可以注册服务的接口，其内部使用了providerInjector何instanceInjector来存储相关服务。通过invoke来执行相应模块里的相应服务。目前我们还没有看angular的bootstrap部分，其内部也是调用invoke方法，达到内置注册的服务得到执行。

时间不多，内容刚好，以上是个人阅读源码的一些理解，有不对或者偏差的地方，还希望园友们斧正。共同进步。