想想应用AngularJS开发也一年了,今天想做个全面的总结,把工作中遇到的问题总结一下,也算是一段旅程的结束吧!
一、风起
AngularJS是一个开发动态Web应用的框架。
HTML是一门很好的声明式的语言,但对于构建动态WEB应用,它无能为力。
Angular是为了扩展HTML在构建应用时本应具备的能力而设计的。
以上告诉了我们AngularJS是什么,它的出现的目的是为了解决什么问题的?
下面总结Angular是怎样扩展HTML的语法的。(directive)
- 通过{{}}进行数据绑定。
- 使用DOM控制结构来进行迭代或隐藏DOM片段。
- 支持表单和表单验证。
- 将逻辑代码关联到DOM元素上。
- 将一组HTML做成可重用的组件。
二、云归
问:面试问道你以前的公司用的什么技术框架?
答:angularJs和vue
问:为什么选择了两套框架,难道运用angular不能写页面,不能处理日常的业务逻辑,功能交互吗?
答:…………………..(脑子有点蒙,就说了angualr是一个重型框架,没有vue那样简洁灵活)
再看看官方给出的解释:
Angular通过给开发者呈现更高层次的抽象来简化应用的开发。
和其他的抽象一样,它也以损失灵活性为代价。换句话说,Angular并不是适合任何应用的开发,Angular考虑的是构建CRUD应用。
幸运的是,绝大多数WEB应用都是CRUD应用。为了理解Angular适用哪些场合,知道它不适合哪些场合是很有帮助的。
对于像游戏和有图形界面的编辑器之类的应用,会进行频繁且复杂的DOM操作,和CRUD应用不同。因此,可能不适合用Angular来构建。在这种场景下,使用更低抽象层次的类库可能会更好,例如:jQuery。
三、征程
1、AngularJS的初始化
Angular 在以下两种情况下自动初始化:
(1)一个是在 DOMContentLoaded 事件触发时
(2)在 angular.js 脚本被执行的同时如果 document.readyState 被置为 ‘complete’ 的话初始化。
初始化时angular要做的事:
- 加载 ng-app 指令所指定的 模块
- 创建应用所需的 injector
- 以 ng-app 所在的节点为根节点,开始遍历并编译DOM树
2、初始化过程中的编译阶段
Angular 的 HTML compiler 让开发者可以教浏览器一些新的语法技能。编译器允许你往现有的HTML元素或属性添加更多的操作逻辑,甚至可以让你自己创建新的带有自定义行为操作的HTML元素或属性。Angular 把这些操作扩展称之为 指令。
编译的两个阶段
- 编译:遍历DOM节点,收集所有的指令,返回一个连接函数(link func)
- 连接:将上一步收集到的每个指令与其所在的作用域(scope)连接生成一个实时视图。任何作用域中的模型改变都会实时在视图中反映出来,同时任何用户与视图的交互则会映射到作用域的模型中。这样,作用域中的数据模型就成了唯一的数据源。
我对这个过程的理解是:其实就是一中关联的过程,就像幼儿园放学家长们对接领会自己的孩子一样。
当然在编译过程中,遇到特定的HTML结构(也就是指令)时,指令所声明的行为操作会被触发。指令可以被放在元素名,属性,类名,甚至是注释中
指令其实就是在编译器遍历DOM时碰到就需要执行的函数。
四、穷理
数据的双向绑定
关于数据的双向绑定的实现原理请看以下这篇文章
https://github.com/xufei/blog/issues/10
看完这篇文章我得出的结论是:
1、angularJs不是一种基于setter的框架,它没有任何途径在数据变更之后立即得到通知,所以在数据变更后有些时候需要我么手动去触发$digest
2、里面主要讲到了 digest和 apply的区别
(1)最直接的差异是,$apply可以带参数,它可以接受一个函数,然后在应用数据之后,调用这个函数
(2)对于$digest来说,在父作用域和子作用域上调用是有差别的,但是,对于$apply来说,这两者一样
当调用$digest的时候,只触发当前作用域和它的子作用域上的监控,但是当调用$apply的时候,会触发作用域树上的所有监控。
3、脏检测的利弊
很多人对Angular的脏检测机制感到不屑,推崇基于setter,getter的观测机制,在我看来,这只是同一个事情的不同实现方式,并没有谁完全胜过谁,两者是各有优劣的。
大家都知道,在循环中批量添加DOM元素的时候,会推荐使用DocumentFragment,为什么呢,因为如果每次都对DOM产生变更,它都要修改DOM树的结构,性能影响大,如果我们能先在文档碎片中把DOM结构创建好,然后整体添加到主文档中,这个DOM树的变更就会一次完成,性能会提高很多。
而angular把批量操作延时到一次更新
今天先总结到这里,明天继续!