angular开发总结

| Comments

下面是XXX的HTML5版本开发总结。

开发思路

说好是MVVM了,当然和以前也页面为中心进行DOM操作的方式很不一样。这方面可以参考文章:StackOverFlow精彩问答赏析:有jQuery背景的开发者如何建立起AngularJS的思维模式?

开发经验就是,以数据为中心来考虑。我通常是对着高保真,先把所需要的数据结构先构思了,看看接口是如何和数据进行对接的。

不过,即使是以数据为中心的开发模式,逻辑与视图的完全分开几乎是不可能完成的任务,只能尽量的分离。我们需要操作的数据模型,不是真正意义的业务模型,而是视图模型(业务数据和视图数据的混合体)。如果实现上需要更偏重业务模型的话,可能要更多借助于resource的概念(ng也有提供这个),不过对于我们这种过程化的接口,意义不大。

关于Service

因为接口的原因,现在有的Service文件,按规范是一个接口对应一个,而且文件内容除了接口参数和响应结果获取,其他基本上是一样的。

根据接口数据的格式,我有时候会预先在service里边进行格式调整,例如一个带父子关系的列表数据,需要先整理为两层的数据结构,这个我会优先考虑在Service里处理。基本原则就是,如何让数据更贴近业务模型。

关于Controller

因为Service是一个很薄的一层,所以大多的页面流程控制,都是在Controller里边完成的。对于Controller如何组织视图模型,我通常是定义一个总的viewModel,来挂载所有的视图模型,大体上就是:

# 定义视图的数据模型
$scope.viewModel =
  acttypes: null #活动类型
  acts: {} #可选的活动列表数据
  act: null #选择的活动
  levels: [] #可选的档次
  level: null #选择的档次
  rewards: [] #可选的赠品、赠品包

这个做法,有个最明显的好处,就是不容易踩到ng-model的scope的坑,关于angular的scope,请参考文章 Understanding Scopes

关于ngmodel

像上面提到的,使用ngmodel,nginit这种会操作model的指令,需要注意scope的范围,一不小心就可能操作到不同的scope。具体原因请参考上述文章。有几个办法可以处理:

  • 使用$parent,但是对于多层次的scope无效。
  • 采用非原型类型的obj,可以避免scope的意外。如上述的viewModel

大多数情况在我们都是用的单向绑定,如果涉及ng-model这种双向绑定的话,有另外一个文章推荐 Using NgModelController With Custom Directives, 因为这篇文章很好的描述了angular对双向绑定的处理流程。

另外,如果使用html5的验证或新类型,也会有些问题,例如你使用number类型,输入非number类型的内容的话,model获取到的值就无效了。

关于性能

可以参考一下这位UC童鞋的文章 angular性能优化心得

基本上该说的都在上面的了。这里补充一下:

  • bindonce可以减少一些无谓的watch,主要用于ng-repeat上,目前还没使用上,但试过是可用的。
  • 在watch方法里边不能操作dom,并及时unwatch。操作dom对性能影响很大。
  • 像$interval,$timeout虽然有个invokeApply这个参数,却是无效的,这个问题在1.3.0beta14才修复,如果不需要变更模型,建议用原生的。
  • filter因为经常计算,所以要尽量的快,选择合适的数据结构很重要,例如对大列表进行筛选不如key/value的查找快。曾经做过字典结构的调整。
  • 目前项目没有lazy loading的问题,这迟早是需要考虑的,网上已有一些方案,借助了route的resolve特性来实现的。

复杂页面流程

  • 是分单个route还是多个route,主要考虑是否需要独立入口,因为一个route对应一个url。这个主要参考URL的设计原则。
  • 跨页面参数传递,如果参数少建议用路径参数,如果共享数据多,可以使用服务来数据共享。

复杂页面的处理,我主要考虑使用状态机来处理。现在使用statechart.js

关于状态机的介绍,请参考Statecharts and Angular.js

开发工具支持

项目涉及多种工具、概念,需要掌握他们的应用场景:

  • 基础设施 node
  • 包管理 npm
  • 模块化,require,sea,amd,cmd
  • 资源依赖,bower
  • 打包自动化,grunt
  • angular相关 插件batarang
  • 语言改进,coffeescript

特别说明关于coffeescript的使用,上述关于viewModel的代码就是coffeescript,大体上可以减少1/3的代码行。

调试的支持

chrome的调试工具很强大,能够模拟手机操作,基本可以解决大多数问题。

不过真机、webview之类的调试仍然是个大问题。当然方案也是有的,如google官方的android+chrome方案、weinre的方案。 不过,我页面做的少,实在没什么经验可以发表的。

其他

自己对css并不熟悉,主要关注逻辑编写,个人认为和web打交道,还是得多理解http协议,浏览器原理。

Comments