AngularJS 工作原理详解


Posted in Javascript onAugust 18, 2016

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

<!doctype html>
<html ng-app>
 <head>
 <script src="angular.js"></script>
 </head>
 <body>
 <png-init=" name='World' ">Hello {{name}}!</p>
 </body> 
</html>

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

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

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

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="angular.js"></script>
 </head>
 <body>
 <input ng-model="name">
 <p>Hello {{name}}!</p>
 </body> 
</html>

  这段代码和上一段代码唯一的区别就是有了一个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 工作原理的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Vuex提升学习篇
Jan 11 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
js H5 canvas投篮小游戏
Aug 18 #Javascript
jQuery过滤选择器经典应用
Aug 18 #Javascript
jQuery表单事件实例代码分享
Aug 18 #Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 #Javascript
AngularJS 执行流程详细介绍
Aug 18 #Javascript
AngularJS国际化详解及示例代码
Aug 18 #Javascript
ECMAScript6轮播图实践知识总结
Aug 17 #Javascript
You might like
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
vue移动端实现红包雨效果
2020/06/23 Javascript
Python中的日期时间处理详解
2016/11/17 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
python装饰器原理与用法深入详解
2019/12/19 Python
学习python需要有编程基础吗
2020/06/02 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
2016年共产党员公开承诺书
2016/03/24 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python