gpt4 book ai didi

angularjs - 如果已经存在,Angular 会创建一个新的观察者吗?

转载 作者:行者123 更新时间:2023-12-04 04:16:46 24 4
gpt4 key购买 nike

考虑:

angular
.module('app', [])
.controller('MainController', function($scope) {
$scope.$watch('bool', function(newVal, oldVal) {
});
console.log($scope);
});


<body ng-controller='MainController'>
<p ng-class="{'blue': bool, 'red': !bool}">ngClass</p>
<p ng-show='bool'>ngShow</p>
<input type='checkbox' ng-model='bool' />
</body>

plnkr of above

似乎创建了 3 个观察者:
  • 来自 $scope.$watch .
  • 来自 ngShow .
  • 来自 ngClass .

  • (注意:数据绑定(bind)中涉及的指令 use $scope.$watch 内部。)

    enter image description here

    我会认为,因为他们都在看 bool属性,只有一个观察者,它会有多个监听器回调。

    编辑:它是不是在说,“有 bool 改变了吗?如果是,运行 cb1 。有 bool 改变了吗?如果是这样运行 cb2 。有 bool 改变了吗?如果是这样运行 cb3 。 "还是它在说,“ bool 是否发生了变化?如果是,请运行 cb1cb2cb3。”如果是前者,为什么要超过后者?

    问题:
  • 我的解释正确吗?实际上是否有多个 watch 正在注册?
  • 对性能有何影响?
  • 奖励:如果我的解释是正确的并且正在添加多个观察者,为什么会这样设计?为什么要查找 bool 的更改3次而不是1次?

  • 2) 的示例 - 假设您要确保表单中的两个密码匹配,如果不匹配,则显示错误。假设您已经拥有:
    ng-class="{invalid: myForm.myInput1.$touched && ctrl.myInput1  != ctrl.myInput2}" 

    说你想用 $setValidity更新表格的有效性。这样做可能是个好主意:
    ng-class="{invalid: myForm.myInput1.$touched && ctrl.functionToCheckInputs(myForm)}"

    并调用 $setValidity functionToCheckInputs 内部而不是使用 $scope.$watch$setValidity在里面?因为后者增加了一个额外的观察者(大概)。

    最佳答案

    有多个 $watchers 正在注册。事实上,即使你有 2 个确切的表达式:

    $scope.$watch("foo", cb1)
    $scope.$watch("foo", cb2)

    你仍然会得到 2 个 $watchers。

    要回答您的问题 - 是前一种情况,即“如果 "foo" 表达式更改,运行 cb1 ,如果 "foo" 表达式更改,运行 cb2 等...为什么?因为,任何 $watcher 都可能更改 $scope.foo 的返回值;不仅在回调中,而且在表达式本身中。Angular 每次都需要重新评估表达式以解决这种可能性。

    摘要循环的长度对性能起着重要作用。

    一、是 $watchers 的数量,它会导致被监视的表达式或函数求值。因此,减少 $watcher 的数量,例如更喜欢单向观看而不是双向观看,或者在合适的情况下使用一次性观看,可以提高性能。

    第二 , 是被监视函数的复杂度。这些函数应该非常快——理想情况下,不超过 getter。例如,避免以下情况:
    <div ng-class="{active: isActive(id)}">
    $scope.isActive = function(id){
    for (var i=0; i<items.length; i++){
    if (items[i].id == id && items[0].active) return true;
    }
    return false;
    };

    关于angularjs - 如果已经存在,Angular 会创建一个新的观察者吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31569880/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com