浅谈AngularJs 双向绑定原理(数据绑定机制)
那么什么是双向绑定,下面简单进行讲解。
首先我们要理解数据绑定。我们看到的网站页面中,是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言,便是html和css主要做的工作。而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是js主要完成的工作。很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求)。那么数据进行更新后,页面上相应的位置也能自动做出对应的修改,便是数据绑定。
在以前的开发模式中,这一步一般通过jq操作DOM结构,从而进行更新页面。但这样带来的是大量的代码和大量的操作。如果能在开始的时候,便已经确定好从后端获取的数据到页面上需要进行的操作,当数据发生改变,页面的相关内容也自动发生变化,这样便能极大地方便前端工程师的开发。在新的框架中(angualr,react,vue等),通过对数据的监视,发现变化便根据已经写好的规则进行修改页面,便实现了数据绑定。可以看出,数据绑定是M(model,数据)通过VM(model-view,数据与页面之间的变换规则)向V(view)的一个修改。
而双向绑定则是增加了一条反向的路。在用户操作页面(比如在Input中输入值)的时候,数据能及时发生变化,并且根据数据的变化,页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车,在商品数量发生变化的时候,商品价格也能及时变化。这样便实现了V——M——VM——V的一个双向绑定。
AngularJs 为 scope 模型上设置了一个 监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时,$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。
$watch
这有点类似于我们的观察者模式,在当前作用域$scope下,我们创建一个监控器$watchers和一个监听器$watch,$watchers 负责管理所有的 $watch,当我们每次绑定到UI上的时候就<font color=red>自动</font>创建一个$watch,并把它放到 $watchers。
controller.js
app.controller('MainCtrl', function($scope) { $scope.Hello = "Hello"; $scope.world = "World"; });
index.html
<div>{{Hello}}</div>
这里,即便我们在$scope上添加了两个变量,<font color=red>但是只有一个绑定在了UI上,因此在这里只生成了一个$watch</font>
$digest
当浏览器接收到可以被angular context处理的事件时,$digest循环就会触发。$digest将会遍历我们的$watch,如果$watch没有变化,这个循环检测就将停止,如果有至少一个更新过,这个循环就会再次触发,直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。这就是脏检查(Dirty Checking)机制
controller.js
app.controller('MainCtrl', function() { $scope.name = "Foo"; $scope.changeFoo = function() { $scope.name = "Bar"; } });
index.js
<div>{{ name }}</div> <button ng-click="changeFoo()">Change the name</button>
- 当我们按下按钮
- 浏览器接收到一个事件,进入angular context。
- $digest循环开始执行,查询每个$watch是否变化。
- 由于监视$scope.name的$watch报告了变化,它会强制再执行一次$digest循环。
- 新的$digest循环没有检测到变化。
- 更新与$scope.name新值相应部分的DOM。
$apply
$apply 我们可以直接理解为刷新UI。<font color=red>如果当事件触发时,你调用$apply,它会进入angular context,如果没有调用就不会进入,之后的$digest检测机制就不会触发</font>
app.directive('clickable', function() { return { restrict: "E", scope: { foo: '=' }, template: '<ul style="background-color: lightblue"><li>{{foo}}</li></ul>', link: function(scope, element, attrs) { element.bind('click', function() { scope.foo++; console.log(scope.foo); }); } } });
当我们调用clickable指令的时候,我们可以看到foo的值增加了,但是界面上显示的内容并没有改变。$digest脏检测机制没有触发,检测foo的$watch就没有执行。
$apply()方法的两种形式
1) 无参
$scope.$apply();
element.bind('click', function() { scope.foo++; //if error scope.$apply(); });
当我们使用这种形式的时候,如果在scope.$apply之前程序发生异常,那scope.$apply没有执行,界面就不会更新
2) 有参
$scope.$apply(function(){ ... })
element.bind('click', function() { scope.$apply(function() { scope.foo++; }); })
如果用这种形式,即使后面的发生异常,数据还是会更新。
在 AngularJS 中使用 $watch
常用的使用方式:
$scope.name = 'Hello'; $scope.$watch('name', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; });
传入到$watch()中的第二个参数是一个回调函数,该函数在name的值发生变化的时候会被调用。
如果要监听的是一个对象,那还需要第三个参数:
$scope.data.name = 'Hello'; $scope.$watch('data', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; }, true);
表示比较的是对象的值而不是引用,如果不加第三个参数true,在 data.name 变化时,不会触发相应操作,因为引用的是同一引用。
总结
1) 只有在$scope变量绑定到页面上,才会创建 $watch
2) $apply决定事件是否可以进入angular context
3) $digest 循环检查model时最少两次,最多10次(多于10次抛出异常,防止无限检查)
4) AngularJs自带的指令已经实现了$apply,所以不需要我们额外的编写
5) 在自定义指令时,建议使用带function参数的$apply
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 微信公众平台开发
- BZOJ 1115: [POI2009]石子游戏Kam (阶梯nim)
- php性能监测模块XHProf
- BZOJ 1022: [SHOI2008]小约翰的游戏John (Anti-nim)
- 洛谷P2252 取石子游戏(威佐夫博弈)
- HDU 3032 Nim or not Nim?(Multi-Nim)
- POJ 2311 Cutting Game(二维SG+Multi-Nim)
- js去掉html标签和去掉字符串文本的所有的空格
- php操作memcache的使用测试总结
- linux awk命令详解
- php str_split 解决中文
- PHP汉字转拼音函数
- 51NOD 1185 威佐夫游戏 V2(威佐夫博弈)
- HDU 1527 取石子游戏(威佐夫博弈)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SQL | SQL 必知必会笔记 (一 )
- 如何在树莓派4B上安装EMQ X Broker
- SQL | SQL 必知必会笔记 (二)
- 基于桶子法实现的两种排序算法
- Notes | 微观经济学课堂笔记(一)
- 将终结点图添加到你的ASP.NET Core应用程序中
- Stata | 爬取 CFPS 文献传送门并制作成 Markdown
- 委托的好处
- Elasticsearch安装和配置
- Notes | QUAIDS 模型
- Stata | 520,听说你也想快点找到...
- Stata | 批量替换变量值的小技巧
- 手把手教你完成课设作业使用Pandas对海平面温度异常进行分析,小白也能看的懂
- 谈谈自学 Stata 的体会
- Latex修改字体字号的大小