angularjs - 以 Angular 保护观察者？ (ng-重复 POV)

Question

我已经知道如何处理 ng-repeat 性能问题(使用观察者)的常见模式，例如:one-time-bind、无限滚动、等等。

但是我看到了这个answer一个建议转向指令的人。

好吧，我从简单的旧方法开始

Approach #1's plunker:

使用此 html 的 100 个项目:

  <div ng-repeat="e in ct.arr">
      <div class='s'> 
        <span >name:{{e.name}} , age:{{e.age}} , height:{{e.height}}</span>
      <hr>
  </div>

这将产生 301 观察者，当我单击按钮时，我可以更改第 5 项:

然后我考虑将其移动到指令(就像那个人建议的那样):

Approaches #2's plunker

现在 HTML 是:

 <div ng-repeat="e in ct.arr">
     <div class='s'> 
        <span  my-event="e" ></span>
      <hr>
    </div>
  </div>

指令:

.directive('myEvent', function() {
  return {
    scope: {
      event: "=myEvent"
    },
    link: link,
   }

  function link(scope, element, attrs) {
     var ev = scope.event;
     element.text('name:'+ev.name +', age:'+ev.age+' , height:'+ev.height)
  }
});

现在我的观察者数已减少到 101，但现在该按钮没有影响:

问题:

1. 如果我是对的，那么 100 个观察者是因为通过 '=' 隔离作用域的直接别名。但如果它是项目的直接别名，为什么我在单击按钮后看不到修改？

2. 如果我想查看修改，我是否会被 301 观察者困住？还有什么是我没有想到的 - 可以做到吗？

Answer 1

就像 Alainlb 所写的那样，您只在创建时计算内容一次。当然，就像您在评论中所写的那样，使用 template :'<span>name:{{event.name}} ,age:{{event.age}} , height:{{event.height}} </span>'添加 watch (每个 {{ ... }} 都是幕后的 watch )。

首先想到的解决方案是对指令的项目进行监视。深度观察要具体一些，这样它才能检测到对象属性的变化，而不仅仅是实际对象引用的变化:

function link(scope, element, attrs) {
    scope.$watch('event', function(ev) {
        element.text('name:' + ev.name + ', age:' + ev.age + ' , height:' + ev.height);
    }, true);
}

http://plnkr.co/edit/marpxMx5qin7mOlFwp3X?p=preview

得分:201 次观看

但我们可以做得更好；由于我们是手动观看，=范围绑定(bind)现在是多余的。哦，然后是scope: {}配置为空；我们甚至可以没有范围，既不是孤立的，也不是新原型(prototype)继承的。让我们使用scope: false (它每次迭代保存 1 个作用域对象，对于多次迭代来说是一个很好的增益)。

我们现在直接观察 my-event 中给出的表达式属性:

.directive('myEvent', function() {
    return {
        scope: false,
        link: link,
    };

    function link(scope, element, attrs) {
        scope.$watch(
            attrs.myEvent,
            function(ev) {
                element.text('name:' + ev.name + ', age:' + ev.age + ' , height:' + ev.height);
            },
            true
        );
    }
});

http://plnkr.co/edit/lvnIQCJMnniFlOeRseaZ?p=preview

得分:101 次观看

<小时/>

有一个问题:深度监视产生的监视较少，但它们更昂贵，因为它们会迭代被监视对象的每个属性。因此，真正的性能提升可能并不像看起来那样——101 block watch vs 301 block watch 。我们能做得更好吗？

在尝试之前，我会首先测量 101 深度 watch 和 301 简单 watch 之间的实际性能差异。如果可以忽略不计，我们就可以了。否则，我们可以使用 Javascript 属性 getter 和 setter 在更新中变得“更智能”，并且可以在对象上手动设置脏标志。这会很复杂。

更好的方法是永远不更改对象的内部属性(将其视为不可变 - 一般来说是个好主意)并更改引用本身。 IE。做:

vm.c10 = function (){
    this.arr[4] = {
        name: "aaaa",
        age: "aaaa",
        height: "aaaa"
    };
};

然后你不再需要深入观察(从 , true 的参数中删除 scope.$watch )。如果您可以强制执行对象不可变的约定(Immutable.js任何人？)，您单独工作，或者团队(现在和将来)对此约定有良好的沟通和理解，那么这种方法效果最好。否则就会出现邪恶的错误。