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

1 define([ 2 'AbstractView', 3 'text!ListPath/list.css', 4 5 'ListPath/en.station', 6 'ListPath/en.date', 7 'ListPath/en.time', 8 9 'ListPath/mod.date', 10 'ListPath/mod.time', 11 'ListPath/mod.setout', 12 'ListPath/mod.arrive', 13 14 'text!ListPath/tpl.layout.html', 15 'text!ListPath/tpl.search.box.html', 16 'UIScrollLayer' 17 ], function ( 18 AbstractView, 19 style, 20 21 StationEntity, 22 DateEntity, 23 TimeEntity, 24 25 DateModule, 26 TimeModule, 27 SetoutModule, 28 ArriveModule, 29 30 layoutHtml, 31 searchBoxHtml, 32 UIScrollLayer 33 ) { 34 return _.inherit(AbstractView, { 35 36 _initEntity: function () { 37 this.dateEntity = new DateEntity(); .timeEntity = new TimeEntity(); 40 this.timeEntity.subscribe('init', this.renderTime, this); 41 this.timeEntity.subscribe(this.renderTime, this); .setoutEntity = new StationEntity(); 44 this.setoutEntity.subscribe('init', this.renderSetout, this); 45 this.setoutEntity.subscribe(this.renderSetout, this); .arriveEntity = new StationEntity(); 48 this.arriveEntity.subscribe('init', this.renderArrive, this); 49 this.arriveEntity.subscribe(this.renderArrive, this); 50 51 }, 52 53 _initModule: function () { 54 this.dateModule = new DateModule({ 55 view: this, 56 selector: '.js_calendar_wrapper', 57 dateEntity: this.dateEntity 58 }); .timeModule = new TimeModule({ 61 view: this, 62 selector: '.js_show_setoutdate', 63 timeEntity: this.timeEntity 64 }); .setOutModule = new SetoutModule({ 67 view: this, 68 selector: '.js_show_setstation', 69 setoutEntity: this.setoutEntity 70 }); .arriveModule = new ArriveModule({ 73 view: this, 74 selector: '.js_show_arrivalstation', 75 arriveEntity: this.arriveEntity 76 }); 77 78 }, 79 80 propertys: function ($super) { 81 $super(); ._initEntity(); 84 this._initModule(); .style = style; 87 this.template = layoutHtml; .urlData = { 91 start: {}, 92 end: {} 93 }; }, 97 98 initHeader: function (name) { 99 var title = '班次列表'; 100 this.header.set({ 101 view: this, 102 title: title, 103 back: function () { 104 console.log('回退'); 105 }, 106 right: [ 107 { 108 tagname: 'search-bar', 109 value: '搜索', 110 callback: function () { 111 console.log('弹出搜索框'); 112 this.showSearchBox(); 113 } 114 } 115 ] 116 }); 117 }, 118 119 initElement: function () { 120 this.d_list_wrapper = this.$('.js_list_wrapper'); 121 this.d_none_data = this.$('.js_none_data'); .d_js_show_setoutdate = this.$('.js_show_setoutdate'); 124 this.d_js_show_setstation = this.$('.js_show_setstation'); 125 this.d_js_show_arrivalstation = this.$('.js_show_arrivalstation'); 126 this.d_js_list_loading = this.$('.js_list_loading'); 127 this.d_js_tabs = this.$('.js_tabs'); .d_js_day_sec = this.$('.js_day_sec'); 130 this.d_js_start_sec = this.$('.js_start_sec'); 131 this.d_js_arrival_sec = this.$('.js_arrival_sec'); 132 }, showSearchBox: function () { 136 var scope = this; 137 if (!this.searchBox) { 138 this.searchBox = new UIScrollLayer({ 139 title: '请选择搜索条件', 140 html: searchBoxHtml, 141 events: { 142 'click .js-start': function (e) { 143 scope._showCityView('start', $(e.currentTarget)); 144 }, 145 'click .js-arrive': function (e) { 146 scope._showCityView('end', $(e.currentTarget)); 147 }, 148 'click .js_search_list': function () { 149 var param = {}; (!scope.urlData.start.id) { 152 scope.showToast('请先选择出发城市'); 153 return; 154 } (!scope.urlData.end.id) { 157 scope.showToast('请先选择到达城市'); 158 return; 159 } param.startcityid = scope.urlData.start.id; 163 param.arrivalcityid = scope.urlData.end.id; 164 param.startdatetime = scope.dateEntity.getDate(); 165 param.startname = scope.urlData.start.name; 166 param.arrivename = scope.urlData.end.name; (scope.urlData.start.station) { 169 param.startstationid = scope.urlData.start.station 170 } (scope.urlData.end.station) { 173 param.arrivalstationid = end_station 174 } 175 176 scope.forward('list', param); 177 this.hide(); 178 } 179 } 180 }); 181 } 182 this.searchBox.show(); 183 }, 184 185 _showCityView: function (key, el) { 186 var scope = this; (key == 'end') { (!this.urlData.start.id) { 191 this.showToast('请先选择出发城市'); 192 return; 193 } 194 } .showPageView('city', { 197 flag: key, 198 startId: this.urlData.start.id, 199 type: this.urlData.start.type, 200 onCityItemClick: function (id, name, station, type) { 201 scope.urlData[key] = {}; 202 scope.urlData[key]['id'] = id; 203 scope.urlData[key]['type'] = type; 204 scope.urlData[key]['name'] = name; 205 if (station) scope.urlData[key]['name'] = station; 206 el.text(name); 207 scope.hidePageView(); 208 }, 209 onBackAction: function () { 210 scope.hidePageView(); 211 } 212 }); 213 }, initSetoutEntity: function () { 218 var data = {}; 219 if (_.getUrlParam().startstationid) { data.name = _.getUrlParam().startname || '全部车站'; 222 data.id = _.getUrlParam().startstationid; 223 } .setoutEntity.initData(data, data.id); 226 }, initArriveEntity: function () { data = {}; 232 if (_.getUrlParam().arrivalstationid) { data.name = _.getUrlParam().arrivename || '全部车站'; 235 data.id = _.getUrlParam().arrivalstationid; 236 } .arriveEntity.initData(data, data.id); 239 }, renderTime: function () { 243 var name = this.timeEntity.getName(); 244 this.d_js_day_sec.html(name); 245 }, 246 247 renderSetout: function () { 248 var name = this.setoutEntity.getName(); 249 this.d_js_start_sec.html(name); 250 }, 251 252 renderArrive: function () { 253 var name = this.arriveEntity.getName(); 254 this.d_js_arrival_sec.html(name); 255 }, 256 257 addEvent: function () { 258 this.on('onShow', function () { .dateModule.initDate(); (!_.getUrlParam().startcityid || !_.getUrlParam().arrivalcityid) { 264 this.showSearchBox(); 265 return; 266 } .timeEntity.initData(); 270 this.initSetoutEntity(); 271 this.initArriveEntity(); 272 273 }); 274 } 275 }); 276 277 });