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的时候，浏览器依次做了如下一些事情：

加载html，然后解析成DOM；
加载angular.js脚本；
AngularJS等待DOMContentLoaded事件的触发；
AngularJS寻找ng-app指令，根据这个指令确定应用程序的边界；
使用ng-app中指定的模块配置$injector；
使用injector创建injector创建 compile服务和$rootScope；
使用compile服务编译DOM并把它链接到compile服务编译DOM并把它链接到 rootScope上；
ng-init指令对scope里面的变量name进行赋值；
对表达式{{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循环中，一个循环是用来处理digest循环中，一个循环是用来处理 evalAsync队列（用来schedule一些需要在渲染视图之前处理的操作，通常通过setTimeout(0)实现，速度会比较慢，可能会出现视图抖动的问题）的，一个循环是处理watch列表（是一些表达式的集合，一旦有改变发生，那么watch列表（是一些表达式的集合，一旦有改变发生，那么 watch函数就会被调用）的。digest循环会一直迭代知道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循环开始，digest循环开始， watch列表检测到name值的变化，然后通知{{name}}表达式，更新DOM；
　　5. 退出AngularJS的context，然后退出Javascript的context中的keydown事件；
　　6. 浏览器重新渲染视图。

　　最后，希望这篇博客能帮助大家更好的理解AngularJS在背后干的事情。如有不确切的地方，请指正！

转自http://www.cnblogs.com/penghongwei/p/3444601.html

转载于:https://www.cnblogs.com/alinaxia/p/6349902.html

AngularJS实现原理相关推荐

html5混合app原理,HTML5混合App开发
内容简介在竞争激烈的移动互联网环境下,HTML5技术一直备受关注.HTML5混合App开发与原生App开发模式之间也争议不断.相对于原生App来说,HTML5混合App开发的成本更低.周期更短,而且 ...
常用前端框架Angular和React的一些认识
为什么要用AngularJs? 要了解为什么使用AngularJS首先就要接受它的思想: 首先,angularJS借助了传统MVC的架构模式(model模型 view视图 controller控制 ...
七步从Angular.JS菜鸟到专家（2）：Scopes
这是＂AngularJS - 七步从菜鸟到专家＂系列的第二篇. 在第一篇我们展示了如何开始搭建一个Angular应用.在这一篇里,我们要讨论一个理解AngularJS运作原理所必须的基本概念,以及你如 ...
七步走 Angular.js 从菜鸟到专家（系列列表）
Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的S ...
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
Angular 的数据绑定采用什么机制,详述原理? 脏检查机制.阐释脏检查机制,必须先了解如下问题. 单向绑定(ng-bind) 和双向绑定(ng-model) 的区别? ng-bind 单向数据绑 ...
angularjs双向数据绑定原理解析
angularjs的双向数据绑定脏值(发生了变化的值)检查不等于定时轮询,而是特定事件触发才会执行只有指定事件触发后才会进入脏值轮询. - DOM事件,譬如用户输入文本,点击按钮等.(ng-cli ...
angularjs的双向绑定原理实现
angularjs的双向绑定用js代码来实现 <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
Angularjs标签模板加载原理
前言 Angularjs提供多种模板加载方案. 最基础的为通过预先声明路径的方式,通过Ajax获取. 使用诸如gulp-html2js构建工具,将HTML模板转化为js文件使用. 使用script标签 ...
基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

AngularJS实现原理

AngularJS实现原理相关推荐

最新文章

热门文章