angularjs工作原理解析

个人觉得,要很好的理解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是怎样一步一步渲染出一个页面的。那么它又是如何和浏览器的事件回路来交互的呢?或者说是如何跟用户来交互的呢?粗略来讲,主要分为三个阶段:
  1.  浏览器的事件回路一直等待着事件的触发,事件包括用户的交互操作、定时事件或者网络事件(如服务器的响应等);
  2.  一旦有事件触发,就会进入到Javascript的context中,一般通过回调函数来修改DOM;
  3.  等到回调函数执行完毕之后,浏览器又根据新的DOM来渲染新的页面。
     正如下面一张图所示,交互过程主要由几个循环组成:

     
     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.  浏览器重新渲染视图。

时间: 2024-10-06 15:09:18

angularjs工作原理解析的相关文章

Servlet 工作原理解析

-----转自许令波老师Servlet 工作原理解析  感觉写的很不错,保存下来,留着以后温习 从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力.虽然它们是彼此依存的,但是又相互独立发展,这一切都是为了适应工业化生产的结果.从技术角度来说是为了解耦,通过标准化接口来相互协作.既然接口是连接 Servlet 与 Servlet 容器的关键,那我们就

jQuery工作原理解析

jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的. 从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库. jQuery改变javascript编码方式! 那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程: 1)查找(创建)jQuery对象:$(”selector”); 2)调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork(); ok,jQuery就是以这种可

【Java】Servlet 工作原理解析

Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的基本要求.本文将带你认识 Java Web 技术是如何基于 Servlet 工作,你将知道:以 Tomcat 为例了解 Servlet 容器是如何工作的?一个 Web 工程在 Servlet 容器中是如何启动的? Servlet 容器如何解析你在 web.xml 中定义的 Servlet ?用户的请

Jetty的工作原理解析以及与Tomcat的比较

Jetty 的基本架构 Jetty 目前的是一个比较被看好的 Servlet 引擎,它的架构比较简单,也是一个可扩展性和非常灵活的应用服务器,它有一个基本数据模型,这个数据模型就是 Handler,所有可以被扩展的组件都可以作为一个 Handler,添加到 Server 中,Jetty 就是帮你管理这些 Handler. Jetty 的基本架构 下图是 Jetty 的基本架构图,整个 Jetty 的核心组件由 Server 和 Connector 两个组件构成,整个 Server 组件是基于 H

LVS 工作原理解析

LVS即Linux Virtual Server,淘宝大牛章文嵩读博士时发起的开源软件项目,是性能非常好的四层负载均衡集群服务,Linux内核2.4以后已经被直接收录至内核. LVS的工作模式: 在了解工作模式之前首先要晓得为什么会有不同的工作模式,用户的请求进来会先发送到director(virtual server),然后director通过一定的调度算法把请求比较公平的分发到后端的real server,那么自然由real server响应回去给用户. 本文中提到的缩写解释: VIP: D

USB Type-C工作原理解析

自从苹果发布了新MacBook,USB Type-C接口就成为了热议对象.我来从硬件角度解析下这个USB Type-C,以便大家更好的了解USB Type-C的工作原理.特色尺寸小,支持正反插,速度快(10Gb).这个小是针对以前电脑上的USB接口说的,实际相对android机上的microUSB还大了点:USB Type-C:8.3mmx2.5mmmicroUSB:7.4mmx2.35mmlightning:7.5mmx2.5mm所以,从尺寸上我看不到USB Type-C在手持设备上的优势.而

【Tomcat】Servlet 工作原理解析

Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的基本要求.本文将带你认识 Java Web 技术是如何基于 Servlet 工作,你将知道:以 Tomcat 为例了解 Servlet 容器是如何工作的?一个 Web 工程在 Servlet 容器中是如何启动的? Servlet 容器如何解析你在 web.xml 中定义的 Servlet ?用户的请

浏览器的工作原理解析

PART1 有关浏览器的内核 一.Trident内核,代表产品IE Trident内核又称为IE内核.是微软开发的一种排版引擎.1997年与IE4一起诞生.虽然它相对于其它浏览器核心还比较落后,但trident一直在被不断地更新和完善.而且除IE外,许多产品都在使用Trident核心,比如Windows的HELP程序.RealPlayer.Windows Media Player.Windows Live Messager.Outlook Express等. 使用此内核的其它浏览器有:IE.傲游

Velocity工作原理解析和优化

在MVC开发模式下,View离不开模板引擎,在Java语言中模板引擎使用得最多是JSP.Velocity和FreeMarker,在MVC编程开发模式中,必不可少的一个部分是V的部分.V负责前端的页面展示,也就是负责生产最终的HTML,V部分通常会对应一个编码引擎,当前众多的MVC框架都已经可以将V部分独立开来,可以与众多的模板引擎集成. Velocity总体架构 从代码结构上看,Velocity主要分为app.context.runtime和一些辅助util几个部分. APP模块 其中app主要