Angularjs中的$apply及优化使用详解


Posted in Javascript onJuly 02, 2018

前言

对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少。不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题。

今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢,真的更新了。

然而,有些时候,编译器会无情的给你返回

Error: $digest already in progress

那么,导致这些现象的原因时什么的呢?$apply究竟干了啥?听我慢慢到来。

一.$apply的作用

$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。

上面是AngularJs权威教程中的一句话。什么意思呢?

首先,你要清楚,在原生js或者第三方框架下,修改model,是有可能不会触发视图更新的,比如setTimeout、jquery插件。为什么?因为他们脱离了Angularjs的上下文,Angularjs并不能监听到数据的改变。看例子。

1.setTimeout

html:

<p>{{name}}</p>

js:

$scope.name="张三";
setTimeout(function(){
$scope.name = '李四';
//$scope.$apply()
},500)

首先,name等于张三,500ms后,我把他赋值为李四,但是,页面上并没有改变,依然是张三。

而,我们把$scope.$apply()放开,就正常了,张三成功变为李四。

2.第三方插件

html:

<p>Date: <input type="text" id="datepicker"></p>
<p>
<header>所选日期</header>
{{selectedDate}}
</p>

js:

$scope.selectedDate = '';
$( function() {
 $( "#datepicker" ).datepicker({
 onClose: function( selectedDate ) {
 $scope.selectedDate = selectedDate;
 // $scope.$apply();
 }
 });
} );

这是jquery的datepicker插件,当我们选定日期后,下面的日期应该随之显现,而现在却没有。这种情况就必须依靠$apply(),才能更新视图。

以上两种情况,都因为不处于Angularjs上下文中,导致监听不到数据的变化。而$apply究竟干了什么,才导致数据更新正常了呢?

其实$apply相当于一个触发器,它的作用就是触发digest循环,从而更新视图。

在digest是Angularjs的核心,是它实现了神奇的数据绑定。凡是触发事件,必会触发digest循环,比如,我们数值的ng事件,click啊,change,实际上都是触发了digest循环。

所以,我们所做的事,其实就是手动触发了digest循环。关于digest循环,属于题外话,这里不做过多介绍,想深入了解的同学,可以看看书籍,或者百度。

二.更好地运用digest循环

在Angularjs中,除了$apply可以触发digest循环外,还有其他的方法,也可以触发此循环。而且$apply往往时最坏的选择。下面推荐一些更好的选择。

1.$digest

$scope.$digest()的速度要比$apply要快,因为它只更新当前作用域和子作用域的值,对于父作用域时不管的。而$apply还要评估父作用域,这就大大消耗了性能。

2.$timeout

用$timeout去代替你的setTimeout,$timeout作为Angularjs的自带服务,当然时更契合Angularjs环境啦。它会隐性触发digest循环,而且它会延迟执行,会在上一个digest循环完成后的下一刻,触发digest循环,这样就不会出现上文所说的

$digest already in progress

我们把setTime的代码放到$timeout中

$timeout(function(){
$scope.name = '李四';
},500)

这就能正常工作了,看,没有讨厌的apply了!

3.$evalAsync

最推荐的应该时这个方法了。如果当前正好有一个digest循环在执行,那么它就会把导致digest循环的操作,放到当前digest循环中去执行。而$timeout是要等到当前digest循环执行完,再执行一次digest循环才可以。所以evalAsync执行更快,性能更好。我们可以像$timeout那样去调用它,即

$scope.$evalAsync(
   function( $scope ) {
   console.log( "$evalAsync" );
   }
  );

以上,就是今天要说的全部内容。Angularjs中还藏着许多奥秘,和更好的使用方法,希望大家可以深入地研究,分享出更好的文章。

下面是可执行的代码,大家可以探究探究:https://codepen.io/hanwolfxue/pen/yEZbYQ

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
angularjs 的数据绑定实现原理
Jul 02 #Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 #Javascript
vue中的数据绑定原理的实现
Jul 02 #Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 #Javascript
jsonp跨域获取数据的基础教程
Jul 01 #Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 #Javascript
关于Vue组件库开发详析
Jul 01 #Javascript
You might like
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php绘制一条直线的方法
2015/01/24 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
Js动态创建div
2008/09/25 Javascript
AngularJS语法详解
2015/01/23 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
js操作二进制数据方法
2018/03/03 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
单位单身证明范本
2014/01/11 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
青年文明号申报材料
2014/12/23 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
python获取对象信息的实例详解
2021/07/07 Python
JavaScript组合继承详解
2021/11/07 Javascript
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记