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 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
js工具方法弹出蒙版
May 08 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
JavaScript实现队列结构过程
Dec 06 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php Static关键字实用方法
2010/06/04 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python生成带有表格的图片实例
2019/02/03 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python绘制动态水球图过程详解
2020/06/03 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
会计实习生自我鉴定
2013/12/12 职场文书
单位单身证明范本
2014/01/11 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
大客户经理岗位职责
2015/04/09 职场文书
施工安全保证书
2015/05/09 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python