angularjs 性能最佳实践答案

【问题标题】：angularjs performance best practicesangularjs 性能最佳实践
【发布时间】：2015-02-24 11:36:12
【问题描述】：

我采用基于johnpapa style guide 的风格，并且根据 Miško 在 49:44 在Angularjs MTV meetup Best Practices 上的介绍

他说性能取决于两件事：

您有多少绑定。

你得到多贵。（应该快）

我认为这意味着简单和快速。在我的理解中，getter 是指服务中的一种方法。但在我的情况下有点复杂。那么如何让它变得简单呢？我客人不可能改变算法？或者只是在服务中调用内部（私有）函数？生效了吗？

所以这是我的问题：

最佳实践是在服务中的方法上使用 getter，这样就不会导致内存泄漏。

希望有人能给出一个清晰的解释

IIFE 如何工作？

谁能给我解释一下？

IIFE 如何处理工厂内部的函数（服务中的方法）？

它是否也删除了全局变量？即使我使用 var，比如当我们返回工厂时？

【问题讨论】：

标签： javascript angularjs coding-style

【解决方案1】：

您的问题（或多个问题）相当广泛。你在这里混淆和组合了多个概念，但我会尝试解开你。

首先，IIFE。这与 Angular 性能无关。 IIFE 是一种命名全局范围的方法。因此，最好的做法是使用 IIFE，而不是在可能导致冲突的全局范围内公开函数。

var globalObj =
    (function(){
      var privateVar = 5;
      function doPrivateFn(x, y){}

      return {
        publicFn: function(x){ doPrivateFn(x, privateVar) };
      }
    })();

现在，唯一暴露给全局范围的是globalObj，它有globalObj.publicFn()。

第二，IIFE有时会在使用Angular注册服务或控制器时使用，而不是内联匿名函数：.factory("MySvc", function(){}):

(function(){
  angular.factory("MySvc", MySvcFactory);

  function MySvcFactory($http){
    // ...
  }
})();

所有这一切都是在全局范围内隐藏 MySvc 工厂函数 MySvcFactory。

最后，让 getter 快速的重点不是内存泄漏，而是 getter 函数的计算强度。

所以，如果你在表达式中有一个绑定，像这样：

<span>{{getCount()}}</span>

或者这个：

<div ng-show="isShown(item)">{{item.prop}}</div>

这个想法是让这些函数非常快，如果不仅仅是一个 getter：

$scope.isShown = function(item){
  return (item.a || item.b) && $scope.somethingElse;
}

永远不要做这样的事情：

<div ng-show="isUnique(item)">{{item}}</div>

isUnique 执行 for 循环搜索：

$scope.isUnique = function(item){
   for (var i = 0; i < list.length; i++){
     if (item === list[i]) return false;
   }
   return true;
}

因为这个函数会在每个摘要循环中运行，有时甚至会运行多次。相反，计算唯一性并将结果缓存在某处，以便您可以返回它。

【讨论】：