如何优化在大型 AngularJS 项目（2）

parse 和 $interpolate

优化可以调用 $parse 一次而后将其返回的函数

这个函数可以被$eval调用屡次，如下

• 优化前

for (let index = 0; index < 9999; index++) {$scope.$eval('exp')}

• 优化后

var parsedExp = $parse('exp')for (let index = 0; index < 9999; index++) {parsedExp($scope)}

• 优化前

myApp.directive(function(){return{link:function(scope, element, attr){scope.name = scope.$eval(attr.name);scope.$watch(attr.list, function(list){//代码},true);}}})

• 优化后

myApp.directive(function($parse){return{//这里避免使用 link 由于假如这个 directive在循环体中//使用，这个 link 可能屡次执行，而 compile 仅被执行//一次。compile:function(elem, attr){var nameExp = $parse(attr.name),listExp = $parse(attr.list);return function link(scope, elem){//当要观察一个数组或者对象时，使用 $watchCollection 代替 $watch scope.$watchCollection(listExp,function(list){//代码})}}}})

interpolate 速度快的，尽量作为首选

假如没有必要尽量不要使用 $watch

通常会使用 $watch 来观察一个对象内部深层的属性，假如这样

不要观察整个对象，剥去不论紧要的层，只关注要观察的属性就可

• 优化前

$scope.$watch('listOfBigObjects',myHandler, true);

• 优化后

$scope.$watch(function($scope){return $scope.listOfBigObjects.map(function(bigObject){return bigObject.name.submane;})},myHandler, true)

使用 ng-repeat 时需要使用 track by $index

默认情况(也就是不使用 track by $index 时),ng-repeat 为每个遍历对象

创立一个 dom 节点而后remove后销毁它，

而使用 track by $index 会进创立一次 dom 节点，而后复用它

• 优化前

<div ng-repeat="item in array">{{item}} 创立一个 dom</div>

• 优化后

<div ng-repeat="item in array track by $index">{{item}} 仅创立一个 dom</div>

ng-show 和 ng-if

ng-show接收的一个bool值，当为true的时候就会被触发去展现DOM节点。

当ng-show的值为false的时候，在DOM节点上增加了一个ng-hide的一个类，

这个类的表达式就是“display：none”。

DOM load的时候ng-show里面的所有节点都会被加载。

也就是说，ng-show仅仅是影藏和显示了DOM节点。

也就意味假如油太多的ng-show指令，即便他们不显示，但他们所在的DOM节点还是会被渲染的。

ng-if也接收的一个bool值，当它的值为false的时候，

它所控制的节点并没有被创立或者者说之前的DOM节点会被销毁掉，

哪怕这个节点里面包含了很多ng的绑定都不会去执行。

所以，我们在项目开发中，假如没有必要一次性加载完的dom即可以用

ng-if来阻止ng事件发生，从而也就加快了dom的加载速度。

特别是在repeat的时候，每条数据又包含了复杂的数据结构的时候效果特别显著。

当它的值为true的时候，就会去创立DOM节点。

可以使用仅绑定一次

• 绑定一次

var watcher = $scope.$watch('data', function(newValue, oldValue) {if (newValue) {watcher();}});