ANGULAR之中，$STATE $WATCH $SCOPE $ROOTSCOPE 分别是什么？

于 2019-06-03 20:31:46 发布
阅读量302 收藏
点赞数 1
分类专栏： 前端零基础 修真院前端小课堂 文章标签： angular $STATE $WATCH  $SCOPE $ROOTSCOPE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jnshu_it/article/details/85195651
版权
这篇博客介绍了AngularJS中的关键概念，包括$state（状态管理）、$watch（数据监听）、$scope（控制器作用域）和$rootScope（全局作用域）。$scope用于数据绑定，$rootScope作为全局作用域，$watch实现双向绑定并监控数据变化，$state则涉及视图导航。文章还探讨了$watch的深度监听及其性能影响，并提醒在不再需要时取消$watch以优化性能。
摘要由CSDN通过智能技术生成

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【ANGULAR之中，$STATE $WATCH $SCOPE $ROOTSCOPE 分别是什么？】

大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下，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检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

3.常见问题

watch的深度监听是什么意思呢？有什么优缺点呢？

4.解决方案

      $watch在对待基本类型和引用类型会有不同的处理方式，这就要首先说一说$watch函数的第三个参数。它在默认情况下是false。在默认情况下，即不显式指明第三个参数或者将其指明为false时，我们进行的监视叫做“引用监视”。引用监视的原词的“reference watch”，它的意思是只要监视的对象引用没有发生变化，就不算它发生了变化。具体来说，在上面的例子中，只要是items的引用没有发生变化，就算items中的一些属性发生了变化，$watch也会当做没有看见。如果我们将$watch的第三个变量设置为true，那么此时我们进行的监视叫做“全等监视”，原词是“equality watch”。此时，只要$watch的对象有一点风吹草动，它马上就跳出来

       既然全等监视这么好，那么我们为什么不直接用全等监视呢？当然，任何事情都有好的坏的两个方面，全等监视固然是好，但是它在运行时需要先遍历整个监视对象，然后在每次$digest之前使用angular.copy()将整个对象深拷贝一遍然后在运行之后用angular.equal()将前后的对象进行对比，但是到了实际生产时，我们要面对的数据千千万万，可能因为全等监视这一个设置就会消耗大量的资源，让应用停滞不前

5.编码实战

6.扩展思考

怎么取消$watch，为什么取消？

$watch的性能消耗较大，所以对于已经不需要监视的watch，记得定时取消掉。

7.参考文献

参考一：Angular.js中使用$watch监听模型变化

参考二：关于$watch应用的一些小技巧

参考三：AngularJS $watch用法

8.更多讨论

鸣谢

感谢大家观看

BY : 汤特/郭婷婷

PPT链接：https://ptteng.github.io/PPT/PPT/js-05-$watch.html

视频链接: https://pan.baidu.com/s/1hs5rExI 密码: gm2z

