浅谈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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JSON相关知识汇总
Jul 03 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
js断点调试经验分享
Dec 08 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python解析nginx日志文件
2015/05/11 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
化学教师教学反思
2014/01/17 职场文书
趣味运动会活动方案
2014/02/12 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
进口业务员岗位职责
2014/04/06 职场文书
环保志愿者活动方案
2014/08/14 职场文书
四年级数学教学反思
2016/02/16 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers