AngularJS1.3框架使用技巧总结

有人说angular1.3是个过时的东西，建议使用angular2。其实这种说法很像拿jQuery1.x和jQuery2.x做比较，新的版本当然会有优化优势的地方，但并不一定是最适合你项目的。当你项目必须支持IE6/7/8时，那又得使用jQuery1.x版本。所以不要以新不新去选择一个框架或者某个版本，而是看是不是适合的。当初用angular1.3是他比较成熟有配套的文档，而angular2的文档是不健全的，另外有一点是1.x与2.x的区别太大了，两者的用法没有继承性。更重要的是，目前的angular2只有Alpha版本（测试），并没有一个正式版本。

性能。有人说angular2的性能会比较好，我还没有用过，不做什么评论。但对于angular1.x，我确实是不放心它的性能的，作为PC Web我敢用angular，但在移动终端我不敢用，在我看来无论从框架体积或框架运行效率，在脆弱的移动端都是致命的。有一些基于angular做的Hybrid框架（例Ionic）,希望使用过的人能告诉我它体验怎么样（性能上）。
 
一些技巧

这篇文章记录一些angular1.3的小技巧，angular2我会找个时间做个实践。

1. ng-repeat多个字段排序的写法

使用orderBy过滤器，第一个参数是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），第二个参数是正序还是倒序（默认是正序）。

ng-repeat="groupUser in groupUsers | orderBy:['isOwner','isAdmin']:true"

 
2. ng-include引入HTML片段

使用ng-include，第一个参数是页面的相对地址的字符串。应该注意，是一个字符串，不是ng-expression，所以不要忘了加单引号，否则会发现怎么都引不进这个HTML片段。

 
3. ng-bind的$scope对象没有随着数据变化而变化

自己实现的ajax，获取数据后，设置到$scope上，view却没有更新。这其实就是angular双向数据的原因，angular不可预见的scope变化，是不会帮忙刷新view的（例$.ajax或setTimeout）。解决方法就是，数据设置到$scope上后，手动调$scope.$apply();。

PS：一些指令（例ng-click、ng-model）以及服务（例$timeout、$http）才会自动刷新view。
 
4. 移动触摸（Touch）事件

angular-touch模块提供了触摸的事件和其他手势ngSwipeLeft、ngSwipeRight。
 
5. ng-bind-html的内容无法正常的显示在页面中

使用ng-bind-html属性，该属性依赖于$sanitize，也就是需要引入angular-sanitize.js文件。但会发现ng-bind-html的内容无法正常的显示在页面中，这是因为某些标签会被angularJS认为是不安全的自动过滤掉，而为了保留这些表情就需要开启非安全模式。



 

myApp.filter('trustHtml', function ($sce) {
    return function (input) {
 
        return $sce.trustAsHtml(input);
    }
});

其中$sce是angular自带的安全处理服务，$sce.trustAsHtml(input) 返回的是受信任的对象。
 
6.  如何划分一个module

我的想法是在关系比较密切（业务逻辑）的页面可以划为一个module，因为页面可能存在共用service或template或directive（controller不共用），而这些元件归属于同个module，我们就可以不同页面调用了。而不想关的页面可划分为另一个module，增加代码的清晰度。
 
7. 是否要把工具类弄成service

在弄工程之前，我会考虑到是否要将一些工具类封装成一个service（为了看起来代码统一），但我发觉是没有必要的，因为service是归属于某个模块的，而我们的工具类可能在不同模块都有使用，不归属于某个模块。把工具类当成一个jquery的库引入即可。
 
8. 配合RequireJS使用

angular没有异步加载模块的功能，所以使用配合RequireJS使用的效果还是不错的。在这里面有些异议的是对于模块定义的地方，是该把一个模块定义成RequireJS的模块还是angular的服务（可以依赖注入），我觉得还是功能归属的问题，如果是全局使用的工具服务，就定义成RequireJS模块，而如果是与模块密切相关的业务逻辑就使用服务。

PS：可在RequireJS的config加上urlArgs，可以避免缓存问题。

urlArgs: "bust=" +  (new Date()).getTime()  //可用来清理缓存，在部署到生产环境去掉。

 
9. iframe打开跨域URL时报错



如果不做处理，上面的跨域URL是打不开的， 需要定义白名单。


