首页 > 代码库 > 【单页应用】理解MVC
【单页应用】理解MVC
前言
之前我们为view引入了wrapperSet的概念，想以此解决view局部刷新问题，后来发现这个方案不太合理
view里面插入了业务相关的代码，事实上这个是应该剥离出去，业务的需求千奇百怪，我们不应该去处理
view现在只提供最基础的功能：
① 定义各个状态的模板
② 渲染模板
整个view的逻辑便该结束了，有一个比较特殊的情况是，当状态值不变的情况就应该是更新，这个可能会有不一样的逻辑也应该划出去
Adapter的意义在于存储view渲染过程中需要的data数据，从组成上分为
① datamodel
② viewmodel
datamodel用于具体操作，viewmodel被干掉了，提供一个getViewModel的方法替换，并且对外提供一个format方法用于用户继承
format的参数便是datamodel，这里通过处理返回的数据便是我们所谓的viewModel，他将会用于view生成对应html
然后datamodel的改变会引起对应view的变化，这个变化发起端与控制端皆在viewController，最后viewController会通知到view重新渲染
Controller依旧是交互的核心，他是连接Adapter以及view的桥梁
view与Adapter本身并没有关联，Controller将之联系到了一起：
① 在实例化时候便会关联一个Adapter以及view的实例，这里Adapter不是必须的
② viewController会保留一个view的根节点，view的根节点只会存在一个
③ viewController会在Adapter实例上监听自身，在adpter datamodel发生变化时候通知到自己，便会触发update事件
④ 传入初始状态的status以及Adapter的datamodel，调用view的render方法，会生成当前状态的view的html
⑤ 将之装入view的根节点，并且为viewController的this.$el赋值，create的逻辑结束
⑥ 触发viewController show事件，将events绑定到根节点，将$el append到container容器中并显示，初步逻辑结束
⑦ viewController有几个事件点用于用户注册，本身也具有很多一系列dom事件，可能导致datamodel的变化
⑧ 若是Adapter的datamodel发生变化便会触发dataAdpter改变的notify事件，这个时候viewController便会有所反应
⑨ datamodel的改变会触发viewController的update事件，默认会再次触发render事件重新新渲染结构
由于render会放给view自定义，所以其中需要执行的逻辑便不需要我们的关注了
实例
这个便是一个标准的MVC模型，借IOS MVC的模型来说
核心操控点在于Controller，Controller会组织model以及view
由于Controller上注册的各系列事件，会引起model的变化，
每次model产生变化后会重新通知，Controller 通知view update操作
这个时候view会获取viewController的状态值以及model的数据渲染出新的view
view只负责html渲染
model只负责操作数据，并且通知观察者改变事件
Controller将view以及model联系起来，所有的事件全部注册至Controller
PS：传统的View会包含事件交互，这里放到了Controller上
模型会把datamodel的改变通知到控制器，控制器会更新视图信息，控制器根据view组成dom结构，并且注册各种UI事件，又会触发datamodel的各种改变
这就达到了理想情况的view与model的分离，一个model（adpter可用于多个viewController），一个dataAdpter的改变会影响两个视图的改变
这个MVC可以完全解耦view以及model，view的变化相当频繁，若是model控制view渲染便会降低model的重用
这里首先举一个例子做简单说明：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ToDoList</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css"> 8 <link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/css/flat-ui.css"> 9 <link href="../style/main.css" rel="stylesheet" type="text/css" /> 10 <style type="text/css"> 11 .cui-alert { width: auto; position: static; } 12 .txt { border: #cfcfcf 1px solid; margin: 10px 0; width: 80%; } 13 ul, li { padding: 0; margin: 0; } 14 .cui_calendar, .cui_week { list-style: none; } 15 .cui_calendar li, .cui_week li { float: left; width: 14%; overflow: hidden; padding: 4px 0; text-align: center; } 16 </style> 17 </head> 18 <body> 19 <article id="container"> 20 </article> 21 <script type="text/underscore-template" id="template-ajax-init"> 22 <div class="cui-alert" > 23 <div class="cui-pop-box"> 24 <div class="cui-hd"> 25 <%=title%> 26 </div> 27 <div class="cui-bd"> 28 <div class="cui-error-tips"> 29 </div> 30 <div class="cui-roller-btns" style="padding: 4px; "><input type="text" placeholder="设置最低价 {day: ‘‘, price: ‘‘}" style="margin: 2px; width: 100%; " id="ajax_data" class="txt" value="{day: , price: }"></div> 31 <div class="cui-roller-btns"> 32 <div class="cui-flexbd cui-btns-sure"><%=confirm%></div> 33 </div> 34 </div> 35 </div> 36 </div> 37 </script> 38 <script type="text/underscore-template" id="template-ajax-suc"> 39 <ul> 40 <li>最低价：本月<%=ajaxData.day %>号，价格：<%=ajaxData.price %> 元</li> 41 </ul> 42 </script> 43 44 <script type="text/underscore-template" id="template-ajax-loading"> 45 <span>loading....</span> 46 </script> 47 48 <script src="../../vendor/underscore-min.js" type="text/javascript"></script> 49 <script src="../../vendor/zepto.min.js" type="text/javascript"></script> 50 <script src="../../src/underscore-extend.js" type="text/javascript"></script> 51 <script src="../../src/util.js" type="text/javascript"></script> 52 <script src="../../src/mvc.js" type="text/javascript"></script> 53 <script type="text/javascript"> 54 55 //模拟Ajax请求 56 function getAjaxData(callback, data) { 57 setTimeout(function () { 58 if (!data) { 59 data = {day: 3, price: 20}; 60 } 61 callback(data); 62 }, 1000); 63 } 64 65 var AjaxView = _.inherit(Dalmatian.View, { 66 _initialize: function ($super) { 67 //设置默认属性 68 $super(); 69 70 this.templateSet = { 71 init: $(‘#template-ajax-init‘).html(), 72 loading: $(‘#template-ajax-loading‘).html(), 73 ajaxSuc: $(‘#template-ajax-suc‘).html() 74 }; 75 76 } 77 }); 78 79 var AjaxAdapter = _.inherit(Dalmatian.Adapter, { 80 _initialize: function ($super) { 81 $super(); 82 this.datamodel = { 83 title: ‘标题‘, 84 confirm: ‘刷新数据‘ 85 }; 86 this.datamodel.ajaxData = {}; 87 }, 88 89 format: function (datamodel) { 90 //处理datamodel生成viewModel的逻辑 91 return datamodel; 92 }, 93 94 ajaxLoading: function () { 95 this.notifyDataChanged(); 96 }, 97 98 ajaxSuc: function (data) { 99 this.datamodel.ajaxData = data; 100 this.notifyDataChanged(); 101 } 102 }); 103 104 var AjaxViewController = _.inherit(Dalmatian.ViewController, { 105 _initialize: function ($super) { 106 $super(); 107 //设置基本的属性 108 this.view = new AjaxView(); 109 this.adapter = new AjaxAdapter(); 110 this.viewstatus = ‘init‘; 111 this.container = ‘#container‘; 112 }, 113 114 //处理datamodel变化引起的dom改变 115 render: function (data) { 116 //这里用户明确知道自己有没有viewdata 117 var viewdata = this.adapter.getViewModel(); 118 var wrapperSet = { 119 loading: ‘.cui-error-tips‘, 120 ajaxSuc: ‘.cui-error-tips‘ 121 }; 122 //view具有唯一包裹器 123 var root = this.view.root; 124 var selector = wrapperSet[this.viewstatus]; 125 126 if (selector) { 127 root = root.find(selector); 128 } 129 130 this.view.render(this.viewstatus, this.adapter && this.adapter.getViewModel()); 131 132 root.html(this.view.html); 133 134 }, 135 136 //显示后Ajax请求数据 137 onViewAfterShow: function () { 138 this._handleAjax(); 139 }, 140 141 _handleAjax: function (data) { 142 this.setViewStatus(‘loading‘); 143 this.adapter.ajaxLoading(); 144 getAjaxData($.proxy(function (data) { 145 this.setViewStatus(‘ajaxSuc‘); 146 this.adapter.ajaxSuc(data); 147 }, this), data); 148 }, 149 150 events: { 151 ‘click .cui-btns-sure‘: function () { 152 var data = this.$el.find(‘#ajax_data‘).val(); 153 data = eval(‘(‘ + data + ‘)‘); 154 this._handleAjax(data); 155 } 156 } 157 }); 158 159 var a = new AjaxViewController(); 160 a.show(); 161 162 </script> 163 </body> 164 </html>
1 (function () { 2 var _ = window._; 3 if (typeof require === ‘function‘ && !_) { 4 _ = require(‘underscore‘); 5 }; 6 7 // @description 全局可能用到的变量 8 var arr = []; 9 var slice = arr.slice; 10 11 var method = method || {}; 12 13 14 /** 15 * @description inherit方法，js的继承，默认为两个参数 16 * @param {function} supClass 可选，要继承的类 17 * @param {object} subProperty 被创建类的成员 18 * @return {function} 被创建的类 19 */ 20 method.inherit = function () { 21 22 // @description 参数检测，该继承方法，只支持一个参数创建类，或者两个参数继承类 23 if (arguments.length === 0 || arguments.length > 2) throw ‘参数错误‘; 24 25 var parent = null; 26 27 // @description 将参数转换为数组 28 var properties = slice.call(arguments); 29 30 // @description 如果第一个参数为类（function），那么就将之取出 31 if (typeof properties[0] === ‘function‘) 32 parent = properties.shift(); 33 properties = properties[0]; 34 35 // @description 创建新类用于返回 36 function klass() { 37 if (_.isFunction(this.initialize)) 38 this.initialize.apply(this, arguments); 39 } 40 41 klass.superclass = parent; 42 // parent.subclasses = []; 43 44 if (parent) { 45 // @description 中间过渡类，防止parent的构造函数被执行 46 var subclass = function () { }; 47 subclass.prototype = parent.prototype; 48 klass.prototype = new subclass(); 49 // parent.subclasses.push(klass); 50 } 51 52 var ancestor = klass.superclass && klass.superclass.prototype; 53 for (var k in properties) { 54 var value =http://www.mamicode.com/ properties[k]; 55 56 //满足条件就重写 57 if (ancestor && typeof value =http://www.mamicode.com/= ‘function‘) { 58 var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/i, ‘‘).split(‘,‘); 59 //只有在第一个参数为$super情况下才需要处理（是否具有重复方法需要用户自己决定） 60 if (argslist[0] === ‘$super‘ && ancestor[k]) { 61 value = http://www.mamicode.com/(function (methodName, fn) { 62 return function () { 63 var scope = this; 64 var args = [function () { 65 return ancestor[methodName].apply(scope, arguments); 66 } ]; 67 return fn.apply(this, args.concat(slice.call(arguments))); 68 }; 69 })(k, value); 70 } 71 } 72 73 //此处对对象进行扩展，当前原型链已经存在该对象，便进行扩展 74 if (_.isObject(klass.prototype[k]) && _.isObject(value) && (typeof klass.prototype[k] != ‘function‘ && typeof value != ‘fuction‘)) { 75 //原型链是共享的，这里不好办 76 var temp = {}; 77 _.extend(temp, klass.prototype[k]); 78 _.extend(temp, value); 79 klass.prototype[k] = temp; 80 } else { 81 klass.prototype[k] = value; 82 } 83 84 } 85 86 if (!klass.prototype.initialize) 87 klass.prototype.initialize = function () { }; 88 89 klass.prototype.constructor = klass; 90 91 return klass; 92 }; 93 94 // @description 返回需要的函数 95 method.getNeedFn = function (key, scope) { 96 scope = scope || window; 97 if (_.isFunction(key)) return key; 98 if (_.isFunction(scope[key])) return scope[key]; 99 return function () { }; 100 }; 101 102 method.callmethod = function (method, scope, params) { 103 scope = scope || this; 104 if (_.isFunction(method)) { 105 return _.isArray(params) ? method.apply(scope, params) : method.call(scope, params); 106 } 107 108 return false; 109 }; 110 111 //获取url参数 112 method.getUrlParam = function (url, name) { 113 var i, arrQuery, _tmp, query = {}; 114 var index = url.lastIndexOf(‘//‘); 115 var http = url.substr(index, url.length); 116 117 url = url.substr(0, index); 118 arrQuery = url.split(‘&‘); 119 120 for (i = 0, len = arrQuery.length; i < len; i++) { 121 _tmp = arrQuery[i].split(‘=‘); 122 if (i == len - 1) _tmp[1] += http; 123 query[_tmp[0]] = _tmp[1]; 124 } 125 126 return name ? query[name] : query; 127 }; 128 129 130 /** 131 * @description 在fn方法的前后通过键值设置两个传入的回调 132 * @param fn {function} 调用的方法 133 * @param beforeFnKey {string} 从context对象中获得的函数指针的键值，该函数在fn前执行 134 * @param afterFnKey {string} 从context对象中获得的函数指针的键值，该函数在fn后执行 135 * @param context {object} 执行环节的上下文 136 * @return {function} 137 */ 138 method.wrapmethod = method.insert = function (fn, beforeFnKey, afterFnKey, context) { 139 140 var scope = context || this; 141 var action = _.wrap(fn, function (func) { 142 143 _.callmethod(_.getNeedFn(beforeFnKey, scope), scope); 144 145 func.call(scope); 146 147 _.callmethod(_.getNeedFn(afterFnKey, scope), scope); 148 }); 149 150 return _.callmethod(action, scope); 151 }; 152 153 method.Hash = method.inherit({ 154 inisilize: function (opts) { 155 this.keys = []; 156 this.values = []; 157 }, 158 159 length: function () { 160 return this.keys.length; 161 }, 162 163 //传入order，若是数组中存在的话会将之放到最后，保证数组的唯一性，因为这个是hash，不能存在重复的键 164 push: function (key, value, order) { 165 if (_.isObject(key)) { 166 for (var i in key) { 167 if (key.hasOwnProperty(i)) this.push(i, key[i], order); 168 } 169 return; 170 } 171 172 var index = _.indexOf(key, this.keys); 173 174 if (index != -1 && !order) { 175 this.values[index] = value; 176 } else { 177 if (order) this.remove(key); 178 this.keys.push(key); 179 this.vaules.push(value); 180 } 181 182 }, 183 184 remove: function (key) { 185 return this.removeByIndex(_.indexOf(key, this.keys)); 186 }, 187 188 removeByIndex: function (index) { 189 if (index == -1) return this; 190 191 this.keys.splice(index, 1); 192 this.values.splice(index, 1); 193 194 return this; 195 }, 196 197 pop: function () { 198 if (!this.length()) return; 199 200 this.keys.pop(); 201 return this.values.pop(); 202 }, 203 204 //根据索引返回对应键值 205 indexOf: function (value) { 206 var index = _.indexOf(value, this.vaules); 207 if (index != -1) return this.keys[index]; 208 return -1; 209 }, 210 211 //移出栈底值 212 shift: function () { 213 if (!this.length()) return; 214 215 this.keys.shift(); 216 return this.values.shift(); 217 }, 218 219 //往栈顶压入值 220 unShift: function (key, vaule, order) { 221 if (_.isObject(key)) { 222 for (var i in key) { 223 if (key.hasOwnProperty(i)) this.unShift(i, key[i], order); 224 } 225 return; 226 } 227 if (order) this.remove(key); 228 this.keys.unshift(key); 229 this.vaules.unshift(value); 230 }, 231 232 //返回hash表的一段数据 233 // 234 slice: function (start, end) { 235 var keys = this.keys.slice(start, end || null); 236 var values = this.values.slice(start, end || null); 237 var hash = new _.Hash(); 238 239 for (var i = 0; i < keys.length; i++) { 240 hash.push(keys[i], values[i]); 241 } 242 243 return obj; 244 }, 245 246 //由start开始，移除元素 247 splice: function (start, count) { 248 var keys = this.keys.splice(start, end || null); 249 var values = this.values.splice(start, end || null); 250 var hash = new _.Hash(); 251 252 for (var i = 0; i < keys.length; i++) { 253 hash.push(keys[i], values[i]); 254 } 255 256 return obj; 257 }, 258 259 exist: function (key, value) { 260 var b = true; 261 262 if (_.indexOf(key, this.keys) == -1) b = false; 263 264 if (!_.isUndefined(value) && _.indexOf(value, this.values) == -1) b = false; 265 266 return b; 267 }, 268 269 270 filter: function () { 271 272 } 273 274 }); 275 276 _.extend(_, method); 277 278 279 // if (module && module.exports) 280 // module.exports = _; 281 282 }).call(this);
1 /** 2 * @description 静态日期操作类，封装系列日期操作方法 3 * @description 输入时候月份自动减一，输出时候自动加一 4 * @return {object} 返回操作方法 5 */ 6 var dateUtil = { 7 /** 8 * @description 数字操作， 9 * @return {string} 返回处理后的数字 10 */ 11 formatNum: function (n) { 12 if (n < 10) return ‘0‘ + n; 13 return n; 14 }, 15 /** 16 * @description 将字符串转换为日期，支持格式y-m-d ymd (y m r)以及标准的 17 * @return {Date} 返回日期对象 18 */ 19 parse: function (dateStr, formatStr) { 20 if (typeof dateStr === ‘undefined‘) return null; 21 if (typeof formatStr === ‘string‘) { 22 var _d = new Date(formatStr); 23 //首先取得顺序相关字符串 24 var arrStr = formatStr.replace(/[^ymd]/g, ‘‘).split(‘‘); 25 if (!arrStr && arrStr.length != 3) return null; 26 27 var formatStr = formatStr.replace(/y|m|d/g, function (k) { 28 switch (k) { 29 case ‘y‘: return ‘(\\d{4})‘; 30 case ‘m‘: ; 31 case ‘d‘: return ‘(\\d{1,2})‘; 32 } 33 }); 34 35 var reg = new RegExp(formatStr, ‘g‘); 36 var arr = reg.exec(dateStr) 37 38 var dateObj = {}; 39 for (var i = 0, len = arrStr.length; i < len; i++) { 40 dateObj[arrStr[i]] = arr[i + 1]; 41 } 42 return new Date(dateObj[‘y‘], dateObj[‘m‘] - 1, dateObj[‘d‘]); 43 } 44 return null; 45 }, 46 /** 47 * @description将日期格式化为字符串 48 * @return {string} 常用格式化字符串 49 */ 50 format: function (date, format) { 51 if (arguments.length < 2 && !date.getTime) { 52 format = date; 53 date = new Date(); 54 } 55 typeof format != ‘string‘ && (format = ‘Y年M月D日 H时F分S秒‘); 56 return format.replace(/Y|y|M|m|D|d|H|h|F|f|S|s/g, function (a) { 57 switch (a) { 58 case "y": return (date.getFullYear() + "").slice(2); 59 case "Y": return date.getFullYear(); 60 case "m": return date.getMonth() + 1; 61 case "M": return dateUtil.formatNum(date.getMonth() + 1); 62 case "d": return date.getDate(); 63 case "D": return dateUtil.formatNum(date.getDate()); 64 case "h": return date.getHours(); 65 case "H": return dateUtil.formatNum(date.getHours()); 66 case "f": return date.getMinutes(); 67 case "F": return dateUtil.formatNum(date.getMinutes()); 68 case "s": return date.getSeconds(); 69 case "S": return dateUtil.formatNum(date.getSeconds()); 70 } 71 }); 72 }, 73 // @description 是否为为日期对象，该方法可能有坑，使用需要慎重 74 // @param year {num} 日期对象 75 // @return {boolean} 返回值 76 isDate: function (d) { 77 if ((typeof d == ‘object‘) && (d instanceof Date)) return true; 78 return false; 79 }, 80 // @description 是否为闰年 81 // @param year {num} 可能是年份或者为一个date时间 82 // @return {boolean} 返回值 83 isLeapYear: function (year) { 84 //传入为时间格式需要处理 85 if (dateUtil.isDate(year)) year = year.getFullYear() 86 if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) return true; 87 else return false; 88 }, 89 90 // @description 获取一个月份的天数 91 // @param year {num} 可能是年份或者为一个date时间 92 // @param year {num} 月份 93 // @return {num} 返回天数 94 getDaysOfMonth: function (year, month) { 95 //自动减一以便操作 96 month--; 97 if (dateUtil.isDate(year)) { 98 month = year.getMonth(); //注意此处月份要加1，所以我们要减一 99 year = year.getFullYear(); 100 } 101 return [31, dateUtil.isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; 102 }, 103 104 // @description 获取一个月份1号是星期几，注意此时的月份传入时需要自主减一 105 // @param year {num} 可能是年份或者为一个date时间 106 // @param year {num} 月份 107 // @return {num} 当月一号为星期几0-6 108 getBeginDayOfMouth: function (year, month) { 109 //自动减一以便操作 110 month--; 111 if ((typeof year == ‘object‘) && (year instanceof Date)) { 112 month = year.getMonth(); 113 year = year.getFullYear(); 114 } 115 var d = new Date(year, month, 1); 116 return d.getDay(); 117 } 118 };
1 "use strict"; 2 3 // ------------------华丽的分割线--------------------- // 4 5 // @description 正式的声明Dalmatian框架的命名空间 6 var Dalmatian = Dalmatian || {}; 7 8 // @description 定义默认的template方法来自于underscore 9 Dalmatian.template = _.template; 10 Dalmatian.View = _.inherit({ 11 // @description 构造函数入口 12 initialize: function (options) { 13 this._initialize(); 14 this.handleOptions(options); 15 this._initRoot(); 16 17 }, 18 19 _initRoot: function () { 20 //根据html生成的dom包装对象 21 //有一种场景是用户的view本身就是一个只有一个包裹器的结构，他不想要多余的包裹器 22 this.root = $(this.defaultContainerTemplate); 23 this.root.attr(‘id‘, this.viewid); 24 }, 25 26 // @description 设置默认属性 27 _initialize: function () { 28 29 var DEFAULT_CONTAINER_TEMPLATE = ‘<section class="view" id="<%=viewid%>"><%=html%></section>‘; 30 31 // @description view状态机 32 // this.statusSet = {}; 33 34 this.defaultContainerTemplate = DEFAULT_CONTAINER_TEMPLATE; 35 36 // @override 37 // @description template集合，根据status做template的map 38 // @example 39 // { 0: ‘<ul><%_.each(list, function(item){%><li><%=item.name%></li><%});%></ul>‘ } 40 // this.templateSet = {}; 41 42 this.viewid = _.uniqueId(‘dalmatian-view-‘); 43 44 }, 45 46 // @description 操作构造函数传入操作 47 handleOptions: function (options) { 48 // @description 从形参中获取key和value绑定在this上 49 if (_.isObject(options)) _.extend(this, options); 50 51 }, 52 53 // @description 通过模板和数据渲染具体的View 54 // @param status {enum} View的状态参数 55 // @param data {object} 匹配View的数据格式的具体数据 56 // @param callback {functiion} 执行完成之后的回调 57 render: function (status, data, callback) { 58 59 var templateSelected = this.templateSet[status]; 60 if (templateSelected) { 61 62 // @description 渲染view 63 var templateFn = Dalmatian.template(templateSelected); 64 this.html = templateFn(data); 65 66 //这里减少一次js编译 67 // this.root.html(‘‘); 68 // this.root.append(this.html); 69 70 this.currentStatus = status; 71 72 _.callmethod(callback, this); 73 74 return this.html; 75 76 } 77 }, 78 79 // @override 80 // @description 可以被复写，当status和data分别发生变化时候 81 // @param status {enum} view的状态值 82 // @param data {object} viewmodel的数据 83 update: function (status, data) { 84 85 if (!this.currentStatus || this.currentStatus !== status) { 86 return this.render(status, data); 87 } 88 89 // @override 90 // @description 可复写部分，当数据发生变化但是状态没有发生变化时，页面仅仅变化的可以是局部显示 91 // 可以通过获取this.html进行修改 92 _.callmethod(this.onUpdate, this, data); 93 } 94 }); 95 96 Dalmatian.Adapter = _.inherit({ 97 98 // @description 构造函数入口 99 initialize: function (options) { 100 this._initialize(); 101 this.handleOptions(options); 102 103 }, 104 105 // @description 设置默认属性 106 _initialize: function () { 107 this.observers = []; 108 // this.viewmodel = {}; 109 this.datamodel = {}; 110 }, 111 112 // @description 操作构造函数传入操作 113 handleOptions: function (options) { 114 // @description 从形参中获取key和value绑定在this上 115 if (_.isObject(options)) _.extend(this, options); 116 }, 117 118 // @override 119 // @description 设置 120 format: function (datamodel) { 121 return datamodel; 122 }, 123 124 getViewModel: function () { 125 return this.format(this.datamodel); 126 }, 127 128 registerObserver: function (viewcontroller) { 129 // @description 检查队列中如果没有viewcontroller，从队列尾部推入 130 if (!_.contains(this.observers, viewcontroller)) { 131 this.observers.push(viewcontroller); 132 } 133 }, 134 135 unregisterObserver: function (viewcontroller) { 136 // @description 从observers的队列中剔除viewcontroller 137 this.observers = _.without(this.observers, viewcontroller); 138 }, 139 140 //统一设置所有观察者的状态，因为对应观察者也许根本不具备相关状态，所以这里需要处理 141 // setStatus: function (status) { 142 // _.each(this.observers, function (viewcontroller) { 143 // if (_.isObject(viewcontroller)) 144 // viewcontroller.setViewStatus(status); 145 // }); 146 // }, 147 148 notifyDataChanged: function () { 149 // @description 通知所有注册的观察者被观察者的数据发生变化 150 var data = http://www.mamicode.com/this.getViewModel(); 151 _.each(this.observers, function (viewcontroller) { 152 if (_.isObject(viewcontroller)) 153 _.callmethod(viewcontroller.update, viewcontroller, [data]); 154 }); 155 } 156 }); 157 158 Dalmatian.ViewController = _.inherit({ 159 160 _initialize: function () { 161 162 //用户设置的容器选择器，或者dom结构 163 this.container; 164 //根元素 165 this.$el; 166 167 //一定会出现 168 this.view; 169 //可能会出现 170 this.adapter; 171 //初始化的时候便需要设置view的状态，否则会渲染失败，这里给一个默认值 172 this.viewstatus = ‘init‘; 173 174 }, 175 176 // @description 构造函数入口 177 initialize: function (options) { 178 this._initialize(); 179 this.handleOptions(options); 180 this._handleAdapter(); 181 this.create(); 182 }, 183 184 //处理dataAdpter中的datamodel，为其注入view的默认容器数据 185 _handleAdapter: function () { 186 //不存在就不予理睬 187 if (!this.adapter) return; 188 this.adapter.registerObserver(this); 189 }, 190 191 // @description 操作构造函数传入操作 192 handleOptions: function (options) { 193 if (!options) return; 194 195 this._verify(options); 196 197 // @description 从形参中获取key和value绑定在this上 198 if (_.isObject(options)) _.extend(this, options); 199 }, 200 201 setViewStatus: function (status) { 202 this.viewstatus = status; 203 }, 204 205 // @description 验证参数 206 _verify: function (options) { 207 //这个underscore方法新框架在报错 208 // if (!_.property(‘view‘)(options) && (!this.view)) throw Error(‘view必须在实例化的时候传入ViewController‘); 209 if (options.view && (!this.view)) throw Error(‘view必须在实例化的时候传入ViewController‘); 210 }, 211 212 // @description 当数据发生变化时调用onViewUpdate，如果onViewUpdate方法不存在的话，直接调用render方法重绘 213 update: function (data) { 214 215 // _.callmethod(this.hide, this); 216 217 if (this.onViewUpdate) { 218 _.callmethod(this.onViewUpdate, this, [data]); 219 return; 220 } 221 this.render(); 222 223 // _.callmethod(this.show, this); 224 }, 225 226 /** 227 * @override 228 */ 229 render: function () { 230 // @notation 这个方法需要被复写 231 this.view.render(this.viewstatus, this.adapter && this.adapter.getViewModel()); 232 this.view.root.html(this.view.html); 233 }, 234 235 _create: function () { 236 this.render(); 237 238 //render 结束后构建好根元素dom结构 239 this.view.root.html(this.view.html); 240 this.$el = this.view.root; 241 }, 242 243 create: function () { 244 245 //l_wang这块不是很明白 246 //是否检查映射关系，不存在则recreate，但是在这里dom结构未必在document上 247 // if (!$(‘#‘ + this.view.viewid)[0]) { 248 // return _.callmethod(this.recreate, this); 249 // } 250 251 // @notation 在create方法调用前后设置onViewBeforeCreate和onViewAfterCreate两个回调 252 _.wrapmethod(this._create, ‘onViewBeforeCreate‘, ‘onViewAfterCreate‘, this); 253 254 }, 255 256 /** 257 * @description 如果进入create判断是否需要update一下页面，sync view和viewcontroller的数据 258 */ 259 _recreate: function () { 260 this.update(); 261 }, 262 263 recreate: function () { 264 _.wrapmethod(this._recreate, ‘onViewBeforeRecreate‘, ‘onViewAfterRecreate‘, this); 265 }, 266 267 //事件注册点 268 bindEvents: function (events) { 269 if (!(events || (events = _.result(this, ‘events‘)))) return this; 270 this.unBindEvents(); 271 272 // @description 解析event参数的正则 273 var delegateEventSplitter = /^(\S+)\s*(.*)$/; 274 var key, method, match, eventName, selector; 275 276 //注意，此处做简单的字符串数据解析即可，不做实际业务 277 for (key in events) { 278 method = events[key]; 279 if (!_.isFunction(method)) method = this[events[key]]; 280 if (!method) continue; 281 282 match = key.match(delegateEventSplitter); 283 eventName = match[1], selector = match[2]; 284 method = _.bind(method, this); 285 eventName += ‘.delegateEvents‘ + this.view.viewid; 286 287 if (selector === ‘‘) { 288 this.$el.on(eventName, method); 289 } else { 290 this.$el.on(eventName, selector, method); 291 } 292 } 293 294 return this; 295 }, 296 297 //取消所有事件 298 unBindEvents: function () { 299 this.$el.off(‘.delegateEvents‘ + this.view.viewid); 300 return this; 301 }, 302 303 _show: function () { 304 this.bindEvents(); 305 $(this.container).append(this.$el); 306 this.$el.show(); 307 }, 308 309 show: function () { 310 _.wrapmethod(this._show, ‘onViewBeforeShow‘, ‘onViewAfterShow‘, this); 311 }, 312 313 _hide: function () { 314 this.forze(); 315 this.$el.hide(); 316 }, 317 318 hide: function () { 319 _.wrapmethod(this._hide, ‘onViewBeforeHide‘, ‘onViewAfterHide‘, this); 320 }, 321 322 _forze: function () { 323 this.unBindEvents(); 324 }, 325 326 forze: function () { 327 _.wrapmethod(this._forze, ‘onViewBeforeForzen‘, ‘onViewAfterForzen‘, this); 328 }, 329 330 _destory: function () { 331 this.unBindEvents(); 332 this.$el.remove(); 333 // delete this; 334 }, 335 336 destory: function () { 337 _.wrapmethod(this._destory, ‘onViewBeforeDestory‘, ‘onViewAfterDestory‘, this); 338 } 339 });
代码效果如下：
每次点击刷新数据时候会模拟一次Ajax操作，将datamodel中的数据改变，然后会触发视图改变
1 events: { 2 ‘click .cui-btns-sure‘: function () { 3 var data = http://www.mamicode.com/this.$el.find(‘#ajax_data‘).val(); 4 data = http://www.mamicode.com/eval(‘(‘ + data + ‘)‘); 5 this._handleAjax(data); 6 } 7 }
1 _handleAjax: function (data) { 2 this.setViewStatus(‘loading‘); 3 this.adapter.ajaxLoading(); 4 getAjaxData($.proxy(function (data) { 5 this.setViewStatus(‘ajaxSuc‘); 6 this.adapter.ajaxSuc(data); 7 }, this), data); 8 },
ajaxSuc: function (data) { this.datamodel.ajaxData =http://www.mamicode.com/ data; this.notifyDataChanged(); }
中间又一次状态变化，将视图变为loading状态，一次数据请求成功，我们要做的是，重写viewController的render方法
1 render: function (data) { 2 //这里用户明确知道自己有没有viewdata 3 //var viewdata = http://www.mamicode.com/this.adapter.getViewModel(); 4 var wrapperSet = { 5 loading: ‘.cui-error-tips‘, 6 ajaxSuc: ‘.cui-error-tips‘ 7 }; 8 //view具有唯一包裹器 9 var root = this.view.root; 10 var selector = wrapperSet[this.viewstatus]; 11 12 if (selector) { 13 root = root.find(selector); 14 } 15 16 this.view.render(this.viewstatus, this.adapter && this.adapter.getViewModel()); 17 18 root.html(this.view.html); 19 20 },
这块逻辑需要被用户重写，因为具体每次渲染后，形成的html装载在什么位置，我们并不能确定
这里我们再写一个例子，看一看共享一个Adapter的效果
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ToDoList</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css"> 8 <link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/css/flat-ui.css"> 9 </head> 10 <body> 11 <article class="container"> 12 </article> 13 14 <div style=" border: 1px solid black; margin: 10px; padding: 10px; ">上下组件共享Adapter</div> 15 16 <article class="list"> 17 </article> 18 19 <script type="text/underscore-template" id="template-todolist"> 20 <section class="row"> 21 <div class="col-xs-9"> 22 <form action=""> 23 <legend>To Do List -- Input</legend> 24 <input type="text" placeholer="ToDoList" id="todoinput"> 25 <button class="btn btn-primary" data-action="add">添加</button> 26 </form> 27 <ul id="todolist"> 28 <%_.each(list, function(item){%> 29 <li><%=item.content %></li> 30 <%})%> 31 </ul> 32 </div> 33 </section> 34 </script> 35 36 <script type="text/underscore-template" id="template-list"> 37 <ul> 38 <%for(var i =0, len = list.length; i < len; i++) {%> 39 <li><%=list[i].content %> - <span index="<%=i %>">删除</span></li> 40 <%}%> 41 </ul> 42 </script> 43 44 <script type="text/javascript" src="../../vendor/underscore.js"></script> 45 <script type="text/javascript" src="../../vendor/zepto.js"></script> 46 <script src="../../src/underscore-extend.js" type="text/javascript"></script> 47 <script src="../../src/mvc.js" type="text/javascript"></script> 48 <script type="text/javascript"> 49 50 var View = _.inherit(Dalmatian.View, { 51 _initialize: function ($super) { 52 //设置默认属性 53 $super(); 54 this.templateSet = { 55 init: $(‘#template-todolist‘).html() 56 }; 57 } 58 }); 59 60 var Adapter = _.inherit(Dalmatian.Adapter, { 61 _initialize: function ($super) { 62 $super(); 63 this.datamodel = { 64 list: [{content: ‘测试数据01‘}, {content: ‘测试数据02‘}] 65 }; 66 }, 67 68 addItem: function (item) { 69 this.datamodel.list.push(item); 70 this.notifyDataChanged(); 71 }, 72 73 removeItem: function (index) { 74 this.datamodel.list.splice(index, 1); 75 this.notifyDataChanged(); 76 } 77 78 }); 79 80 var adapter = new Adapter(); 81 82 var Controller = _.inherit(Dalmatian.ViewController, { 83 _initialize: function ($super) { 84 $super(); 85 this.view = new View(); 86 this.adapter = adapter; 87 this.container = ‘.container‘; 88 }, 89 90 render: function () { 91 this.view.render(this.viewstatus, this.adapter && this.adapter.getViewModel()); 92 this.view.root.html(this.view.html); 93 }, 94 95 events: { 96 ‘click button‘: ‘action‘ 97 }, 98 action: function (e) { 99 e.preventDefault(); 100 var target = $(e.currentTarget).attr(‘data-action‘); 101 var strategy = { 102 ‘add‘: function (e) { 103 var value = $(‘#todoinput‘).val(); 104 this.adapter.addItem({ content: value }); 105 var s = ‘‘; 106 } 107 } 108 strategy[target].apply(this, [e]); 109 } 110 }); 111 112 var controller = new Controller(); 113 controller.show(); 114 115 116 var LView = _.inherit(Dalmatian.View, { 117 _initialize: function ($super) { 118 //设置默认属性 119 $super(); 120 this.templateSet = { 121 init: $(‘#template-list‘).html() 122 }; 123 } 124 }); 125 126 var LController = _.inherit(Dalmatian.ViewController, { 127 _initialize: function ($super) { 128 $super(); 129 this.view = new LView(); 130 this.adapter = adapter; 131 this.container = ‘.list‘; 132 }, 133 134 render: function () { 135 this.view.render(this.viewstatus, this.adapter && this.adapter.getViewModel()); 136 this.view.root.html(this.view.html); 137 }, 138 139 events: { 140 ‘click span‘: ‘action‘ 141 }, 142 action: function (e) { 143 var index = $(e.currentTarget).attr(‘index‘); 144 this.adapter.removeItem(index); 145 146 } 147 }); 148 149 var lcontroller = new LController(); 150 lcontroller.show(); 151 152 </script> 153 </body> 154 </html>
可以看到，上下的变化根源是数据操作，每次数据的变化是共享的
结语
今天更正了上一次留下来的wrapperSet思维，这里对自己所知的MVC做了一次梳理
然后框架在一次次修改中逐步成型了，是个好现象，慢慢来吧
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。