浅谈AngularJS

最近为了麻痹自己或者说转换心情,把以前写的一个东西重新翻出来重写了一下.
由于涉及到一点配置页面,于是顺手研究了下AngularJS.
因为本来也是自己手写的页面跟数据的绑定联动,刚好AngularJS主打的特点就是这个.

稍微翻了下Angular的文档,感觉还是挺舒心的,虽然不一定使用.
但至少,很简明扼要地说了大概原理.

尽管,在翻看实现前,光看这些描述,带来的问题估计会比看之前更多.

还有一点就是概念比较多.
比如model,module,scope,controller,injector,service,serviceprovider等.

而实际上,浏览下来,比较核心的也就是injector和scope这一块.

injector的实现算是比较奇巧淫技的.

简单说就是把函数tostring之后,从字符串里提取参数.
然后通过参数名字查找相应的对象.
最后在apply回去,实际调用函数.

这个过程angular称之为annotate.

方式其实不算复杂,思路也很清晰.
只是,不说的话,一时半会未必想得到这么做.

而且它的一个问题就如同在注释里说的,一旦遇到对scirpt做minify的时候,就可能会比较麻烦了.

还有一点就是,如果按照正统的bootstrap方式的话,其实是在调用bootstrap的时候,一次性将所有module注入的.
换句话说,如果你module比较多,且可能加载比较耗时的话,即使页面load很快,但是渲染也会被拖慢到全部加载完成才开始.

当然,这个只要把它的bootstrap的实现自己手工展开一下也就可以分批load.
某种程度上来说,也就突破了单页面单个ng-app的限制.

因为这种方式,其实是不用ng-app的.
需要的是手工选择module绑定的节点,$compile一下,然后apply相应的scope即可.

而scope正是angular宣扬的two way binding的核心所在吧.
简单地说的话,就是ng/directive/ngEventDirs.js那里不到十行的代码.
把一些有用户交互的事件绑定到了scope的$apply上面.

也就是说,任何用户对页面元素的操作,都会出发$apply函数.

而apply函数的作用就是触发$digest,去检测绑定的model的所被watch的部分.
如果有值的改变,就触发dom的修改.
以此实现two way binding.

但是这里有一个问题.
就是这种binding,必须是一个元素触发另一个元素的修改.
而不能是自己触发自己的model view synchronize.

比如说,一个值绑定了一个input元素.
那么,在这个input里输入的时候,一般是不会触发起所绑定的值的变化的.
而如果通过ng-change去同步两者的值的话.
那么,由于angular的机制,每一个键盘敲击动作都会触发$digest,从而引发dom/view的更新/修改,从而中断交互.

一个解决方式就是对这个值做两份copy,一份用于view的显示,一份用于view修改时的真正的binding value.
但这样其实就退回了手工维护two way binding的情况了.

所以呢,angular在这点上还是有略显遗憾的地方的.

当然,大多数情况下下的交互都不需要这种自身修改然后马上反馈回来的机制的.

简单来说,去掉现成提供的各种directive的话,angularjs的其实还算简单的.
或者说,核心不复杂.

好的设计就是,说出来了觉得简单.
但没人告诉的话,也许就想不到.
所谓精妙.