IT修真院
关注
专栏目录
博客
IT行业都有哪些职位，初学者如何选择才能够快速进入这个行业？
05-14 2万+
【本人性格不好，被惹到了必然句句带脏字，所以评论中如果有不开眼的，请慎重。另外，这篇回答从头到尾都是我自己的个人偏见，绝对不客观，也绝对不会为本答案负责。所以，有自己正常思维的请不要再看下去了。】互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型？1.产品2.UI3.CSS...
博客
什么是无人教学
04-13 699
欢迎来到IT修真院，来了解这种极具开创性和颠覆性的无人教学模式。在无人教学的模式中，并没有老师的角色，而是用一套智能教学的系统来代替“老师授课，学生听课”的方式，是的，我们通过任务分配的方式，让学员在完成任务的过程中主动学习。把被动听课，改成主动学习，仅仅是一个开始，要完善这种学习模式，还需要完善以下的教学体系：1 界定技能边界，确保能达到正式工作的要求2 分解任务，保证所有的任务都来自真实项目3 明确验收标准，来确定任务能否通关4 提供操作步骤，引导学员按步骤完成学习...
博客
Vue 骚技巧，策略模式实现动态表单验证
07-23 1012
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。关键是策略的实现和使用分离。注意：本文可能用到一些编码技巧比如 IIFE（Immediately Invoked Function Expression, 立即调用函数表达式），ES6 的语法 let/const、箭头函数、rest 参数，短路运算符 等，如果还没接触过可以点击链接稍加学习 ~1...
博客
由浅入深，66条JavaScript面试知识点
07-22 1359
钱昱多年前端工作经验 《JavaScript 设计模式精讲》 作者，主要分享前端方面技术博客公众号：前端下午茶HTML&CSS： 浏览器内核 盒模型、flex布局、两/三栏布局、水平/垂直居中； BFC、清除浮动； css3动画、H5新特性。 JavaScript： 继承、原型链、this指向、设计模式、call, apply, bind,； new实现、防抖节流、let, var, const 区别、暂时性死区、eve...
博客
进击的 JAMStack
07-21 696
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站什么是JAMStack概念JAMStack中的JAM其实是三个词的缩写，它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈（Tech Stack），也就是我们在构建应用的时候具体使用到的技术的集合。举个例子，国外现在比.
博客
Vue.js 组件复用和扩展之道
07-20 820
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站软件编程有一个重要的原则是 D.R.Y（Don't Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？Vue 提供了不少 API 和模式来支持组件复用和扩展，你.
博客
深入理解Java的接口和抽象类
07-17 592
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会对于面向对象编程来说，抽象是它的一大特征之一。在Java中，可以通过两种形式来体现OOP的抽象：接口和抽象类。这两者有太多相似的地方，又有太多不同的地方。很多人在初学的时候会以为它们可以随意互换使用，但是实际则不然。今天我们就一起来学习一下Java中的接口和抽象类。一、抽象类　 在了解抽象类之前，先来了解一下抽象方法。抽象方法..
博客
一篇文章了解并发数据结构
07-16 704
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会CopyOnWriteArrayList的内部实现与Vector不同。它是当对象进行写操作时，复制该对象；若进行的是读操作，则直接返回结果，操作过程中不进行同步。CopyOnWriteArrayList很好地利用了对象的不变性，在没有对对象进行写操作前，由于对象未发生改变，因此不必加锁。而在试图改变对象时，总是先获取对象的一个副本，然后对副本.
博客
Java 8 最佳技巧
07-15 565
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会在过去的几年中，我一直使用Java 8 进行了很多的编码工作，用于开发新应用和迁移遗留应用，我觉得是时候写一些有用的”最佳实践”。我个人不喜欢”最佳实践”这个术语，因为它意味着“一刀切”的解决方案，当然编码工作是不会这样的–这是因为我们开发人员会想出适合我们的方案。但我发现我对Java8特别的喜欢，它让我的生活更轻松一点，所以我想就此话..
博客
Java多线程编程基础三（原子性，可见性和有序性）
07-14 577
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在并发编程中，我们通常会遇到以下三个问题：原子性问题，可见性问题，有序性问题。一、原子性即一个操作或者多个操作，要么全部执行并且执行的过程不会被任何因素打断，要么就都不执行。原子性就像数据库里面的事务一样，他们是一个团队，同生共死。...
博客
史上最全的 JavaScript 模块化方案和工具
07-13 665
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站模块化是大型前端项目的必备要素。JavaScript 从诞生至今，出现过各种各样的模块化方案，让我们一起来盘点下吧。IIFE 模块默认情况下，在浏览器宿主环境里定义的变量都是全局变量，如果页面引用了多个这样的 JavaScript 文件，很容易造成命名冲突。/.
博客
10 个很实用的 JavaScript 技巧
07-09 613
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站编程语言通常暗藏着各种技巧，熟练使用这些技巧可以提高开发效率。JavaScript 就是一门技巧性很强的语言，掌握常见的语法技巧不但可以加深对语言特性的理解，还可以简化代码，提高编码效率。本文分享 10 个常用的技巧，希望能成为你的开发工具箱的一部分。1argument.
博客
五分钟了解浏览器工作原理
07-08 791
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站Web 浏览器无疑是用户访问互联网最常见的入口。浏览器凭借其免安装和跨平台等优势，逐渐取代了很多传统的富客户端。Web 浏览器通过向 URL 发送网络请求来访问 Web 服务器资源，并以交互性的方式展示这些内容。基本操作包括获取、处理、显示和存储。常见的浏览器包括..
博客
前端必备基础知识：window.location 详解
06-19 3081
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站前端开发人员对window.location对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。我们以一个常见的 URL 为例，看看window.location包含哪些属性和方法。window.location.hre..
博客
ES6 箭头函数大起底：熟知这几个特点让你少踩很多坑
06-18 600
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站我们都知道，在 JavaScript 里定义函数有多种方式。最常见的是用function关键字：//函数声明functionsayHi(someone){return`Hello,${someone}!`;}//函数表达式consts...
博客
Java原子类实现原理分析
06-11 551
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在谈谈java中的volatile一文中，我们提到过并发包中的原子类可以解决类似num++这样的复合类操作的原子性问题，相比锁机制，使用原子类更精巧轻量，性能开销更小，本章就一起来分析下原子类的实现机理。悲观的解决方案（阻塞同步）我们知道，num+
博客
详解Spring Retry实现原理
06-09 863
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记本文通过一个简单的例子演示Spring Retry的实现原理，例子中定义的注解只包含重试次数属性，实际上Spring Retry中注解可设置属性要多的多，单纯为了讲解原理，所以弄简单点，关于Spring Retry可查阅相关文档、博客。注解定义
博客
五分钟了解CDN
06-05 585
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记一、什么是CDN？CDN全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础.
博客
HTML5基本布局
06-04 633
作者简介：杨老师10年前端工作经验，主要分享：前端、UI设计、平面等。公众号：web前端开发HTML4HTML5<!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header><h1></h1><h2&gt.
博客
HTML5的22小技巧
06-03 527
作者简介：杨老师10年前端工作经验，主要分享：前端、UI设计、平面等。公众号：web前端开发1. 新的文档类型（Doctype）<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>上面这个既麻烦又难记的XHTML文档类型你还在使用吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值