一、模块划分
纵向->第一层（业务无关）：
移动端图表库，jQuery，手势库，css动画库

纵向->第二层（业务相关）：
分享组件，loading组件，

纵向->第三层（业务逻辑）：
页面组成，页面交互，页面展示，业务流程

纵向->第三层->页面组成：
头部栏（返回，标题，分享），内容区

纵向->第三层->页面交互：
上下拖拽，上下滑动，点击分享弹框，图表组件交互（调研成功）

纵向->第三层->页面展示：
数字增加动画，页面动画顺序展示，页面适配（浏览器窗口大小适配，浏览器版本适配），

纵向->第三层->业务流程：
判断消费笔数，年度消费额大于某个值，逾期记录判断

纵向->第三层->页面展示->页面适配：
1.浏览器窗口高度适配
2.页面元素采用百分比布局

纵向->第四层（业务实现）
0.获取年度账单数据
1.获取浏览器高度
2.获取页面展示区域高度 = 浏览器高度 - 头部高度
3.

二、流程可配置化
{
"资源文件":{
"logo":""
},
"页面配置":{
"1":{
"logo":this["资源文件"]["logo"],
"首页大图":"",
"首页向上剪头":"",
"首页向上文字":"你的2014年度账单到啦！向上滑动"
}
"2":{

}
},
"流程判断":{
"消费次数":"",
"年度消费总额判断值":"",
"含有逾期记录":false,
"含有网购，吃喝，出现":true,
""
}
}

记年度账单项目的代码设计