技巧总结

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的概念。

未完待续，持续更新！

chao

微信支付

支付宝