深入浅析AngularJS中的一次性数据绑定 (bindonce)


Posted in Javascript onMay 11, 2017

一、理解双向数据绑定和监听器

为了实现双向数据绑定,AngularJS使用了$watch API来观察期作用域中的模型变化。具体的作用域取决于你的代码如何编写。如果你没有创建一个自作用域,就是说没有使用ngController指令在你的DOM和你的控制器代码之间创建一个关联,你可能处理的是跟作用域$rootScope,这个作用域由ngApp自动创建,并且是应用中所有作用域的父作用域,当然,如果你选择手动启动AngularJS,那情况就另当别论了。每当你创建了一个数据绑定时,AngularJS就会自动创建一个监听器来监听这个数据的变化。比如说下面这个简单的例子:

<p>Hello {{name}}!</p>

在这个例子中,我们使用了插值指令,这个指令会注册一个监听器来监听相应作用域中属性name的变化,并在该属性发生变化时将它实时反应到DOM中。

添加下面的代码,你的name属性将会自动的被赋值为Pascal:

angular.module('myApp', []) 
 .run(function ($rootScope) { 
  $rootScope.name = "Pascal"; 
}]);

 通过上面的代码,我们就成功的使用了插值指令创建了在试图上创建了一个数据绑定。现在,如果name属性发生变化,视图将会自动发生更新。比如说我们添加下面的代码,在按钮点击是修改name的值:

<button ng-click="name = 'Christoph'">Click me!</button>

  此时,点击按钮,我们可以将name的值修改为Christoph,同时我们会触发一个$digest循环来更新DOM中相应的部分。在上面的例子中,你看的知识单向数据绑定。然而,你完全可以使用ngModel指令来将视图中发生的变化实时的反应到模型中。

上面的双向绑定魔法的实现完全依赖于$digest循环,当$digest循环被触发时,AngularJS将会去处理遍历当前作用域和子作用域中的所有监听器,然后通过检查模型中发生的变化来更新DOM中的值,直到模型不再发生变化为止。一旦$digest循环执行完成,浏览器会重新渲染DOM来反应模型数据变化。

 现在,我们大概了解了AngularJS的数据绑定机制,你可能会问我们为何还需要一次性数据绑定。

由于AngularJS使用监听器来实现数据绑定。当监听器越来越多时,可能会出现一些性能上的问题。由于在注册监听器使,同时会注册一个回调函数,以便在$digest循环执行时能够相应的更新视图。也就是说,监听器越多,AngularJS需要处理的回调函数也就越多。

现在假设在视图中有很多值需要被AngularJS处理。比如说像上面使用插值指令来进行数据绑定,虽然我们可能并不想让这个值只绑定一次,比如说上面的Pascal,在应用代码执行的整个过程中这个属性都不会发生改变,但是AngularJS默认依然会在这个属性上绑定一个监听器和回调函数。因此,在$digest时,AngularJS依然会去特意的关注这个值,这实在是有些过头了。

二、一次性数据绑定(One-time bindings)

这就是我们需要一次性数据绑定的原因。在AngularJS的文档中,我们可以清楚的了解到这个新特性的作用:一次性数据绑定表达式可以在数据稳定之后,不需要在$digest循环中重计算…

一次性数据绑定的出现解决了前面提到的由监听器太多带来的性能问题。那么我们应该如何使用一次性数据绑定呢?

使用一次性数据绑定非常的简单,我们只需要在表达式之前加上双冒号::即可。比如,前面我们使用了插值指令将name属性绑定到了视图中:

<p>Hello {{name}}!</p>

使用一次性数据绑定,我们这样写:

<p>Hello {{::name}}!</p>

在AngularJS 1.3版本中,你可以在任何AngularJS的表达式中使用一次性数据绑定。即使在诸如ng-repeat这样严重依赖于双向绑定的指令中,你依然可以使用它。

以上所述是小编给大家介绍的AngularJS中的一次性数据绑定 (bindonce),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
禁止空格提交表单的js代码
Nov 17 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
微信小程序实现电子签名并导出图片
May 27 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 #Javascript
微信小程序 navbar实例详解
May 11 #Javascript
微信小程序 图片宽高自适应详解
May 11 #Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 #Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 #Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 #Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
smarty基础之拼接字符串的详解
2013/06/18 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
刘胡兰的英雄事迹材料
2014/02/11 职场文书
人事部专员岗位职责
2014/03/04 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书