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 相关文章推荐
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
js实现验证码功能
Jul 24 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
PHP四大安全策略
2014/03/12 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
ext 代码生成器
2009/08/07 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python入门篇之函数
2014/10/20 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python操作gitlab API过程解析
2019/12/27 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
关于Keras Dense层整理
2020/05/21 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
详解Flask前后端分离项目案例
2020/07/24 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
执行总经理岗位职责
2014/02/03 职场文书
软环境建设心得体会
2014/09/09 职场文书
孙振耀退休感言
2015/08/01 职场文书
医院感染管理制度
2015/08/05 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
基于Python编写一个监控CPU的应用系统
2022/06/25 Python