继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

如何优化在大型 AngularJS 项目(2)

慕的地10843
关注TA
已关注
手记 1081
粉丝 200
获赞 961

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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP