深入浅析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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
javascript调试说明
2010/06/07 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
Node.js学习入门
2017/01/03 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Python中的pack和unpack的使用
2018/03/12 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Python字符串对象实现原理详解
2019/07/01 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
品牌宣传方案
2014/03/21 职场文书
四群教育工作实施方案
2014/03/26 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
四群教育工作总结
2015/08/10 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL