记年度账单项目的代码设计
一、模块划分
纵向->第一层(业务无关):
移动端图表库,jQuery,手势库,css动画库
纵向->第二层(业务相关):
分享组件,loading组件,
纵向->第三层(业务逻辑):
页面组成,页面交互,页面展示,业务流程
纵向->第三层->页面组成:
头部栏(返回,标题,分享),内容区
纵向->第三层->页面交互:
上下拖拽,上下滑动,点击分享弹框,图表组件交互(调研成功)
纵向->第三层->页面展示:
数字增加动画,页面动画顺序展示,页面适配(浏览器窗口大小适配,浏览器版本适配),
纵向->第三层->业务流程:
判断消费笔数,年度消费额大于某个值,逾期记录判断
纵向->第三层->页面展示->页面适配:
1.浏览器窗口高度适配
2.页面元素采用百分比布局
纵向->第四层(业务实现)
0.获取年度账单数据
1.获取浏览器高度
2.获取页面展示区域高度 = 浏览器高度 - 头部高度
3.
二、流程可配置化
{
"资源文件":{
"logo":""
},
"页面配置":{
"1":{
"logo":this["资源文件"]["logo"],
"首页大图":"",
"首页向上剪头":"",
"首页向上文字":"你的2014年度账单到啦!向上滑动"
}
"2":{
}
},
"流程判断":{
"消费次数":"",
"年度消费总额判断值":"",
"含有逾期记录":false,
"含有网购,吃喝,出现":true,
""
}
}
合乎自然而生生不息。。。