因为工作中实际开发需要，才开始接触angular框架。从当初的比葫芦画瓢，被各种问题、概念折磨摧残，到现在有一定的了解认识，觉得有必要将自己的认识进行简单的总结。不到位的地方还望多多包涵。
数据在model、view层如何流动就成了问题的关键，angular通过dirty-check实现了数据的双向绑定。所谓的双向绑定，就是view的变化可以反映到model层，而model数据的变化可以在view体现出来。那么angular是如何做到双向绑定的?为何成为dirty-check呢？还是前端的一个原始问题出发吧：
html:
js:
在上面的例子中，存在两个过程:
下面来看看angular是如何进行数据处理的：
第一步. 添加watcher：就是当数据发生变化的时候，需要检测哪些对象，需要先进行注册
第二步. dirty-check：就是当有某个scope作用域下的数据发生变化后，需要遍历检测注册的$$watchers = [...]
这样就实现了数据的双向绑定，上面的实现是否跟自定义事件很像呢？可以看到使用了观察者设计模式或(publisher-subscriber)。
同样，首先来看下不使用DI，是如何解决对象相互依赖的:
在上面的例子中，类Benz依赖于类Car，直接通过内部New来解决这种依赖关系。这样做的弊端非常明显，代码耦合性变高，不利于维护。后端框架很早就意识到了这个问题，spring早期通过在xml文件中注册对象之间的依赖关系，后来有通过anotation的方式更加方便地解决DI问题，COS端的同学可以看看后端的代码。
js语言本身是不具有注解(annotation)机制的，那angular是如何实现的呢？
1.模拟注解
2. 注入对象的创建
<div class="jb51code">
<pre class="brush:js;">
function createInjector(modulesToLoad,strictDi) {
//通过singleton模式创建对象
var providerCache = {
$provide: {
provider: supportObject(provider),factory: supportObject(factory),service: supportObject(service),value: supportObject(value),constant: supportObject(constant),decorator: decorator
}
},instanceCache = {},instanceInjector = (instanceCache.$injector =
createInternalInjector(instanceCache,function(serviceName,caller) {
var provider = providerInjector.get(serviceName + providerSuffix,caller);
return instanceInjector.invoke(provider.$get,provider,undefined,serviceName);
}));
return instanceInjector;
}
3. 获取注入对象
<div class="jb51code">
<pre class="brush:js;">
function invoke(fn,self,locals,serviceName) {
var args = [],$inject = annotate(fn,serviceName);
for (...) {
key = $inject[i];
// 替换成依赖的对象
args.push(
locals && locals.hasOwnProperty(key)
? locals[key]
: getService(key,serviceName)
);
}
if (isArray(fn)) {
fn = fn[length];
}
return fn.apply(self,args);
}
到这里，是否是看到很多后端框架设计的思路，没有anotation就模拟一个，难怪PPK要说angular是" a front-end framework by non-front-enders for non-front-enders"
1.事件机制: 把事件注册在$rootScope上，这样做的问题就是会在$rootScope上注册太大事件，会引起一些列后续问题
2.通过service: 充分利用angular的DI特性，利用service是单例的特点，在不同controller之间起到桥梁作用
1. 单例(singleton): angular里面只有service才可以进行DI诸如，controller、directive这些均不具有这些功能，service字面上就是提供一些基本的服务，跟具体的业务没有关联，而controller、directive则与具体业务紧密相关联，所以需要保证service的唯一性。
2. lazy new：angular首先会生成service的provider，但是并没有立即生成对应的service，只有到需要这些服务的时候才会进行实例化操作。
3. provider)的分类: provider()、factory、service、value、constant，其中provider是最底层的实现，其他方式都是在其基础上的语法糖(sugar)，需要注意的是这些服务最终均要添加$get方法，因为具体service是通过执行$get方法生成的。
本文涉及的内容还不是很全民，之后还会有相应补充，希望大家也可以对angular框架进行学习探讨。
原文链接：https://www.f2er.com/js/50072.html