Angular的一些坑

Posted 2022-12-07 骆宏

经过一段时间的摸索，将angular的一些坑记录下

 

1.模块化加载机制，angular默认是需要加载所有的js的，所以会导致首页加载的js非常多，哪怕压缩后，也不容忽视，可以高达2M+

2.ng-show和ng-if的区别，从视觉效果出发，两者都是隐藏dom，但是ng-show的dom还会存在，而ng-if则直接不会生成dom，所以尽可能选用ng-if

3.使用ng-repeat时，需要加track by xxx，避免angular给每个item默认生成一个hashCode

4.angular ui-router在url越来越多时，表现会越来越慢，在手机等浏览器会更为明显

5.封装angular时，封装时要记得保留angular的模板特性，切忌！！！不可按照jQury插件的方式去封装

6.angular在绑定过多的watch时，会出现一些性能问题，如果可能，那么考虑去掉一些没必要的双向绑定，修改为:xxx单向绑定的语法

7.angular无法检查双向绑定的结束时间点，配合第三方的工具时，会潜在的导致功能实现的问题。比如jQuery插件，因为需要依赖dom，所以需要使用timeout的方式来处理

8.angular.module('xxx')与angular.module('xxx', [])的意义不相同，angular.module('xxx', [])定义一个模块，angular.module('xxx')获取一个模块

 

 

目录结构的组织，尽量使用模块化的方式来组织，可以参考下面的目录结构

app

    |-- directive

    |        |----– aDirective.js

    |        |----– bDirective.js

    |        |------ cDirective.js

    |-- service

    |        |----– aService.js

    |        |----– cService.js

    |--  lib

    |        |------ aLib.js

    |        |------ bLib.js

    |-- filter

    |        |------ aFilter.js

    |        |------ bFilter.js

    |-- moduls

    |        |------- moduleA

    |                     |--------- moduleA.html

    |                     |--------- moduleA.js

    |        |------- moduleB

    |                     |--------- moduleA.html

    |                     |--------- moduleA.js

这里面我们将filter，service，directive全部集中在一起，lib为第三方依赖的js代码