前言
之前我们为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>
完成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 = properties[k];
55
56 //满足条件就重写
57 if (ancestor && typeof value == ‘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 = (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);
underscore-extend
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 };
Util
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 = 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 });
完整MVC想法
代码效果如下：
每次点击刷新数据时候会模拟一次Ajax操作，将datamodel中的数据改变，然后会触发视图改变
1 events: {
2 ‘click .cui-btns-sure‘: function () {
3 var data = this.$el.find(‘#ajax_data‘).val();
4 data = 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 = data;
this.notifyDataChanged();
}
中间又一次状态变化，将视图变为loading状态，一次数据请求成功，我们要做的是，重写viewController的render方法
1 render: function (data) {
2 //这里用户明确知道自己有没有viewdata
3 //var viewdata = 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做了一次梳理
然后框架在一次次修改中逐步成型了，是个好现象，慢慢来吧
时间： 2024-11-07 16:07:53