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 相关文章推荐
JavaScript实现拼音排序的方法
Nov 20 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
JSONP跨域请求
Mar 02 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP中的use关键字概述
2014/07/23 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
win与linux系统中python requests 安装
2016/12/04 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
师范生教师实习自我鉴定
2013/09/27 职场文书
七一表彰活动方案
2014/01/18 职场文书
小学五年级学生评语
2014/04/22 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
三峡人家导游词
2015/01/31 职场文书
教师节寄语2015
2015/03/23 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript