【组件化开发】前端进阶篇之如何编写可维护可升级的代码 - 叶小钗(12)_H5之家

班次列表正在加载... list.html

list.html

webapp ├─blade //框架目录 │ ├─data │ ├─libs │ ├─mvc │ └─ui ├─bus │ ├─model //数据请求模块，完全可以使用zepto ajax替换 │ └─pages │ ├─booking │ ├─index │ └─list //demo代码模块 └─static

接下来，让我们真实的开始拆分页面吧。

组件式编程骨架设计

首先，我们进行最简单的骨架设计，这里依次是其js代码与模板代码：

1 define(['AbstractView', 'text!ListPath/list.css', 'text!ListPath/tpl.layout.html'], function (AbstractView, style, layoutHtml) { 2 return _.inherit(AbstractView, { 3 propertys: function ($super) { 4 $super(); 5 this.style = style; 6 this.template = layoutHtml; 7 }, 8 9 initHeader: function (name) { 10 var title = '班次列表'; 11 this.header.set({ 12 view: this, 13 title: title 14 }); 15 }, 16 17 addEvent: function () { 18 this.on('onShow', function () { 19 console.log('页面渲染结束'); 20 }); 21 } 22 }); 23 });

日历工具条模块当前暂无班次可预订列表模块正在加载...出发时段全天出发汽车站全部车站到达汽车站全部车站

tpl.layout

页面展示如图：

日历工具栏的实现

这里要做的第一步是将日历工具栏模块实现，以数据为先的思考，我们先实现了一个与日历业务有关的数据实体：

1 define(['AbstractEntity'], function (AbstractEntity) { Entity = _.inherit(AbstractEntity, { 4 propertys: function ($super) { 5 $super(); 6 var n = new Date(); 7 var curTime = new Date(n.getFullYear(), n.getMonth(), n.getDate()).getTime(); 8 this.data = { 9 date: curTime, 10 title: '当前日期' 11 }; 12 }, 13 14 set: function (date) { 15 if (!date) return; 16 if (_.isDate(date)) date = date.getTime(); 17 if (typeof date === 'string') date = parseInt(date); 18 this.data.date = date; 19 this.update(); 20 }, 21 22 getDateStr: function () { 23 var date = new Date(); 24 date.setTime(this.data.date); 25 var dateDetail = _.dateUtil.getDetail(date); 26 var name = dateDetail.year + '-' + dateDetail.month + '-' + dateDetail.day + ' ' + dateDetail.weekday + (dateDetail.day1 ? '(' + dateDetail.day1 + ')' : ''); 27 return name; 28 }, 29 30 nextDay: function () { 31 this.set(this.getDate() + 86400000); ; 33 }, 34 35 getDate: function () { 36 return parseInt(this.data.date); 37 }, canPreDay: function () { 41 var n = new Date(); 42 var curTime = new Date(n.getFullYear(), n.getMonth(), n.getDate()).getTime(); (curTime <= this.getDate() - 86400000) { ; 47 } ; 49 }, 50 51 preDay: function () { ; 53 this.set(this.getDate() - 86400000); ; 55 } 56 57 }); Entity; 60 });

en.date

里面完成日期工具栏所有相关数据操作，并且不包含实际的业务逻辑。

然后这里开始设计日期工具栏的模块View：