速记：SFDC 2016 - Worktile 贺天卓 《使用AngularJS构建RIA前端架构实践》.docx

主题：2016杭州开发者大会—前端分会场 时间：2016年12月10日下午1：40 会场主持人：独立开发者(时光相册) 郭宇 议题：《使用AngularJS构建RIA前端架构实践》 讲师：Worktile 贺天卓 贺天卓：大家好，接下来由我跟大家分享一下AngularJS构建RIA前端架构。 我是Worktile的前端架构师，做前端也有十年了，做过各种各样打杂的活。首先做一个小小的调查，大家都是做前端的吗，举手示意一下。做偏应用一点的，有一些复杂交互的前端同学举手，OK，大概也有不少。用过AngularJS的举手，OK，我知道了。这个牵涉到一个问题，只有45分钟，AngularJS的知识概念又非常多，我需要根据现场大家的情况调节讲的速度。 首先讲一下什么是富应用，了解一下AngularJS，我们Worktile在这三年里用AngularJS的一些经验。包括更好的AngularJS，优化它的性能各方面的东西。 首先什么是富应用，富应用还有一种说法是单页应用，总体来说比资讯性网页有更高的交互性，更强大的用户体验。比如下面有一些例子，office360，Worktile，都算是Web应用的东西。相比普通网页难在哪儿呢，前端角度来讲，它的界面会非常的复杂。它的复杂就是会有很多区域，很多模块，而且元素之间会突然弹出一些top，还有元素的堆叠。交互的话会有拖拽、缩放、快捷键。数据展现形式多样，对于列表有各种排序规则，还有放表单会有比较复杂的合规性检查。 在我三年前没有接触AngularJS之前也做过一些比较复杂的系统，当时主流是EXTJS，或者是flush之类的东西。给我的感觉，当然你采用flush已经是另外一个领域了。无论你怎么做，自己去搭，给我的感觉，最后代码虽然不像面条式的，但很脆弱，就像搭一个纸牌房子的感觉。 接下来讲一下Angular，Hello，Angular。引入一个AngularJS的脚本，最上面有一个ng-app，声明，这一块就由Angular托管了。底下就可以写双括弧东西绑定数据层，而且可以在表单上指定一个ng-model做双向绑定，这就是特别简单的Hello Angular。当时选型的时候觉得这个东西酷，很简单，就开始用了。结果用着用着发现产生了这个问题，学JXuery时越来越了解这个APP，很爽。Node.JS也是这样，但是学Angular的时候会有一点打弯的感觉。 讲一下Angular的知识点，AngularJS的构成，每个点都是一个小概念，看上去挺多的，后面会有一张图分类起来，其实就不多了。懂Angular挺多的，我就快点过。 Angular是MV新的框架，有View层和ViewModel。最主要的特点是双向绑定的，双向数据绑定的图是官网的，我做了一下自己理解的注释。写自己的HTML模板，Complie编译，把数据动态更新到View层，更新到Model层，这是Angular的一个特点。 涂子沛：这是刚才那个图的分解，Angular数据看上去很多，但是处理的业务还是很清晰的。Module是之前那些东西的容器，由Module管理这些概念。比如在Module下可以声明一个Config，定义一个Filter和Directive。 讲完Angular概念之后，讲一下用Angular的感觉，怎么用好它。首先要排除jQuery的方式。DOM不是数据结构，数据才是数据结构。最开始的思路转换，一开始要考虑控件状态有哪些，如果这是一个业务页面的话，它的业务状态有哪些，会从数据结构来考虑控件的编写。因为Angular是双向数据绑定的，业务控件要基于业务数据模型来编程。如果是交互控件的话，就要基于控件状态有哪些，有多少个状态来编程，而不是回到DOM的思路去写。 （图示）这是模拟的一个场景，如果要写一个图书馆管理系统，怎么样分解代码。图书馆管理系统肯定有书，书就是一个大的模块，它会有自己的Template模板，会有自己的数据展现的转换，Filter。也会有书的读取，Service，也会有自己的路由。有用户来借书也是这样的，每一个大的模块都应该是把各自东西放在自己底下，用模块去分解它，这样的话你的代码会分得比较清晰。 （图示）这是BOOK模块具体的写，Angular，module，BooK。它不依赖于任何模块，所以这里就是空的。它可能会有一些静态配置，可能会有一些自己的路由，可能会有自己增删改查的数据请求。会有书状态的枚举不同，这个书的借还状态，可以写一些Filter。具体的Controller，就是页面控制器。最开始特别容易犯的毛病，Angular如果有中括号的话，它会是声明一个模块。如果这里没有的话，在已有模块上附加上新的代码