大家好，我是IT修真院北京分院第27期学员，一枚正直善良的前端程序员今天跟大家分享一下前端知识点。
今天讲下深度思考中的知识点
————angular之中，$state $watch $scope $rootScope 分别是什么？
1.背景介绍
在平时的编码中，我们总会想着有什么方法能够简化我们的工作流程，让我们只专心于业务逻辑和数据的处理，而angularjs就为我们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法，今天着重跟大家讨论一下这几个方法。
2.知识剖析
$scope
$scope在angularjs中，你可以把它理解成作用域，每个不同的controller，都具有它不同的作用域，所以controller不同，他们的scope是不同的，那么，如果我们想象js那样，做一个全局变量该怎么办呢？这就要说到rootScope了。
$rootScope
$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope;
$rootScope就相当于一个全局作用域，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。
$watch
相信使用过angularjs的同学都知道，ng中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？当我们在创建出scope下的一个新属性的时候，ng就会主动为我们新属性加上$watch这个方法，这个方法会监听我们的数据变化，当数据变化之后，就立即把view和scope上数据同步。虽然angular会为每一个ng-model添加一个$watch事件，但我们还可以定义自己的$watch，所以需要了解一下$watch的用法；
$watch(watchExpression, listener, objectEquality);
watchExpression:监听的对象，它可以是一个angular表达式如'name',或函数如function();注意如果是函数的话，需要加上（）不能只写函数名；listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)。objectEquality,是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。
$state
$state是路由中的一项服务,简单来说就是给路由一个对应的状态，让其根据不同的状态加载不同的页面；
$stateParams
$stateParams是一个对象，包含 url 中每个参数的键/值。$stateParams可以为控制器或者服务提供 url 的各个部分。注意：$stateParams必须与一个控制器相关，并且$stateParams中的“键/值”也必须事先在那个控制器的url属性中有定义。
3.常见问题
watch的深度监听是什么意思呢？有什么优缺点呢？
4.解决方案
$watch在对待基本类型和引用类型会有不同的处理方式，这就要首先说一说$watch函数的第三个参数。它在默认情况下是false。在默认情况下，即不显式指明第三个参数或者将其指明为false时，我们进行的监视叫做“引用监视”。引用监视的原词的“reference watch”，它的意思是只要监视的对象引用没有发生变化，就不算它发生了变化。具体来说，在上面的例子中，只要是items的引用没有发生变化，就算items中的一些属性发生了变化，$watch也会当做没有看见。
如果我们将$watch的第三个变量设置为true，那么此时我们进行的监视叫做“全等监视”，原词是“equality watch”。此时，只要$watch的对象有一点风吹草动，它马上就跳出来。既然全等监视这么好，那么我们为什么不直接用全等监视呢？当然，任何事情都有好的坏的两个方面，全等监视固然是好，但是它在运行时需要先遍历整个监视对象，然后在每次$digest之前使用angular.copy()将整个对象深拷贝一遍然后在运行之后用angular.equal()将前后的对象进行对比，但是到了实际生产时，我们要面对的数据千千万万，可能因为全等监视这一个设置就会消耗大量的资源，让应用停滞不前
5.扩展思考
怎么取消$watch，为什么取消？
$watch的性能消耗较大，所以对于已经不需要监视的watch，记得定时取消掉。
6.参考文献
参考二：关于$watch应用的一些小技巧
参考三： AngularJS $watch用法
7.更多讨论
Q1：提问人：陈树威
A1：回答人：李浩
回答：这个比较详细的介绍了原理；
构建自己的AngularJS，第一部分：Scope和Digest
https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md
Q2：提问人：张峻
A2：回答人：李浩
回答：
Q3：提问人：梁耀
A3：回答人：李浩
回答：$state.params里的params是自己定义的，可以写成listParams，optionparams等
$stateParams是angular定义的固定写法；
个人拙见，多多指教
感谢阅读
github-PPT链接
https://ptteng.github.io/WEB/ppt/js-7-$state$watch$scope$rootscopeseelee.html
腾讯视频链接
https://v.qq.com/x/page/a0525z176nr.html
-----------------------------------------------------------------------------------------------------------------------------------
人生苦短，想学Python。
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论