美文网首页IT修真院-前端我爱编程
angular之中,$state $watch $scope $

angular之中,$state $watch $scope $

作者: 阿布_0caf | 来源:发表于2017-07-28 20:59 被阅读161次


    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.编码实战

    demo1

    6.扩展思考

    怎么取消$watch,为什么取消?

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

    7.参考文献

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

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

    参考三:AngularJS $watch用法

    8.更多讨论

    1.$rootScope是否可以替代$scope?

    可以,但是不建议这样用,相当于js中的全局变量,定义过多会导致全局污染;

    2.数组深拷贝当中的slice()的用法:

    slice()能够基于当前数组中的一个或则多个项创建一个新数组;

    该方法可以接收1-2个参数,在只有一个参数的情况下,该方法返回引用数组的所有项,两个参数的情况下,该方法返回起始和结束位置之间的(但是不包括结束项)所有项;

    3.$stateParams如果没有用url接收会怎样?

    如果没有在url里面接收,会导致再次提取$stateParams中的数据的时候,会找不到该数据;$stateParams对象中根本就没有该属性;


    相关文章

      网友评论

        本文标题:angular之中,$state $watch $scope $

        本文链接:https://www.haomeiwen.com/subject/xpbflxtx.html