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 相关文章推荐
基于jquery的3d效果实现代码
Mar 23 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
vue项目中用cdn优化的方法
Jan 03 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
js中this的指向问题归纳总结
Nov 28 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
JS数组方法reduce的用法实例分析
Mar 03 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 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
小程序实现搜索框
2020/06/19 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python实现音乐下载器
2018/04/15 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
小加工厂管理制度
2014/01/21 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
校庆口号
2014/06/20 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Go 语言结构实例分析
2021/07/04 Golang