angularJS2017回顾总结之旅

港控/mmm° 2022-06-03 07:40 183阅读 0赞

> 想想应用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的初始化

![这里写图片描述][SouthEast]

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][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把批量操作延时到一次更新

今天先总结到这里，明天继续！

[SouthEast]: /images/20220603/bfda7ece64354ebe8c6eb35ddaa0338e.png
[https_github.com_xufei_blog_issues_10]: https://github.com/xufei/blog/issues/10