原生angular中的provider和$injector主要作用是:
- 注册组件(controller directive service)
- 解决组件间的依赖关系
- 初始化组件
接下来提供简单的实现
var Provider={
//保存所有组件对应的工厂函数
_providers:{},
//注册组件
_register: function(name,fn) {
this._providers[name]=fn;
},
//要来注册service
service: function(name,fn) {
return this._register(name+Provider.SERVICE_SUFFIX,fn);
},
//要来注册directive
directive: function(name,fn) {
return this._register(name+Provider.DIRECTIVE_SUFFIX,fn);
},
//要来注册controller
//初始化controller缓存里保存的是工厂函数,可以多次初始化同一个controller
controller: function(name,fn) {
return this._register(name,function() {
return fn;
})
}
}
上面实现了3种组件的注册过程,接下来实现组件初始化及解决依赖
var Provider = {
// ...
//缓存初始化后的组件
_cache: {},
//返回一个数组 数组为当前函数工厂函数的传参,也就是依赖组件的名称
annotate: function (fn) {
var res = fn.toString()
.replace(/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg, '')
.match(/\((.*?)\)/);
if (res && res[1]) {
return res[1].split(',').map(function (d) {
return d.trim();
});
}
return [];
},
//接下来两个函数将互相调用,调用组件的初始化工厂函数,并循环遍历解决依赖(以及依赖的依赖)
//解决依赖的意思就是将依赖组件的名称转换成对应组件的工厂函数,传入。
//传入组件名,locals为所有本地依赖的对象集合,返回初始化后的组件
get: function(name,locals) {
//如果已有缓存的初始化工厂函数,返回他
if (this._cache[name]) {
return this._cache[name];
}
var provider=this._providers[name];
if (!provider || typeof provider !=='function') {return;}
return (this._cache[name] = this.invoke(provider,locals));
},
//用于初始化一个组件。如果该组件依赖的组件还未初始化,则会先初始化依赖的组件
invoke: function(fn,locals) {
locals= locals || {};
//通过依赖名找出依赖的工厂函数
var deps=this.annotate(fn).map(function(item) {
return locals[item] || this.get(item,locals);
},this);
return fn.apply(null,deps);
}
}