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

一、模块划分
纵向->第一层(业务无关):
移动端图表库,jQuery,手势库,css动画库

纵向->第二层(业务相关):
分享组件,loading组件,

纵向->第三层(业务逻辑):
页面组成,页面交互,页面展示,业务流程

纵向->第三层->页面组成:
头部栏(返回,标题,分享),内容区

纵向->第三层->页面交互:
上下拖拽,上下滑动,点击分享弹框,图表组件交互(调研成功)

纵向->第三层->页面展示:
数字增加动画,页面动画顺序展示,页面适配(浏览器窗口大小适配,浏览器版本适配),

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

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

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

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

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

原文地址:https://www.cnblogs.com/samwu/p/4256458.html