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 相关文章推荐
jquery 实现返回顶部功能
Nov 17 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php中define用法实例
2015/07/30 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
前端性能优化建议
2020/09/17 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python中http请求方法库汇总
2016/01/06 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
学徒工职责
2014/03/06 职场文书
培训讲师岗位职责
2014/04/13 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
个人简历求职信范文
2015/03/20 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
创业计划书之游泳馆
2019/09/16 职场文书