myApp.config(function($sceDelegateProvider) {
        $sceDelegateProvider.resourceUrlWhitelist([
            // Allow same origin resource loads.
            'self',
            // Allow loading from our assets domain.  Notice the difference between * and **.
            "https://link.bingosoft.net/**"]);
 });


 
10. 使用其他Controller的scope的属性方法

先声明我并不清楚我的用法是否恰当。使用其他Controller的scope局限于其parent scope，而不是任何Controller的都可以访问。scope有个属性$parent， 通过这个属性可以找到某一层Controller的scope。

var parentScope = $scope.$parent.$parent.$parent;

PS：多少层$parent是我打印scope对象出来找的。

angularjs的一些优化小技巧

关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的.

ng简介

angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析.

ng的硬伤

说到硬伤就要先说下它的简单的数据绑定原理

ng里每个页面上定义的model其实都会在当前作用域下添加一个监听器,内部容器就是$$wachers数组,只要页面任何一个model发生变化了,就会触发作用域内部$digest方法,它会依次查找当前作用域树里的所有model,是保证页面上的模型能得到数据同步,所以这个是非常消耗程序时间的,官方的说法就是当页面上出现2000个监听器时,页面性能就会明显下降.所以要提高ng的性能,就要从这方面入手了.

tip1: 一次绑定

其实这个网上别人已经说过了,这里说下新的用法,ng的1.3.0+的版本已经内置提供了一个语法来支持模型只绑定一次的情况,看下面的例子:

old code

hello

new code


hello

可以看到新的语法就是在model前面加上::,相信这个语法要比网上用的第三方插件要方便的多了.

tip2: $scope.$digest vs $scope.$apply

相信很多人对$apply方法不陌生,它一般用在,当不在ng的环境里执行代码的时候,为了保证页面的数据同步,在代码执行完成之后调用$apply方法会触发内部$digest来检查作用域里所有的模型,其实在它的内部是这样调用的,下面只写出一些代码片段。


...
...
$rootScope.$digest
...
...

所有它其实是调用$rootScope根作用域下的$digest,那么不同作用域下的$digest有什么区别呢?其实最重要的区别就在于

$digest 只深度查找调用方下面所有的模型

所以$scope跟$rootScope相比,要节省掉很多查找模型的时间.

不过想要保证页面上所有模型数据的同步,还是得调用$rootScope的,所以在写代码之前最好想想哪些数据是要同步变化的.

tip3: 尽可能少调用 ng-repeat

ng-repeat默认会创建很多监听器,所以在数据量很大的时候,这个非常消耗页面性能,我觉的只有在当需要经常更新数据列表的时候才需要用ng-repeat,要不然放那么多的监听器在那里也是浪费,这时候可以用ng自带的$interpolate服务来解析一个代码片段,类似于一个静态模板引擎,它的内部主要依赖ng核心解析服务$parse,然后把这些填充数据之后的代码片段直接赋给一个一次性的模型性就可以.

tip4: 尽量在指令里写原生语法

虽然ng提供了很多的指令比如ng-show,ng-hide,其实它们作用就是根据模型的true,false来显示或隐藏一个代码片段,虽然能够很快速的实现业务要求,但是这些指令还是默认会添加监听器,假如这些代码片段存在于一个大的指令里面时,更好的方法是在指令link里编写.show(), .hide()这些类似的jq方法来控制比较好,这样可以节省监听器的数量,类似的还有自带的事件指令,这些其实都可以在外围指令里通过使用addEventListener来绑定事件,反正在写代码之前,最好想想怎么样来使监听器的数量最少,这样才能全面的提高页面性能.

tip5: 页面内尽量少用filters

当在页面内的模型后面增加filter时,这个会造成当前模型在$digest里运行两次,造成不必要的性能浪费.第一次在$$watchers检测任务改变时;第二次发生在模型值修改时,所以尽量少用内联时的过滤器语法,像下面这样的非常影响页面性能

推荐使用$filter服务来调用某个过滤器函数在后台,这样能明显的提高页面性能,代码如下

$filter('filter')(array, expression, comparator);

总结

上面都是些提高ng项目性能的一些小技巧,虽然ng很强大,但是不规范的代码也会破坏它的性能,所以在写代码之前最好构思下哪些地方是不需要监听器的.