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();
}
});
作者：zidea
链接：https://www.jianshu.com/p/8da7fa280969
共同学习，写下你的评论
评论加载中...
作者其他优质文章
