Angular的工作原理
首先上一小段代码(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创建$compile服务和$rootScope;
- 使用$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循环中,一个循环是用来处理$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. 浏览器重新渲染视图。
转载于:https://www.cnblogs.com/moriah/p/6096998.html
Angular的工作原理相关推荐
- Angular @Hostbinding工作原理
@HostBinding()可以为指令的宿主元素添加类.样式.属性等. 使用@HostBinding的一个例子: import { Directive, HostBinding, HostListen ...
- 谈谈Angular关于$watch,$apply 以及 $digest的工作原理
这篇文章主要是面向那些刚开始学AngularJs和想要了解数据绑定(data-binding)是怎么工作的, 如果你已经熟悉如何使用angularjs了,我强烈建议你不用阅读了. angularjs使 ...
- RxJs map operator 工作原理分析
使用一个例子来研究 map 操作符的工作原理. 推荐阅读本文之前,先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识. 源代码: import { Component, OnIni ...
- SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
这是 Jerry 2021 年的第 34 篇文章,也是汪子熙公众号总共第 310 篇原创文章. Jerry 前一篇文章 深入掌握 SAP Fiori Elements 工作原理系列之二:如何给 Fio ...
- 深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮
这是 Jerry 2021 年的第 33 篇文章,也是汪子熙公众号总共第 309 篇原创文章. Jerry 的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后,算是领略到了这个流 ...
- SAP Spartacus自定义指令cxOutlet的工作原理
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
- javascript---001-运行原理01_前端三大技术_JS重要性_Atwood定律_JS应用_JS让人迷惑_TypeScript会取代JS吗_JS是一门编程语言_浏览器工作原理_浏览器内核
javascript-001-运行原理01 1.前端三大技术 HTML CSS Javascript 2.Javascript的重要性 (1)javascript是很多框架的基础,Vue,React, ...
- 纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步骤和工作原理介绍
这是 Jerry 2021 年的第 63 篇文章,也是汪子熙公众号总共第 340 篇原创文章. 蜀相杜甫丞相祠堂何处寻,锦官城外柏森森.映阶碧草自春色,隔叶黄鹂空好音.三顾频烦天下计,两朝开济老臣心. ...
- <<浏览器工作原理与实践>>读书笔记
1. 进程和线程的区别 概念: 进程:操作系统进行资源分配和调度的基本单位:程序的运行实例:(在我们启动一个程序的时候,操作系统会为该程序创建一块内存空间,用来存放代码,运行数据,和执行任务的主线程, ...
最新文章
- python编程培训多少钱-想要学习Python,武汉Python编程培训费用是多少?
- python 为什么每次代码运行时间不同-为什么你写的Python运行的那么慢呢?
- Linux 内核已支持苹果
- 5分钟了解Zigbee的前世今生
- Ubuntu系统的安装与使用:[3]搜狗输入法安装
- 文献阅读(part1)--A Survey of Clustering With Deep Learning From the Perspective of Network Architecture
- Html5画布(canvas)实例之绘制矩形
- Yapi 部署及遇到的坑
- 加入了开源组织datawhale
- 键盘上在方向键上面的9个键是干什么的?
- 面试题17: 打印从1到最大的n位数
- [转]网友monkeylarry研究生期间我们应该做什么
- UCGUI窗体管理及消息处理机制分析
- 基于bert的platos republic i ii情绪分析和可视化
- 我写的Javascript贪食蛇v1
- Java 核心技术 - JVM
- MySQL中的limit分页的使用
- CSS+HTML实现学成在线静态页面
- 圣路易斯大学计算机科学,圣路易斯华盛顿大学计算机科学硕士排名第50(2020年TFE Times排名)...
- 四边形顶点坐标排序十字分割法