Angularjs全局变量被作用域监听的正确姿势


Posted in Javascript onFebruary 06, 2016

如果你只想知道结论:

$scope.$watch($rootScope.xxx,function(newVal,oldVal){
//do something
})

马上就有人问为什么不是:

$rootScope.$watch("xxx",function(newVal,oldVal){
//do something
})

从我最近的一个bug来说说为什么要用第一种方式。

逻辑如图,一开始我使用了 $rootScope.$watch 的写法。因为 angularjs 在 $rootScope 上的 watch 一旦注册全局有效。而我的这个全局变量恰好是订单信息,也就是说不同的 controller 对他都是有改动的,每一次改动就会触发 $rootScope.$watch 进入别的 controller。可以类比看一下 $rootScope 上的 $broadcast 会全局出发的。

其实这并不是唯一的方式,查一下angular 源码不难找到 watch 方法源码不分有如下代码:

return function deregisterWatch() {
if (arrayRemove(array, watcher) >= 0) {
incrementWatchersCount(scope, -1);
}
lastDirtyWatch = null;
};

这段代码告诉我们,手动清理 watch 是可行的。例如:

var watcher = $rootScope.$watch("xxx",function(){});
//手动清除 watcher 
watcher();

还是很简单对吧,以上方法同样可以用于 scope 上的 watch。

研究到这里的时候,觉得有点问题,那我在 $scope 会被清理么?于是呼,继续翻源码,我在 $destroy 方法里面找到如下代码:

// Disable listeners, watchers and apply/digest methods
this.$destroy = this.$digest = this.$apply = this.$evalAsync = this.$applyAsync = noop;
this.$on = this.$watch = this.$watchGroup = function() { 
return noop; 
};
this.$$listeners = {};

以上代码是本文给大家介绍的Angularjs全局变量被作用域监听的正确姿势,希望大家有所帮助,本文写的不好还请各位大侠多多指教。

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
七个很有意思的PHP函数
May 12 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
vuex与组件联合使用的方法
May 10 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 #Javascript
简介AngularJS中$http服务的用法
Feb 06 #Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 #Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 #Javascript
详解Angularjs filter过滤器
Feb 06 #Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 #Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 #Javascript
You might like
使用PHP Socket写的POP3类
2013/10/30 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python绘制简单彩虹图
2018/11/19 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
大专生的学习自我评价
2013/12/04 职场文书
家长给小学生的评语
2014/01/30 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
领导离职感言
2015/08/03 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
5行Python代码实现一键批量扣图
2021/06/29 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android