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的威力
Oct 10 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php的curl封装类用法实例
2014/11/07 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
Python中删除文件的程序代码
2011/03/13 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
爽歪歪广告词
2014/03/20 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL