浅谈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 相关文章推荐
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
javaScript语法总结
Nov 25 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
利用npm 安装删除模块的方法
May 15 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
改造一台复古桌面收音机
2021/03/02 无线电
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
matplotlib实现区域颜色填充
2019/03/18 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
python多进程并行代码实例
2019/09/30 Python
python 实现波浪滤镜特效
2020/12/02 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
销售自我评价
2013/10/22 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python