DDR爱好者之家

AngularJS 工作原理详解
站长资源 2024/11/28 佚名
1 1538
DDR爱好者之家 Design By 杰米

 个人觉得，要很好的理解AngularJS的运行机制，才能尽可能避免掉到坑里面去。在这篇文章中，我将根据网上的资料和自己的理解对AngularJS的在启动后，每一步都做了些什么，做一个比较清楚详细的解析。
     首先上一小段代码（index.html），结合代码我们来看看，angular一步一步都做了些什么。

<!doctype html>
<html ng-app>
 <head>
 <script src="/UploadFiles/2021-04-02/angular.js">


当你用浏览器去访问index.html的时候，浏览器依次做了如下一些事情：


    
  
  1. 加载html，然后解析成DOM；
    2. 
  
  2. 加载angular.js脚本；
    3. 
  
  3. AngularJS等待DOMContentLoaded事件的触发；
    4. 
  
  4. AngularJS寻找ng-app指令，根据这个指令确定应用程序的边界；
    5. 
  
  5. 使用ng-app中指定的模块配置$injector；
    6. 
  
  6. 使用$injector创建$compile服务和$rootScope；
    7. 
  
  7. 使用$compile服务编译DOM并把它链接到$rootScope上；
    8. 
  
  8. ng-init指令对scope里面的变量name进行赋值；
    9. 
  
  9. 对表达式{{name}}进行替换，于是乎，显示为“Hello World!”     
    10. 



　　整个过程可以用这张图来表示：


AngularJS 工作原理详解


 好了，通过上面的例子我们清楚了AngularJS是怎样一步一步渲染出一个页面的。那么它又是如何和浏览器的事件回路来交互的呢？或者说是如何跟用户来交互的呢？粗略来讲，主要分为三个阶段：




　　1.  浏览器的事件回路一直等待着事件的触发，事件包括用户的交互操作、定时事件或者网络事件（如服务器的响应等）；




　　2.  一旦有事件触发，就会进入到Javascript的context中，一般通过回调函数来修改DOM；




　　3.  等到回调函数执行完毕之后，浏览器又根据新的DOM来渲染新的页面。




     正如下面一张图所示，交互过程主要由几个循环组成：




AngularJS 工作原理详解


AngularJS修改了一般的Javascript工作流，并且提供了它自己的事件处理机制。这样就把Javascript的context分隔成两部分，一部分是原生的Javascript的context，另一部分是AngularJS的context。只有处在AngularJS的context中的操作才能享受到Angular的data-binding、exception handling、property watching等服务，但是对于外来者（如原生的Javascript操作、自定义的事件回调、第三方的库等）Angular也不是一概不接见，可以使用AngularJS提供的$apply()函数将这些外来者包进AngularJS的context中，让Angular感知到他们产生的变化。




     接下来，让我们一起来看看交互过程中的这几个循环是怎么工作的？




　　1.  首先，浏览器会一直处于监听状态，一旦有事件被触发，就会被加到一个event queue中，event queue中的事件会一个一个的执行。




　　2.  event queue中的事件如果是被$apply()包起来的话，就会进入到AngularJS的context中，这里的fn()是我们希望在AngularJS的context中执行的函数。




　　3.  AngularJS将执行fn()函数，通常情况下，这个函数会改变应用的某些状态。




　　4.  然后AngularJS会进入到由两个小循环组成的$digest循环中，一个循环是用来处理$evalAsync队列（用来schedule一些需要在渲染视图之前处理的操作，通常通过setTimeout(0)实现，速度会比较慢，可能会出现视图抖动的问题）的，一个循环是处理$watch列表（是一些表达式的集合，一旦有改变发生，那么$watch函数就会被调用）的。$digest循环会一直迭代知道$evalAsync队列为空并且$watch列表也为空的时候，即model不再有任何变化。




　　5.  一旦AngularJS的$digest循环结束，整个执行就会离开AngularJS和Javascript的context，紧接着浏览器就会把数据改变后的视图重新渲染出来。


     接下来，我们还是结合代码来解析一下：





<!doctype html>
<html ng-app>
 <head>
 <script src="/UploadFiles/2021-04-02/angular.js">


  这段代码和上一段代码唯一的区别就是有了一个input来接收用户的输入。在用浏览器去访问这个html文件的时候，input上的ng-model指令会给input绑上keydown事件，并且会给name变量建议一个$watch来接收变量值改变的通知。在交互阶段主要会发生以下一系列事件：




　　1.  当用户按下键盘上的某一个键的时候（比如说A），触发input上的keydown事件；




　　2.  input上的指令察觉到input里值的变化，调用$apply(“name=‘A'”)更新处于AngularJS的context中的model；




　　3.  AngularJS将'A'赋值给name；




　　4.  $digest循环开始，$watch列表检测到name值的变化，然后通知{{name}}表达式，更新DOM；




　　5.  退出AngularJS的context，然后退出Javascript的context中的keydown事件；




　　6.  浏览器重新渲染视图。


以上就是对AngularJS 工作原理的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米