浅谈AngularJs 双向绑定原理(数据绑定机制)


Posted in Javascript onDecember 07, 2017

那么什么是双向绑定,下面简单进行讲解。

首先我们要理解数据绑定。我们看到的网站页面中,是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言,便是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>
  1. 当我们按下按钮
  2. 浏览器接收到一个事件,进入angular context。
  3. $digest循环开始执行,查询每个$watch是否变化。
  4. 由于监视$scope.name的$watch报告了变化,它会强制再执行一次$digest循环。
  5. 新的$digest循环没有检测到变化。
  6. 更新与$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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
原生js写的放大镜效果
Aug 22 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
js 奇葩技巧之隐藏代码
Aug 11 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
面包屑导航详解
Dec 07 #Javascript
谈谈JS中的!!
Dec 07 #Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 #Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 #Javascript
jquery学习笔记之无new构建详解
Dec 07 #jQuery
利用Node.js检测端口是否被占用的方法
Dec 07 #Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 #Javascript
You might like
第十二节--类的自动加载
2006/11/16 PHP
PHP5 安装方法
2007/01/15 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript中的this详解
2014/12/08 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
公务员政审个人总结
2015/02/12 职场文书
工资证明范本
2015/06/12 职场文书
《静夜思》教学反思
2016/02/17 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
python异常中else的实例用法
2021/06/15 Python