1 define([ 2 'UIHeader', 3 'UIToast', 4 'UILoading', 5 'UIPageView', 6 'UIAlert' 7 ], function (UIHeader, UIToast, UILoading, UIPageView, UIAlert) { _.inherit({ 10 propertys: function () { .viewRootPath = 'views/'; .defaultView = 'index'; .viewId; 19 this.viewUrl; .views = {}; .isOpenWebapp = false; .viewMapping = {}; .UIHeader = UIHeader; .interface = [ 34 'forward', 35 'back', 36 'jump', 37 'showPageView', 38 'hidePageView', 39 'showLoading', 40 'hideLoading', 41 'showToast', 42 'hideToast', 43 'showMessage', 44 'hideMessage', 45 'showConfirm', 46 'hideConfirm', 47 'openWebapp', 48 'closeWebapp' 49 ]; 50 51 }, 52 53 initialize: function (options) { 54 this.propertys(); 55 this.setOption(options); 56 this.initViewPort(); 57 this.initAppMapping(); $.bindFastClick && $.bindFastClick(); 61 62 }, 63 64 setOption: function (options) { 65 _.extend(this, options); 66 }, initViewPort: function () { .d_header = $('#headerview'); 72 this.d_state = $('#js_page_state'); 73 this.d_viewport = $('#main'); .header = new this.UIHeader({ 77 wrapper: this.d_header 78 }); .pageviews = {}; 82 this.toast = new UIToast(); 83 this.loading = new UILoading(); 84 this.alert = new UIAlert(); 85 this.confirm = new UIAlert(); 86 }, 87 88 openWebapp: function () { 89 this.isOpenWebapp = true; 90 }, 91 92 closeWebapp: function () { 93 this.isOpenWebapp = false; 94 }, 95 96 showPageView: function (name, _viewdata_, id) { 97 var view = null, k, scope = this.curViewIns || this; 98 if (!id) id = name; 99 if (!_.isString(name)) return; view = this.pageviews[id]; 104 var arr = name.split('http://www.cnblogs.com/'); 105 var getViewPath = window.getViewPath || window.GetViewPath; 106 if (!view) { 107 view = new UIPageView({ viewId: arr[arr.length - 1] || name, 110 viewPath: getViewPath ? getViewPath(name) : name, 111 _viewdata_: _viewdata_, 112 onHide: function () { 113 scope.initHeader(); 114 } 115 }); 116 this.pageviews[id] = view; 117 } else { 118 view.setViewData(_viewdata_); 119 } 120 view.show(); 121 122 }, 123 124 hidePageView: function (name) { 125 if (name) { 126 if (this.pageviews[name]) this.pageviews[name].hide(); 127 } else { .pageviews) this.pageviews[k].hide(); 129 } 130 }, 131 132 showLoading: function () { 133 this.loading.show(); 134 }, 135 136 hideLoading: function () { 137 this.loading.hide(); 138 }, 139 140 showToast: function (msg, callback) { 141 this.toast.resetDefaultProperty(); 142 this.toast.content = msg; 143 if (callback) this.toast.hideAction = callback; 144 this.toast.refresh(); 145 this.toast.show(); 146 }, 147 148 hideToast: function () { 149 this.toast.hide(); 150 }, 151 152 showMessage: function (param) { 153 if (_.isString(param)) { 154 param = { content: param }; 155 } .alert.resetDefaultProperty(); 158 this.alert.setOption(param); 159 this.alert.refresh(); 160 this.alert.show(); 161 }, 162 163 hideMessage: function () { 164 this.alert.hide(); 165 }, 166 167 showConfirm: function (params) { 168 if (!params) params = {}; 169 if (typeof params == 'string') { 170 params = { 171 content: params 172 }; 173 } .confirm.resetDefaultProperty(); .confirm.btns = [ 179 { name: '取消', className: 'cm-btns-cancel js_cancel' }, 180 { name: '确定', className: 'cm-btns-ok js_ok' } 181 ]; 182 this.confirm.setOption(params); 183 this.confirm.refresh(); 184 this.confirm.show(); 185 }, 186 187 hideConfirm: function () { 188 this.confirm.hide(); 189 }, initApp: function () { .loadViewByUrl(); (this.isOpenWebapp === true) 199 $(window).on('popstate.app', $.proxy(this.loadViewByUrl, this)); 200 201 }, 202 203 loadViewByUrl: function (e) { 204 this.hidePageView(); url = decodeURIComponent(location.href).toLowerCase(); 207 var viewId = this.getViewIdRule(url); 208 209 viewId = viewId || this.defaultView; 210 this.viewId = viewId; 211 this.viewUrl = url; 212 this.switchView(this.viewId); 213 214 }, getViewIdRule: function (url) { 218 var viewId = '', hash = ''; 219 var reg = /webapp\/.+\/(.+)\.html/; match = url.match(reg); 222 if (match && match[1]) viewId = match[1]; viewId; 225 }, setUrlRule: function (viewId, param, replace, project) { 229 var reg = /(webapp\/.+\/)(.+)\.html/; 230 var url = window.location.href; 231 var match = url.match(reg); 232 var proj = project ? 'webapp/' + project : match[1]; 233 var preUrl = '', str = '', i = 0, _k, _v; keepParam = [ 236 'us' 237 ], p; 238 if (!viewId) return; 239 if (!match || !match[1]) { 240 preUrl = url + '/webapp/bus/' + viewId + '.html'; 241 } else { 242 preUrl = url.substr(0, url.indexOf(match[1])) + proj + viewId + '.html'; ; 243 } (i = 0; i < keepParam.length; i++) { 247 p = keepParam[i]; 248 if (_.getUrlParam()[p]) { 249 if (!param) param = {}; 250 param[p] = _.getUrlParam()[p]; 251 } 252 } 253 254 i = 0; (k in param) { 257 _k = encodeURIComponent(_.removeAllSpace(k)); 258 _v = encodeURIComponent(_.removeAllSpace(param[k])); 259 if (i === 0) { 260 str += '?' + _k + '=' + _v; 261 i++; 262 } else { 263 str += '&' + _k + '=' + _v; 264 } 265 } 266 267 url = preUrl + str; (this.isOpenWebapp === false) { 270 window.location = url; 271 return; 272 } (replace) { 275 history.replaceState('', {}, url); 276 } else { 277 history.pushState('', {}, url); 278 } 279 280 }, 281 282 switchView: function (id) { curView = this.views[id]; tmpView = this.curView; (tmpView && tmpView != curView) { 290 this.lastView = tmpView; 291 } (curView) { (curView == this.curView) { 302 return; 303 } .curView = curView; 306 this.curView.show(); 307 this.lastView && this.lastView.hide(); 308 } else { .loadView(id, function (View) { .curView = new View({ 316 viewId: id, 317 refer: this.lastView ? this.lastView.viewId : null, 318 APP: this, 319 wrapper: this.d_viewport 320 }); .curView.$el.attr('page-url', id); .views[id] = this.curView; .curView.show(); 329 this.lastView && this.lastView.hide(); 330 331 }); 332 } 333 }, loadView: function (path, callback) { 337 var self = this; 338 requirejs([this.buildUrl(path)], function (View) { 339 callback && callback.call(self, View); 340 }); 341 }, initAppMapping: function () { }, buildUrl: function (path) { 351 var mappingPath = this.viewMapping[path]; 352 return mappingPath ? mappingPath : this.viewRootPath + 'http://www.cnblogs.com/' + path + 'http://www.cnblogs.com/' + path; 353 }, forward: function (viewId, param, replace) { 357 if (!viewId) return; 358 viewId = viewId.toLowerCase(); .setUrlRule(viewId, param, replace); 361 this.loadViewByUrl(); 362 }, 363 jump: function (path, param, replace) { 364 var viewId; 365 var project; 366 if (!path) { 367 return; 368 } 369 path = path.toLowerCase().split('http://www.cnblogs.com/'); 370 if (path.length <= 0) { 371 return; 372 } 373 viewId = path.pop(); 374 project = path.length === 1 ? path.join('') + 'http://www.cnblogs.com/' : path.join(''); 375 this.setUrlRule(viewId, param, replace, project); 376 this.loadViewByUrl(); 377 }, 378 back: function (viewId, param, replace) { 379 if (viewId) { 380 this.forward(viewId, param, replace) 381 } else { 382 if (window.history.length == 1) { 383 this.forward(this.defaultView, param, replace) 384 } else { 385 history.back(); 386 } 387 } 388 } 389 390 }); 391 392 });

这里属于框架控制器层面的代码，与今天的主题不是非常相关，有兴趣的朋友可以详细读读。

这里的核心是页面级别的处理，这里会做比较多的介绍，首先我们为所有的业务级View提供了一个继承的View：