AngularJS1.X前端开发总结

技巧总结

1. 在1.x版本使用ES6语法

提前使用ES6语法的好处在于组件化后的兼容性,但是感觉angularJS 1.X版本的设计跟组件化还是有很多出入

使用class进行组织,基本使用三种模块功能即可:directive, service, controller,页面使用controller,后台交互使用service,dom操作使用directive,因此比较关键复杂的是directive的组件化编写

需要注意的是1.4版本后官方都推荐使用controllerAs将scope对象转化为this进行操作,但是angular的设计让这些scope对象很难消除,尚不知意义何在。

参考:

  1. https://github.com/rwwagner90/angular-styleguide-es6

2. directive编写

有两点设计需要注意,一个是compile与link函数,自定义的compile函数里面会在最后返回一个link函数,因此自定义compile函数的意义基本在link函数功能基础上做些前提条件判断,比如引用的组件是否加载,dom是否ready等等,防止link函数中操作dom出现错误。

另一个是处理ng-model绑定所使用的$viewValue与$modelValue区别,调用setViewValue中viewValue->modelValue同步过程会经过$parsers中所有的处理函数($formatters则是反过来)。使用了$apply就会触发$render()函数,因为modelValue的变化,会导致$render触发。

参考:

  1. http://blog.csdn.net/qq_17371033/article/details/49248791

3. $rootScope与通知

所有controller绑定的$scope都可以通过$rootScope来直接访问到ng的最顶层对象,主要是可以从$rootScope调用$broadcast向所有子节点进行广播通知并触发事件。

ng中通知是可以带参数的。使用$on或$watch来监听事件,回调函数为(event,data)。向上通知使用$emit,向下通知使用$broadcast,推荐尽量使用$emit性能更好。通常使用ng的通知机制用来实现无法进行双向绑定的数据绑定情景。

4. 数据绑定方法

双向=、单向@、引用&

指令中实现双向绑定方法:

实现compile方法,返回自定义的postLink方法

使用ngModel.$setViewValue方法将view展示同步到ng的$viewValue数据上面

定义$render方法,实现将ng的$viewValue同步到view展示上

5. service vs factory选择使用

使用ES6语法推荐统一使用service

参考:

  1. https://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

6. controller vs service 存储

推荐使用service做一层web缓存store,controller仅持有引用并不进行修改操作,所有相关操作在service中进行。

7. vuex与service编写

管理组件的内外部状态,特别是多组件的外部状态维护。基本是技巧6的官方解决思路。

问题归纳:查询同一种数据,可能是同步的(缓存中获取),可能是异步的(AJAX获取),业务代码编写需要考虑两种情况。获取数据和数据的更新通知,写法是不同的,会加大业务代码编写的复杂度。每个渲染数据,都是通过若干个查询过程(刚才提到的组合同步异步)组合而成,如何清晰地定义这种组合关系?

AngularJS简单的实现思路:store中保存数据对象的引用,上层业务在查询的时候,持有这个引用,并且不自己修改内容。如果需要修改或者更新远程数据,调用store中封装的修改方法,把数据合并到数据对象中。限制上层不能动引用,万一需要二次加工数据,就歇菜了。

Vuex解决方案:和Redux思想一脉相承,都是Flux 的实现,基本是单向数据流,组件调用action,action分发mutation函数,只有mutation可以修改状态state,状态的变化会在组件内部得到反映。整个应用的状态数据存储在一个单例 store 中,该store底下可以分为多个模块module,在组件内部获取 store 中状态使用getter函数(可以二次加工数据),对外则提供mutation(同步执行)和action(异步执行)方法来改变state信息,比如在action中可以发起后端请求,mutation处理本地缓存。

参考:

  1. vuex常见QA
  2. 前端如何更好的实现接口的缓存和更新? – 徐飞的回答 – 知乎
  3. 流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑

疑难杂症

1. 有的时候你发现明明scope的数据已经改了,但你发现View并没有更新。

这是因为你可能在setTimeout、异步请求等里去修改数据,但此时AngularJS并不知道数据已经变了,不会帮你调用digest循环,所以你需要手动调用$apply。目前一些指令(例ng-click、ng-model)以及服务(例$timeout、$http)被调用时会自动触发一次$digest循环,这些就不用手动调$apply。涉及$watch、$digest、$apply的概念。

未完待续,持续更新!

 

提交看法

抢沙发

还没有评论,你可以来抢沙发