angular.js实现数据双向通信的原理

「爱情、让人受尽委屈。」 2022-05-29 11:22 126阅读 0赞

**angular.js实现数据双向通信的原理**

angular的核心特性有：MVVM、模块化、依赖注入、自动化双向数据绑定、语义标签等。

1、AngularJS的scopes对象

AngularJS的scopes对象，是一般的javascript对象，可以在他们上面绑定属性和其他对象，也可以添加一些功能，用于观察数据结构上的变化。观察功能都由dirty-checking来实现，并且都在一个digest循环中被执行。

2、angular.js主要通过scopes实现数据双向绑定，scopes包括四个主要部分：

A、digest循环以及dirty-checking，包括watch    digest    $apply

B、Scope继承，这项机制使得我们可以创建scope继承来分享数据和事件

C、集合（数组和对象），有效的dirty-checking

D、事件系统（on），on   emit    $broadcast

3、上面的A是用来实现数据的双向绑定的原理，下面主要讲解A

**a、浏览器事件循环和angular.js扩展**

浏览器一直在等待指定事件的响应，比如下面的事件：

● DOM事件，譬如用户输入文本，点击按钮等（ng-click）

● XHR响应事件（$http）

● 浏览器location变更事件（$location）

● Timer事件（$timeout,$interval）

一旦有指定的事件触发，事件的回调函数就会在javascript的解析器里面执行，然后就可以做任何的DOM操作。等回调函数执行完毕时，浏览器就会相应的对DOM作出变化。

angular.js拓展了这个事件循环，生成一个有时成为angular  context的执行环境。

**b、watch队列（watch  list）**

#### 每次绑定一些东西到UI上时，就会往$watch队列里面插入一条$watch，想象一下$watch就是那个可以检测、监视的model里有变化的东西。当模板加载完成时，也就是在linking阶段（angular分为compole阶段和linking阶段），angular注释器会寻找每个directive，然后生成每个需要的$watch。 ####

**c、$digest循环**

在a步骤中有提到**angular.js扩展循环事件，**当浏览器接收到可以被angular  context处理的事件时，digest循环就会触发。

digest循环有两部分组成：

● 一个处理evalAsync队列

● 另一个处理watch队列

digest将会遍历我们的watch，然后询问他是否有属性和值变化，直到$watch队列都检查过。

这就是所谓的dirty-checking。当$watch有更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都不变化了。如果循环超过10次，将会抛出一个异常，防止无限循环。当$digest循环结束时，DOM相应的变化。

**d、通过$apply来进入angular  context**

$apply决定哪些事件进入angular  context，哪些事件不进入。

当指定事件触发时，调用apply，然后进入angular  context，如果没调用就不会进入angular  context，$digest永远不会执行。

待续。。。。

[原文链接][Link 1]

[Link 1]: https://www.cnblogs.com/jingwhale/p/5117419.html

发表评论取消回复

表情：

评论列表（有 0 条评论，126人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Java WebSocket实现双向通信的实例

以下是一个简单的Java WebSocket实现双向通信的例子。这个例子使用了Java Websocket API和Spring Boot框架。首先，我们需要创建一个Web

电玩女神/ 2024年10月09日 22:24/ 0 赞/ 77 阅读

相关 WebSocket 双向通信

WebSocket是一种**全双工通信协议，适用于实时双向通信。**

我不是女神ヾ/ 2024年04月17日 10:19/ 0 赞/ 102 阅读

相关 WebSocket：实现实时双向通信的利器

WebSocket：实现实时双向通信的利器 WebSocket是一种强大的协议，用于实现实时双向通信，允许客户端和服务器之间建立长久的连接，以便实时传递数据。这个协议在现代W

小鱼儿/ 2024年04月06日 14:54/ 0 赞/ 112 阅读

相关 AngularJS第二课：双向数据绑定

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 一.什么是双向数据绑定首先介绍作用域，相当于一个

﹏ヽ暗。殇╰゛Y/ 2022年10月02日 02:50/ 0 赞/ 264 阅读

相关 3、AngularJs的双向数据绑定

1、AngularJs的指令系统 • ng\-app • ng\-controller 2、AngularJs的双向数据绑定

刺骨的言语ヽ痛彻心扉/ 2022年08月23日 08:17/ 0 赞/ 212 阅读

相关 AngularJS（2）——AngularJS数据双向绑定

双向绑定 AngularJS在$scope变量中使用脏值检测来实现了数据双向绑定。 Scope作用： 1.通过数据共享连接Controller和View

妖狐艹你老母/ 2022年08月22日 00:18/ 0 赞/ 221 阅读

相关 AngularJs数据绑定原理

注这篇博文主要是写给新手的，是给那些刚刚开始接触Angular，并且想了解数据帮定是如何工作的人。如果你已经对Angular比较了解了，那强烈建议你直接去阅读源代码。

素颜马尾好姑娘i/ 2022年07月29日 09:19/ 0 赞/ 216 阅读

相关 angular.js实现数据双向通信的原理

angular.js实现数据双向通信的原理 angular的核心特性有：MVVM、模块化、依赖注入、自动化双向数据绑定、语义标签等。 1、AngularJS的scopes对

「爱情、让人受尽委屈。」/ 2022年05月29日 11:22/ 0 赞/ 127 阅读

相关 vue实现数据双向绑定原理实现

直接上代码吧： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

蔚落/ 2022年01月30日 11:49/ 0 赞/ 352 阅读

相关双向数据绑定的实现原理

<input type="text" id="userName"><br> <span id="uName"></span> <script>

我会带着你远行/ 2022年01月12日 10:41/ 0 赞/ 330 阅读