1 define([], function () { 2 'use strict'; _.inherit({ 5 6 _propertys: function () { 7 this.APP = this.APP || window.APP; 8 var i = 0, len = 0, k; 9 if (this.APP && this.APP.interface) { 10 for (i = 0, len = this.APP.interface.length; i < len; i++) { 11 k = this.APP.interface[i]; 12 if (k == 'showPageView') continue; (_.isFunction(this.APP[k])) { 15 this[k] = $.proxy(this.APP[k], this.APP); 16 } [k] = this.APP[k]; 18 } 19 } .header = this.APP.header; 22 }, 23 24 showPageView: function (name, _viewdata, id) { 25 this.APP.curViewIns = this; 26 this.APP.showPageView(name, _viewdata, id) 27 }, 28 propertys: function () { .wrapper = $('#main'); 31 this.id = _.uniqueId('page-view-'); 32 this.classname = ''; .viewId = null; 35 this.refer = null; .template = ''; .events = {}; .eventArr = {}; .status = 'init'; ._propertys(); 50 }, 51 52 getViewModel: function () { (_.isObject(this.datamodel)) return this.datamodel; 55 return {}; 56 }, addEvents: function (events) { 60 if (_.isObject(events)) _.extend(this.events, events); 61 }, 62 63 on: function (type, fn, insert) { 64 if (!this.eventArr[type]) this.eventArr[type] = []; (insert) { 68 this.eventArr[type].splice(0, 0, fn); 69 } else { 70 this.eventArr[type].push(fn); 71 } 72 }, 73 74 off: function (type, fn) { 75 if (!this.eventArr[type]) return; 76 if (fn) { 77 this.eventArr[type] = _.without(this.eventArr[type], fn); 78 } else { 79 this.eventArr[type] = []; 80 } 81 }, 82 83 trigger: function (type) { 84 var _slice = Array.prototype.slice; 85 var args = _slice.call(arguments, 1); 86 var events = this.eventArr; 87 var results = [], i, l; (events[type]) { 90 for (i = 0, l = events[type].length; i < l; i++) { 91 results[results.length] = events[type][i].apply(this, args); 92 } 93 } 94 return results; 95 }, 96 97 createRoot: function (html) { (this.style && !$('#page_' + this.viewId)[0]) { 101 $('head').append($('<stylecolor: #0000ff;">this.viewId + '">' + this.style + '</style>')) 102 } $('#fake-page').remove(); .$el = $('<divcolor: #0000ff;">this.viewId + ' ' + this.classname + '"color: #0000ff;">this.id + '">' + html + '</div>'); 109 if (this.wrapper.find('.cm-view')[0]) { 110 this.wrapper.append(this.$el); 111 } else { 112 this.wrapper.html('').append(this.$el); 113 } 114 115 }, 116 117 _isAddEvent: function (key) { 118 if (key == 'onCreate' || key == 'onPreShow' || key == 'onShow' || key == 'onRefresh' || key == 'onHide') ; ; 121 }, 122 123 setOption: function (options) { (var k in options) { 126 if (k == 'events') { 127 _.extend(this[k], options[k]); 128 continue; 129 } else if (this._isAddEvent(k)) { 130 this.on(k, options[k]) 131 continue; 132 } 133 this[k] = options[k]; 134 } }, 137 138 initialize: function (opts) { .propertys(); .setOption(opts); .resetPropery(); .addEvent(); 147 this.create(); .initElement(); 150 151 window.sss = this; 152 153 }, 154 155 $: function (selector) { .$el.find(selector); 157 }, resetPropery: function () { }, addEvent: function () { 164 }, 165 166 create: function () { 167 this.trigger('onPreCreate'); .createRoot(this.render()); .status = 'create'; 172 this.trigger('onCreate'); 173 }, initElement: function () { }, 177 178 render: function (callback) { 179 var data = this.getViewModel() || {}; 180 var html = this.template; 181 if (!this.template) return ''; (_.isFunction(this.template)) { 184 html = this.template(data); 185 } else { 186 html = _.template(this.template)(data); 187 } 188 typeof callback == 'function' && callback.call(this); 189 return html; 190 }, 191 192 refresh: function (needRecreate) { 193 this.resetPropery(); 194 if (needRecreate) { 195 this.create(); 196 } else { 197 this.$el.html(this.render()); 198 } 199 this.initElement(); 200 if (this.status != 'hide') this.show(); 201 this.trigger('onRefresh'); 202 }, * 205 * @description 组件显示方法，首次显示会将ui对象实际由内存插入包裹层 206 * @method initialize 207 * @param {Object} opts show: function () { 210 this.trigger('onPreShow'); .$el.show(); 219 this.status = 'show'; .bindEvents(); .initHeader(); 224 this.trigger('onShow'); 225 }, 226 227 initHeader: function () { }, 228 229 hide: function () { 230 if (!this.$el || this.status !== 'show') return; .trigger('onPreHide'); 233 this.$el.hide(); .status = 'hide'; 236 this.unBindEvents(); 237 this.trigger('onHide'); 238 }, 239 240 destroy: function () { 241 this.status = 'destroy'; 242 this.unBindEvents(); 243 this.$root.remove(); 244 this.trigger('onDestroy'); ; 246 }, 247 248 bindEvents: function () { 249 var events = this.events; (!(events || (events = _.result(this, 'events')))) return this; 252 this.unBindEvents(); delegateEventSplitter = /^(\S+)\s*(.*)$/; 256 var key, method, match, eventName, selector; (key in events) { 260 method = events[key]; 261 if (!_.isFunction(method)) method = this[events[key]]; 262 if (!method) continue; 263 264 match = key.match(delegateEventSplitter); 265 eventName = match[1], selector = match[2]; 266 method = _.bind(method, this); 267 eventName += '.delegateUIEvents' + this.id; (selector === '') { 270 this.$el.on(eventName, method); 271 } else { 272 this.$el.on(eventName, selector, method); 273 } 274 } ; 277 }, 278 279 unBindEvents: function () { 280 this.$el.off('.delegateUIEvents' + this.id); ; 282 }, 283 284 getParam: function (key) { 285 return _.getUrlParam(window.location.href, key) 286 }, 287 288 renderTpl: function (tpl, data) { 289 if (!_.isFunction(tpl)) tpl = _.template(tpl); 290 return tpl(data); 291 } }); 295 296 });

一个Page级别的View会有以下几个关键属性&方法：

① template，html字符串，不包含请求的基础模块，会构成页面的html骨架层

② events，所有的DOM事件定义处，以事件代理的方式定义，所以不必担心执行顺序

③ addEvent，用于页面级别各个阶段的监控事件注册点，一般来说用户只需要关注很少几个事件，比如：