前言
我们上次写了一个简单的日历插件，但是只是一个半成品，而且做完后发现一些问题，于是我们今天尝试来解决这些问题
PS：距离上次貌似很久了
上次，我们大概遇到哪些问题呢：
① 既然想做一套UI库，那么就应该考虑其它UI库的接入问题
这个意思就是，我们的系统中所有UI插件应该有一些统一行为，我们如果希望统一为所有的插件加一点什么东西，需要有位置可加
这个意味着，可能我们所有的插件需要继承至一个抽象的UI类，并且该类提供了通用的几个事件点
② 上次做的日历插件虽然说是简单，其耦合还是比较严重的（其实也说不上，但是人总有想装B的时候）
这个怎么说呢，就日历而言，我们可以将之分成三个部分
1 日历核心部分，用于生产静态html
2 日历数据部分，用于显示各个特殊信息，比如节日什么的
3 日历事件部分，现在的想法便是可以将事件相关给抽象出来
目的便是html/data/events 分开一点点，这个该怎么做呢？这是我们今天该思考的问题
事情多了就什么都不能解决，所以我们今天暂时便处理以上两个问题即可
MVC的学习
由于我们会依赖于underscore，所以，我们这里有一个underscore的扩展，加一些我们自己需要的东西
(function () {
// @description 全局可能用到的变量
var arr = [];
var slice = arr.slice;
var method = method || {};
/**
* @description inherit方法，js的继承，默认为两个参数
* @param {function} supClass 可选，要继承的类
* @param {object} subProperty 被创建类的成员
* @return {function} 被创建的类
*/
method.inherit = function () {
// @description 参数检测，该继承方法，只支持一个参数创建类，或者两个参数继承类
if (arguments.length === 0 || arguments.length > 2) throw '参数错误';
var parent = null;
// @description 将参数转换为数组
var properties = slice.call(arguments);
// @description 如果第一个参数为类（function），那么就将之取出
if (typeof properties[0] === 'function')
parent = properties.shift();
properties = properties[0];
// @description 创建新类用于返回
function klass() {
if (_.isFunction(this.initialize))
this.initialize.apply(this, arguments);
}
klass.superclass = parent;
// parent.subclasses = [];
if (parent) {
// @description 中间过渡类，防止parent的构造函数被执行
var subclass = function () { };
subclass.prototype = parent.prototype;
klass.prototype = new subclass();
// parent.subclasses.push(klass);
}
var ancestor = klass.superclass && klass.superclass.prototype;
for (var k in properties) {
var value = properties[k];
//满足条件就重写
if (ancestor && typeof value == 'function') {
var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/i, '').split(',');
//只有在第一个参数为$super情况下才需要处理（是否具有重复方法需要用户自己决定）
if (argslist[0] === '$super' && ancestor[k]) {
value = (function (methodName, fn) {
return function () {
var scope = this;
var args = [function () {
return ancestor[methodName].apply(scope, arguments);
} ];
return fn.apply(this, args.concat(slice.call(arguments)));
};
})(k, value);
}
}
//此处对对象进行扩展，当前原型链已经存在该对象，便进行扩展
if (_.isObject(klass.prototype[k]) && _.isObject(value) && (typeof klass.prototype[k] != 'function' && typeof value != 'fuction')) {
//原型链是共享的，这里不好办
var temp = {};
_.extend(temp, klass.prototype[k]);
_.extend(temp, value);
klass.prototype[k] = temp;
} else {
klass.prototype[k] = value;
}
}
if (!klass.prototype.initialize)
klass.prototype.initialize = function () { };
klass.prototype.constructor = klass;
return klass;
};
_.extend(_, method);
})(window);
对的，以上是我们前面实现的继承，我们将之扩展至underscore上，以后以此实现继承
其次，我们便需要思考如何分离我们的数据/模板/事件了
View/Adapter/ViewController
俗话说，大树底下好乘凉，事实上我一些想法来自于我的老大，我老大又借鉴了原来的ios开发，所以这里形成了一些东西，不知道是否合理，我们拿出来看看
View
首先，无论如何我们的应用都会有一个view的存在，我们认为view只做简单的页面渲染就好，与之有关的数据/事件什么的，我们不予关注
// @description 正式的声明Dalmatian框架的命名空间
var Dalmatian = Dalmatian || {}; // @description 定义默认的template方法来自于underscore
Dalmatian.template = _.template;
Dalmatian.View = _.inherit({
// @description 构造函数入口
initialize: function(options) {
this._initialize();
this.handleOptions(options); }, // @description 设置默认属性
_initialize: function() { var DEFAULT_CONTAINER_TEMPLATE = '<section class="view" id="<%=viewid%>"><%=html%></section>'; // @description view状态机
// this.statusSet = {}; this.defaultContainerTemplate = DEFAULT_CONTAINER_TEMPLATE; // @override
// @description template集合，根据status做template的map
// @example
// { 0: '<ul><%_.each(list, function(item){%><li><%=item.name%></li><%});%></ul>' }
// this.templateSet = {}; this.viewid = _.uniqueId('dalmatian-view-'); }, // @description 操作构造函数传入操作
handleOptions: function(options) {
// @description 从形参中获取key和value绑定在this上
if (_.isObject(options)) _.extend(this, options); }, // @description 通过模板和数据渲染具体的View
// @param status {enum} View的状态参数
// @param data {object} 匹配View的数据格式的具体数据
// @param callback {functiion} 执行完成之后的回调
render: function(status, data, callback) { var templateSelected = this.templateSet[status];
if (templateSelected) { try {
// @description 渲染view
var templateFn = Dalmatian.template(templateSelected);
this.html = templateFn(data); // @description 在view外层加入外壳
templateFn = Dalmatian.template(this.defaultContainerTemplate);
this.html = templateFn({
viewid: this.viewid,
html: this.html
}); this.currentStatus = status; _.callmethod(callback, this); return true; } catch (e) { throw e; } finally { return false;
}
}
}, // @override
// @description 可以被复写，当status和data分别发生变化时候
// @param status {enum} view的状态值
// @param data {object} viewmodel的数据
update: function(status, data) { if (!this.currentStatus || this.currentStatus !== status) {
return this.render(status, data);
} // @override
// @description 可复写部分，当数据发生变化但是状态没有发生变化时，页面仅仅变化的可以是局部显示
// 可以通过获取this.html进行修改
_.callmethod(this.onUpdate, this);
}
});
从代码上看，我们需要注意几个事情：
① View会生成静态HTML
② View会根据当前状态、当前数据生成静态HTML
所以，我们的View事实上只会生成静态HTML，不同的是他会根据不同的状态生成不同的HTML，比如初始状态和加载结束状态
有了View便缺不了数据，也就是所谓的Model，我们这里给他取一个名字，Adapter
Adapter
Dalmatian.Adapter = _.inherit({
// @description 构造函数入口
initialize: function(options) {
this._initialize();
this.handleOptions(options);
},
// @description 设置默认属性
_initialize: function() {
this.observers = [];
this.viewmodel = {};
this.datamodel = {};
},
// @description 操作构造函数传入操作
handleOptions: function(options) {
// @description 从形参中获取key和value绑定在this上
if (_.isObject(options)) _.extend(this, options);
},
// @description 设置
format: function(origindata){
this.datamodel = origindata;
this.viewmodel = this.parse(origindata);
return this.viewmodel;
},
// @override
// @description parse方法用来将datamodel转化为viewmodel，必须被重写
parse: function(origindata) {
throw Error('方法必须被重写');
},
registerObserver: function(viewcontroller) {
// @description 检查队列中如果没有viewcontroller，从队列尾部推入
if (!_.contains(this.observers, viewcontroller)) {
this.observers.push(viewcontroller);
}
},
unregisterObserver: function(viewcontroller) {
// @description 从observers的队列中剔除viewcontroller
this.observers = _.without(this.observers, viewcontroller);
},
notifyDataChanged: function() {
// @description 通知所有注册的观察者被观察者的数据发生变化
var data = this.format(this.datamodel);
_.each(this.observers, function(viewcontroller) {
if (_.isObject(viewcontroller))
_.callmethod(viewcontroller.update, viewcontroller, [data]);
});
}
});
Adapter由以下几个关键组成：
① View观察者
② 数据模型，便是原始的数据
③ viewModel，便是view实际需要的数据
并且每一次数据的改变会通知观察的view，触发其update，所以Adapter的组成也比较干脆，并不复杂
但是，我们的view仍然没有事件，而且Adapter也没有与view联系起来，这个时候我们缺少一个要件，他的名字是Controller
ViewController
控制器是链接模型与视图的桥梁，我们这里也不例外，核心动作皆会在控制器处完成
Dalmatian.ViewController = _.inherit({
// @description 构造函数入口
initialize: function (options) {
this.handleOptions(options);
this.create();
},
// @description 操作构造函数传入操作
handleOptions: function (options) {
this._verify(options);
// @description 从形参中获取key和value绑定在this上
if (_.isObject(options)) _.extend(this, options);
},
// @description 验证参数
_verify: function (options) {
if (!_.property('view')(options)) throw Error('view必须在实例化的时候传入ViewController');
},
// @description 当数据发生变化时调用onViewUpdate，如果onViewUpdate方法不存在的话，直接调用render方法重绘
update: function (data) {
_.callmethod(this.hide, this);
if (!_.callmethod(this.onViewUpdate, this, [data])) {
this.render();
}
_.callmethod(this.show, this);
},
/**
* @description 传入事件对象，解析之，解析event，返回对象{events: [{target: '#btn', event:'click', callback: handler}]}
* @param events {obj} 事件对象，默认传入唯一id
* @param namespace 事件命名空间
* @return {obj}
*/
parseEvents: function (events) {
//用于返回的事件对象
var eventArr = [];
//注意，此处做简单的字符串数据解析即可，不做实际业务
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) method = this[events[key]];
if (!method) continue;
var match = key.match(delegateEventSplitter);
var eventName = match[1],
selector = match[2];
method = _.bind(method, this);
eventName += '.delegateEvents' + this.view.viewid;
eventArr.push({
target: selector,
event: eventName,
callback: method
});
}
return eventArr;
},
/**
* @override
*
*/
render: function() {
// @notation 这个方法需要被复写
// var data = this.adapter.format(this.origindata);
// this.view.render(this.viewstatus, data);
},
_create: function () {
this.render();
},
create: function () {
var $element = selectDom(this.view.viewid);
if (domImplement($element, 'get', false, [0])) {
return _.callmethod(this.recreate, this);
}
// @notation 在create方法调用前后设置onViewBeforeCreate和onViewAfterCreate两个回调
_.wrapmethod(this._create, 'onViewBeforeCreate', 'onViewAfterCreate', this);
},
/**
* @description 如果进入create判断是否需要update一下页面，sync view和viewcontroller的数据
*/
_recreate: function () {
this.update();
},
recreate: function () {
_.wrapmethod(this._recreate, 'onViewBeforeRecreate', 'onViewAfterRecreate', this);
},
_bind: function () {
this.viewcontent = createDom(this.view.html);
var eventsList = this.parseEvents(this.events);
var scope = this;
_.each(eventsList, function (item) {
if (item.target === '') {
eventmethod(scope.viewcontent, 'on', item.event, item.callback, scope);
} else {
eventmethod(scope.viewcontent, 'on', item.event, item.callback, scope, item.target);
}
});
},
bind: function () {
_.wrapmethod(this._bind, 'onViewBeforeBind', 'onViewAfterBind', this);
},
_show: function () {
var $element = selectDom('#' + this.view.viewid);
// @notation 需要剔除码？
// if ((!$element || $element.length === 0) && this.viewcontent) {
var $container = selectDom(this.container);
domImplement($container, 'html', false, [this.viewcontent]);
// }
domImplement($element, 'show');
},
show: function () {
this.bind();
_.wrapmethod(this._show, 'onViewBeforeShow', 'onViewAfterShow', this);
},
_hide: function () {
var $element = selectDom('#' + this.view.viewid);
domImplement($element, 'hide');
},
hide: function () {
_.wrapmethod(this._hide, 'onViewBeforeHide', 'onViewAfterHide', this);
this.forze();
},
_forze: function () {
var $element = selectDom('#' + this.view.viewid);
domImplement($element, 'off');
},
forze: function () {
_.wrapmethod(this._forze, 'onViewBeforeForzen', 'onViewAfterForzen', this);
},
_destory: function () {
var $element = selectDom('#' + this.view.viewid).remove();
domImplement($element, 'remove');
},
destory: function () {
_.wrapmethod(this._destory, 'onViewBeforeDestory', 'onViewAfterDestory', this);
}
});
control这里便有所不同，会稍微复杂一点点
① 首先，他会验证自己是否含有view参数，我们这里要求一个控制器必须对应一个view，如果没有指定的话便认为错误
if (!_.property('view')(options)) throw Error('view必须在实例化的时候传入ViewController');
② 然后主要有几个关键事件点，第一个是create
PS：这里会区分是否二次创建该View，这个判断事实上不应该通过dom是否存在来判断，这里后期优化
create调用便会调用view的render方法，然后便会构建相关的dom结构，并且append到container中
③ 第二个关键事件点为show，调用时，dom会真正的显示，并且绑定事件
PS：事件这块借鉴的Backbone的机制，全部绑定值根元素，具体优化后面再说吧
④ 除此之外还有hide、forze（解除事件句柄，释放资源）、destroy等不详说了
说了这么多都是扯淡，我们下面以两个简单的例子做一次说明
实例说明
MVC学习完整代码
有不对的地方请提出
"use strict"; // @notation 本框架默认是以来于zepto。这里构建了基础的方法层,当用户使用其他框架时，可能需要复写这几个基础方法 // @description 解析event参数的正则
var delegateEventSplitter = /^(\S+)\s*(.*)$/;
// Regular expression used to split event strings.
var eventSplitter = /\s+/; // ----------------------------------------------------
// @notation 从backbone中借鉴而来，用来多事件绑定的events // Implement fancy features of the Events API such as multiple event
// names `"change blur"` and jQuery-style event maps `{change: action}`
// in terms of the existing API.
var eventoperator = function(obj, action, name, rest) {
if (!name) return true; // Handle event maps.
if (typeof name === 'object') {
for (var key in name) {
obj[action].apply(obj, [key, name[key]].concat(rest));
}
return false;
} // Handle space separated event names.
if (eventSplitter.test(name)) {
var names = name.split(eventSplitter);
for (var i = 0, length = names.length; i < length; i++) {
obj[action].apply(obj, [names[i]].concat(rest));
}
return false;
} return true;
};
// ---------------------------------------------------- // @notation 默认使用zepto的事件委托机制
function eventmethod(obj, action, name, callback, context, subobj) {
// _.bind(callback, context || this); var delegate = function(target, eventName, eventCallback, subtarget) {
if (subtarget) {
target.on(eventName, subtarget, eventCallback);
}else{
target.on(eventName, eventCallback);
}
}; var undelegate = function(target, eventName, eventCallback, subtarget) {
if (subtarget) {
target.off(eventName, subtarget, eventCallback);
}else{
target.off(eventName, eventCallback);
}
}; var trigger = function(target, eventName, subtarget) {
if (subtarget) {
target.find(subtarget).trigger(eventName);
}else{
target.trigger(eventName);
}
}; var map = {
'on': delegate,
'bind': delegate,
'off': undelegate,
'unbind': undelegate,
'trigger': trigger
}; if (_.isFunction(map[action])) {
map[action](obj, name, callback, subobj);
} } // @description 选择器
function selectDom(selector) {
return $(selector);
} function domImplement($element, action, context, param) {
if (_.isFunction($element[action]))
$element[action].apply(context || $element, param);
} function createDom (html) {
return $(html);
} // --------------------------------------------------- //
// ------------------华丽的分割线--------------------- // // @description 正式的声明Dalmatian框架的命名空间
var Dalmatian = Dalmatian || {}; // @description 定义默认的template方法来自于underscore
Dalmatian.template = _.template;
Dalmatian.View = _.inherit({
// @description 构造函数入口
initialize: function(options) {
this._initialize();
this.handleOptions(options); }, // @description 设置默认属性
_initialize: function() { var DEFAULT_CONTAINER_TEMPLATE = '<section class="view" id="<%=viewid%>"><%=html%></section>'; // @description view状态机
// this.statusSet = {}; this.defaultContainerTemplate = DEFAULT_CONTAINER_TEMPLATE; // @override
// @description template集合，根据status做template的map
// @example
// { 0: '<ul><%_.each(list, function(item){%><li><%=item.name%></li><%});%></ul>' }
// this.templateSet = {}; this.viewid = _.uniqueId('dalmatian-view-'); }, // @description 操作构造函数传入操作
handleOptions: function(options) {
// @description 从形参中获取key和value绑定在this上
if (_.isObject(options)) _.extend(this, options); }, // @description 通过模板和数据渲染具体的View
// @param status {enum} View的状态参数
// @param data {object} 匹配View的数据格式的具体数据
// @param callback {functiion} 执行完成之后的回调
render: function(status, data, callback) { var templateSelected = this.templateSet[status];
if (templateSelected) { try {
// @description 渲染view
var templateFn = Dalmatian.template(templateSelected);
this.html = templateFn(data); // @description 在view外层加入外壳
templateFn = Dalmatian.template(this.defaultContainerTemplate);
this.html = templateFn({
viewid: this.viewid,
html: this.html
}); this.currentStatus = status; _.callmethod(callback, this); return true; } catch (e) { throw e; } finally { return false;
}
}
}, // @override
// @description 可以被复写，当status和data分别发生变化时候
// @param status {enum} view的状态值
// @param data {object} viewmodel的数据
update: function(status, data) { if (!this.currentStatus || this.currentStatus !== status) {
return this.render(status, data);
} // @override
// @description 可复写部分，当数据发生变化但是状态没有发生变化时，页面仅仅变化的可以是局部显示
// 可以通过获取this.html进行修改
_.callmethod(this.onUpdate, this);
}
}); Dalmatian.Adapter = _.inherit({ // @description 构造函数入口
initialize: function(options) {
this._initialize();
this.handleOptions(options); }, // @description 设置默认属性
_initialize: function() {
this.observers = [];
this.viewmodel = {};
this.datamodel = {};
}, // @description 操作构造函数传入操作
handleOptions: function(options) {
// @description 从形参中获取key和value绑定在this上
if (_.isObject(options)) _.extend(this, options);
}, // @description 设置
format: function(origindata){
this.datamodel = origindata;
this.viewmodel = this.parse(origindata);
return this.viewmodel;
}, // @override
// @description parse方法用来将datamodel转化为viewmodel，必须被重写
parse: function(origindata) {
throw Error('方法必须被重写');
}, registerObserver: function(viewcontroller) {
// @description 检查队列中如果没有viewcontroller，从队列尾部推入
if (!_.contains(this.observers, viewcontroller)) {
this.observers.push(viewcontroller);
}
}, unregisterObserver: function(viewcontroller) {
// @description 从observers的队列中剔除viewcontroller
this.observers = _.without(this.observers, viewcontroller);
}, notifyDataChanged: function() {
// @description 通知所有注册的观察者被观察者的数据发生变化
var data = this.format(this.datamodel);
_.each(this.observers, function(viewcontroller) {
if (_.isObject(viewcontroller))
_.callmethod(viewcontroller.update, viewcontroller, [data]);
});
}
}); Dalmatian.ViewController = _.inherit({ // @description 构造函数入口
initialize: function (options) {
this.handleOptions(options);
this.create();
}, // @description 操作构造函数传入操作
handleOptions: function (options) {
this._verify(options); // @description 从形参中获取key和value绑定在this上
if (_.isObject(options)) _.extend(this, options);
}, // @description 验证参数
_verify: function (options) {
if (!_.property('view')(options)) throw Error('view必须在实例化的时候传入ViewController');
}, // @description 当数据发生变化时调用onViewUpdate，如果onViewUpdate方法不存在的话，直接调用render方法重绘
update: function (data) { _.callmethod(this.hide, this); if (!_.callmethod(this.onViewUpdate, this, [data])) {
this.render();
} _.callmethod(this.show, this);
}, /**
* @description 传入事件对象，解析之，解析event，返回对象{events: [{target: '#btn', event:'click', callback: handler}]}
* @param events {obj} 事件对象，默认传入唯一id
* @param namespace 事件命名空间
* @return {obj}
*/
parseEvents: function (events) { //用于返回的事件对象
var eventArr = [];
//注意，此处做简单的字符串数据解析即可，不做实际业务
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) method = this[events[key]];
if (!method) continue; var match = key.match(delegateEventSplitter);
var eventName = match[1],
selector = match[2];
method = _.bind(method, this);
eventName += '.delegateEvents' + this.view.viewid;
eventArr.push({
target: selector,
event: eventName,
callback: method
});
} return eventArr;
}, /**
* @override
*
*/
render: function() {
// @notation 这个方法需要被复写
// var data = this.adapter.format(this.origindata);
// this.view.render(this.viewstatus, data);
}, _create: function () {
this.render();
}, create: function () { var $element = selectDom(this.view.viewid);
if (domImplement($element, 'get', false, [0])) {
return _.callmethod(this.recreate, this);
} // @notation 在create方法调用前后设置onViewBeforeCreate和onViewAfterCreate两个回调
_.wrapmethod(this._create, 'onViewBeforeCreate', 'onViewAfterCreate', this); }, /**
* @description 如果进入create判断是否需要update一下页面，sync view和viewcontroller的数据
*/
_recreate: function () {
this.update();
}, recreate: function () {
_.wrapmethod(this._recreate, 'onViewBeforeRecreate', 'onViewAfterRecreate', this);
}, _bind: function () {
this.viewcontent = createDom(this.view.html); var eventsList = this.parseEvents(this.events); var scope = this;
_.each(eventsList, function (item) { if (item.target === '') {
eventmethod(scope.viewcontent, 'on', item.event, item.callback, scope);
} else {
eventmethod(scope.viewcontent, 'on', item.event, item.callback, scope, item.target);
} });
}, bind: function () {
_.wrapmethod(this._bind, 'onViewBeforeBind', 'onViewAfterBind', this);
}, _show: function () {
var $element = selectDom('#' + this.view.viewid); // @notation 需要剔除码？
// if ((!$element || $element.length === 0) && this.viewcontent) {
var $container = selectDom(this.container);
domImplement($container, 'html', false, [this.viewcontent]);
// } domImplement($element, 'show');
}, show: function () {
this.bind(); _.wrapmethod(this._show, 'onViewBeforeShow', 'onViewAfterShow', this);
}, _hide: function () {
var $element = selectDom('#' + this.view.viewid);
domImplement($element, 'hide');
}, hide: function () {
_.wrapmethod(this._hide, 'onViewBeforeHide', 'onViewAfterHide', this); this.forze();
}, _forze: function () {
var $element = selectDom('#' + this.view.viewid);
domImplement($element, 'off');
}, forze: function () {
_.wrapmethod(this._forze, 'onViewBeforeForzen', 'onViewAfterForzen', this);
}, _destory: function () {
var $element = selectDom('#' + this.view.viewid).remove();
domImplement($element, 'remove');
}, destory: function () {
_.wrapmethod(this._destory, 'onViewBeforeDestory', 'onViewAfterDestory', this);
}
});
underscore扩展
(function () {
// @description 全局可能用到的变量
var arr = [];
var slice = arr.slice;
var method = method || {};
/**
* @description inherit方法，js的继承，默认为两个参数
* @param {function} supClass 可选，要继承的类
* @param {object} subProperty 被创建类的成员
* @return {function} 被创建的类
*/
method.inherit = function () {
// @description 参数检测，该继承方法，只支持一个参数创建类，或者两个参数继承类
if (arguments.length === 0 || arguments.length > 2) throw '参数错误';
var parent = null;
// @description 将参数转换为数组
var properties = slice.call(arguments);
// @description 如果第一个参数为类（function），那么就将之取出
if (typeof properties[0] === 'function')
parent = properties.shift();
properties = properties[0];
// @description 创建新类用于返回
function klass() {
if (_.isFunction(this.initialize))
this.initialize.apply(this, arguments);
}
klass.superclass = parent;
// parent.subclasses = [];
if (parent) {
// @description 中间过渡类，防止parent的构造函数被执行
var subclass = function () { };
subclass.prototype = parent.prototype;
klass.prototype = new subclass();
// parent.subclasses.push(klass);
}
var ancestor = klass.superclass && klass.superclass.prototype;
for (var k in properties) {
var value = properties[k];
//满足条件就重写
if (ancestor && typeof value == 'function') {
var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/i, '').split(',');
//只有在第一个参数为$super情况下才需要处理（是否具有重复方法需要用户自己决定）
if (argslist[0] === '$super' && ancestor[k]) {
value = (function (methodName, fn) {
return function () {
var scope = this;
var args = [function () {
return ancestor[methodName].apply(scope, arguments);
} ];
return fn.apply(this, args.concat(slice.call(arguments)));
};
})(k, value);
}
}
//此处对对象进行扩展，当前原型链已经存在该对象，便进行扩展
if (_.isObject(klass.prototype[k]) && _.isObject(value) && (typeof klass.prototype[k] != 'function' && typeof value != 'fuction')) {
//原型链是共享的，这里不好办
var temp = {};
_.extend(temp, klass.prototype[k]);
_.extend(temp, value);
klass.prototype[k] = temp;
} else {
klass.prototype[k] = value;
}
}
if (!klass.prototype.initialize)
klass.prototype.initialize = function () { };
klass.prototype.constructor = klass;
return klass;
};
// @description 返回需要的函数
method.getNeedFn = function (key, scope) {
scope = scope || window;
if (_.isFunction(key)) return key;
if (_.isFunction(scope[key])) return scope[key];
return function () { };
};
method.callmethod = function (method, scope, params) {
scope = scope || this;
if (_.isFunction(method)) {
method.apply(scope, params);
return true;
}
return false;
};
/**
* @description 在fn方法的前后通过键值设置两个传入的回调
* @param fn {function} 调用的方法
* @param beforeFnKey {string} 从context对象中获得的函数指针的键值，该函数在fn前执行
* @param afterFnKey {string} 从context对象中获得的函数指针的键值，该函数在fn后执行
* @param context {object} 执行环节的上下文
* @return {function}
*/
method.wrapmethod = method.insert = function (fn, beforeFnKey, afterFnKey, context) {
var scope = context || this;
var action = _.wrap(fn, function (func) {
_.callmethod(_.getNeedFn(beforeFnKey, scope), scope);
func.call(scope);
_.callmethod(_.getNeedFn(afterFnKey, scope), scope);
});
return _.callmethod(action, scope);
}
_.extend(_, method);
})(window);
简单alert框
首先我们来做一个简单的alert框，这个框在我们点击界面时候弹出一个提示，提示文字由文本框给出
第一步便是简单的HTML了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDoList</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/css/flat-ui.css">
<link href="../style/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.cui-alert { width: auto; position: static; }
.txt { border: #cfcfcf 1px solid; margin: 10px 0; width: 80%; }
</style>
</head>
<body>
<article class="container">
</article>
<input type="text" id="addmsg" class="txt">
<button id="addbtn" class="btn">
show message</button>
<script type="text/underscore-template" id="template-alert">
<div class=" cui-alert" >
<div class="cui-pop-box">
<div class="cui-bd">
<p class="cui-error-tips"><%=content%></p>
<div class="cui-roller-btns">
<div class="cui-flexbd cui-btns-cancel"><%=cancel%></div>
<div class="cui-flexbd cui-btns-sure"><%=confirm%></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript" src="../../vendor/underscore-min.js"></script>
<script type="text/javascript" src="../../vendor/zepto.min.js"></script>
<script src="../../src/underscore.extend.js" type="text/javascript"></script>
<script src="../../src/mvc.js" type="text/javascript"></script>
<script type="text/javascript" src="ui.alert.js"></script>
</body>
</html>
因为该插件本身比较简单，不存在状态值便会，所以view定义如此即可
var htmltemplate = $('#template-alert').html();
var AlertView = _.inherit(Dalmatian.View, {
templateSet: {
0: htmltemplate
},
statusSet: {
STATUS_INIT: 0
}
});
Adapter也比较简单
var Adapter = _.inherit(Dalmatian.Adapter, {
parse: function (data) {
return data;
}
});
现在重点便是controller了
var Controller = _.inherit(Dalmatian.ViewController, {
render: function () {
var data = this.adapter.viewmodel;
this.view.render(this.viewstatus, data);
},
set: function (options) {
this.adapter.datamodel.content = options.content;
this.adapter.notifyDataChanged();
},
events: {
"click .cui-btns-cancel": "cancelaction"
},
cancelaction: function () {
this.onCancelBtnClick();
},
attr: function (key, value) {
this[key] = value;
}
});
这里有个不一样的地方便是，这里有一个Adapter的set方法，set之后会改变其状态，这里会发生一次通知view更新的动作
最后我们将之串联起来
var view = new AlertView()
var adapter = new Adapter();
var controller = new Controller({
view: view,
adapter: adapter,
container: '.container',
onViewBeforeCreate: function () { var origindata = {
content: 'fuck',
confirm: 'confirmbtn',
cancel: 'cancelbtn'
} this.adapter.format(origindata); this.adapter.registerObserver(this);
this.viewstatus = this.view.statusSet.STATUS_INIT;
},
onCancelBtnClick: function () {
alert('cancel 2')
}
});
然后我们写一段业务代码
$('#addbtn').on('click', function (e) {
var content = $('#addmsg').val();
// adapter.datamodel.content = content;
// adapter.notifyDataChanged();
controller.set({ content: content });
controller.show();
});
基本完成我们的操作了
事实上，我对这段代码并不是十分满意，于是，我们这里做一次简单重构：
var htmltemplate = $('#template-alert').html();
var AlertView = _.inherit(Dalmatian.View, {
templateSet: {
0: htmltemplate
},
statusSet: {
STATUS_INIT: 0
}
});
var Adapter = _.inherit(Dalmatian.Adapter, {
parse: function (data) {
return data;
}
});
var Controller = _.inherit(Dalmatian.ViewController, {
//设置默认信息
_initialize: function () {
this.origindata = {
content: '',
confirm: '确定',
cancel: '取消'
}
},
initialize: function ($super, opts) {
this._initialize();
$super(opts);
this._init();
},
//基础数据处理
_init: function () {
this.adapter.format(this.origindata);
this.adapter.registerObserver(this);
this.viewstatus = this.view.statusSet.STATUS_INIT;
},
render: function () {
var data = this.adapter.viewmodel;
this.view.render(this.viewstatus, data);
},
set: function (options) {
_.extend(this.adapter.datamodel, options);
// this.adapter.datamodel.content = options.content;
this.adapter.notifyDataChanged();
},
events: {
"click .cui-btns-cancel": "cancelaction"
},
cancelaction: function () {
this.onCancelBtnClick();
}
});
var view = new AlertView()
var adapter = new Adapter();
var controller = new Controller({
view: view,
adapter: adapter,
container: '.container',
onCancelBtnClick: function () {
alert('cancel 2')
}
});
$('#addbtn').on('click', function (e) {
var content = $('#addmsg').val();
// adapter.datamodel.content = content;
// adapter.notifyDataChanged();
controller.set({ content: content, confirm: '确定1' });
controller.show();
});
这个例子结束后，我们来写另一个例子
todolist
Backbone有一个todoList，我们这里也来写一个阉割版的，因为若是今天全部时间来写这个，后面就没法继续了
这个例子事实上也比较简单了，首先看我们的HTML结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDoList</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/css/flat-ui.css">
</head>
<body>
<article class="container">
</article>
<script type="text/underscore-template" id="template-todolist">
<section class="row">
<div class="col-xs-9">
<form action="">
<legend>To Do List -- Input</legend>
<input type="text" placeholer="ToDoList" id="todoinput">
<button class="btn btn-primary" data-action="add">添加</button>
</form>
<ul id="todolist">
<%_.each(list, function(item){%>
<li><%=item.content %></li>
<%})%>
</ul>
</div>
</section>
</script>
<script type="text/javascript" src="../../vendor/underscore-min.js"></script>
<script type="text/javascript" src="../../vendor/zepto.min.js"></script>
<script src="../../src/underscore.extend.js" type="text/javascript"></script>
<script src="../../src/mvc.js" type="text/javascript"></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
其次是我们的js
var htmltemplate = $('#template-todolist').html();
var view = new Dalmatian.View({
templateSet: {
0:htmltemplate
},
statusSet: {
STATUS_INIT: 0
}
});
var Adapter = _.inherit(Dalmatian.Adapter, {
parse: function (origindata) {
return origindata;
}
});
var Controller = _.inherit(Dalmatian.ViewController, {
render: function() {
console.log('controller-render')
var data = this.adapter.viewmodel;
this.view.render(this.viewstatus, data);
},
events: {
'click button': 'action'
},
action: function(e) {
e.preventDefault();
var target = $(e.currentTarget).attr('data-action');
var strategy = {
'add': function(e) {
var value = $('#todoinput').val();
this.adapter.datamodel.list.push({ content: value });
// this.adapter.parse(this.adapter.datamodel);
this.adapter.notifyDataChanged();
}
}
strategy[target].apply(this, [e]);
}
})
var controller = new Controller({
view: view,
adapter: new Adapter(),
container: '.container',
onViewBeforeCreate: function () {
this.adapter.format({
list: []
});
this.adapter.registerObserver(this);
this.viewstatus = this.view.statusSet.STATUS_INIT
}
});
controller.show();
阶段总结
MVC的学习暂时到这里，我们下面继续日历的的东西，虽然我与老大商量后形成了一些自己觉得不错的东西，但是真正使用过程中还是发现一些问题
① 第一个我认为比较大的问题是viewController中的代码，比如
var controller = new Controller({
view: view,
adapter: new Adapter(),
container: '.container',
onViewBeforeCreate: function () {
this.adapter.format({
list: []
});
this.adapter.registerObserver(this);
this.viewstatus = this.view.statusSet.STATUS_INIT
}
});
以及
var controller = new Controller({
view: view,
adapter: adapter,
container: '.container',
onCancelBtnClick: function () {
alert('cancel 2')
}
});
事实上这些代码不应该存在于此，真实情况下我所构想的viewController不会在实例化时候还有如此多的业务相关信息，viewController在实例化时候只应该包含系统级的东西
比如Controller释放出来的接口，比如全局消息监听什么的，显然我们上面代码中的做法是有问题的，这些东西事实上应该在定义ViewController类时，在继承处得到处理
不应该在实例化时候处理，我们viewController实例化时候应该有更重要的使命，这些留待下面解决
上面要表达的意思是，事实上我们ViewController是最后继承下来是需要干业务的事情，所以他应该在几个事件点将要干的事情做完，比如TodoList应该是这样的
var htmltemplate = $('#template-todolist').html();
var Adapter = _.inherit(Dalmatian.Adapter, {
parse: function (origindata) {
return origindata;
}
});
var Controller = _.inherit(Dalmatian.ViewController, {
//设置默认信息
_initialize: function () {
this.view = new Dalmatian.View({
templateSet: {
0: htmltemplate
},
statusSet: {
STATUS_INIT: 0
}
});
this.adapter = new Adapter();
},
initialize: function ($super, opts) {
this._initialize();
$super(opts);
},
render: function () {
console.log('controller-render')
var data = this.adapter.viewmodel;
this.view.render(this.viewstatus, data);
},
container: '.container',
onViewBeforeCreate: function () {
this.adapter.format({
list: []
});
this.adapter.registerObserver(this);
this.viewstatus = this.view.statusSet.STATUS_INIT
},
events: {
'click button': 'action'
},
action: function (e) {
e.preventDefault();
var target = $(e.currentTarget).attr('data-action');
var strategy = {
'add': function (e) {
var value = $('#todoinput').val();
this.adapter.datamodel.list.push({ content: value });
// this.adapter.parse(this.adapter.datamodel);
this.adapter.notifyDataChanged();
}
}
strategy[target].apply(this, [e]);
}
})
var controller = new Controller();
controller.show();
这样的话，业务应该的代码事实上写到了类的几个事件点中了，这些会在实例化时不同的状态被触发，所以根本不必在实例化时做任何操作
实例化时候应该有他的作用，因为继承到这一层的时候，该业务类便专注于处理这个业务了
简单日历
上次，我们的日历基本都成型了，今天我们便根据前面的想法为他做一次封装......
PS：想想有点很傻很天真的感觉......现在的问题是要将原来一个基本算总体的东西，分成三个部分，说实话这样封装的结构首先是让人阅读上稍微困难了
首先仍然是定义view的事情，首先一来就遇到个比较烦的地方，因为之前我们将模板分的很细：
① 星期显示模板
② 月模板
③ 日模板
所以，我们这里便不太好区分，而且还有一定嵌套关系，这里小钗费了一点功夫......
由这块的操作，我们甚至可以调整原来view的逻辑，优化由此一点一点慢慢就开始了......
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDoList</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/css/flat-ui.css">
<link href="../style/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.cui-alert { width: auto; position: static; }
.txt { border: #cfcfcf 1px solid; margin: 10px 0; width: 80%; }
ul, li { padding: 0; margin: 0; }
.cui_calendar, .cui_week { list-style: none; }
.cui_calendar li, .cui_week li { float: left; width: 14%; overflow: hidden; padding: 4px 0; text-align: center; }
</style>
</head>
<body>
<article class="container">
</article>
<script type="text/template" id="template-calendar">
<ul class="cui_week">
<% var i = 0, day = 0; %>
<%for(day = 0; day < 7; day++) { %>
<li>
<%=weekDayItemTmpt[day] %></li>
<%} %>
</ul> <ul class="cui_calendar">
<% for(i = 0; i < beginWeek; i++) { %>
<li class="cui_invalid"></li>
<% } %>
<% for(i = 0; i < days; i++) { %>
<% day = i + 1; %>
<li class="cui_calendar_item" data-date="<%=year%>-<%=month + 1%>-<%=day%>"><%=day %></li>
<% } %>
</ul>
</script>
<script type="text/javascript" src="../../vendor/underscore-min.js"></script>
<script type="text/javascript" src="../../vendor/zepto.min.js"></script>
<script src="../../src/underscore.extend.js" type="text/javascript"></script>
<script src="../../src/util.js" type="text/javascript"></script>
<script src="../../src/mvc.js" type="text/javascript"></script>
<script type="text/javascript">
var tmpt = $('#template-calendar').html(); var CalendarView = _.inherit(Dalmatian.View, {
templateSet: {
0: tmpt
}, statusSet: {
STATUS_INIT: 0
}
}); var CalendarAdapter = _.inherit(Dalmatian.Adapter, {
_initialize: function ($super) {
$super(); //默认显示方案，可以根据参数修改
//任意一个model发生改变皆会引起update
this.weekDayItemTmpt = ['日', '一', '二', '三', '四', '五', '六'];
}, //该次重新，viewmodel的数据完全来源与parse中多定义
parse: function (data) {
return _.extend({
weekDayItemTmpt: this.weekDayItemTmpt
}, data);
}
}); var CalendarController = _.inherit(Dalmatian.ViewController, { _initialize: function () {
this.view = new CalendarView();
this.adapter = new CalendarAdapter(); //默认业务数据
this.dateObj = new Date();
this.container = '.container'; var s = '';
}, initialize: function ($super, opts) {
this._initialize();
$super(opts);
}, onViewBeforeCreate: function () { //使用adpter之前必须注册监听以及格式化viewModel，此操作应该封装起来
this.adapter.registerObserver(this);
this.adapter.format(this._getMonthData(this.dateObj.getFullYear(), this.dateObj.getMonth())); //view显示之前必定会给予状态，此应该封装
this.viewstatus = this.view.statusSet.STATUS_INIT; var s = '';
}, render: function () {
//该操作可封装
var data = this.adapter.viewmodel;
this.view.render(this.viewstatus, data);
}, //根据传入年月，返回该月相关数据
_getMonthData: function (year, month) {
this.date = new Date(year, month);
var d = new Date(year, month);
//description 获取天数
var days = dateUtil.getDaysOfMonth(d);
//description 获取那个月第一天时星期几
var _beginWeek = dateUtil.getBeginDayOfMouth(d);
return {
year: d.getFullYear(),
month: d.getMonth(),
beginWeek: _beginWeek,
days: days
};
}
}); var calendar = new CalendarController();
calendar.show(); </script>
</body>
</html>
首次调整后，大概的东西出来了，这样一次操作后就会发现之前定义的MVC一些不合理的地方
① 操作Adapter有parse与format两个地方，我们用着用着就会分不清，应该只对外暴露一个借口
② Controller处操作Adapter以及view也会有多个地方事实上有一些必定会发生的流程我们应该封装起来，类似：
//使用adpter之前必须注册监听以及格式化viewModel，此操作应该封装起来
this.adapter.registerObserver(this);
this.adapter.format(this._getMonthData(this.dateObj.getFullYear(), this.dateObj.getMonth())); //view显示之前必定会给予状态，此应该封装
this.viewstatus = this.view.statusSet.STATUS_INIT;
③ 整个MVC的逻辑还是有一些不太清晰的地方，这个留待后续调整
这个时候我们将之前的一些借口加入进来，比如我们的handleDay
handleDay: function (dateStr, fn) {
if (dateUtil.isDate(dateStr)) dateStr = dateUtil.format(dateStr, 'Y-m-d');
var el = this.viewcontent.find('[data-date="' + dateStr + '"]');
if (typeof fn == 'function') fn(el, dateUtil.parse(dateStr, 'y-m-d'), this);
}
var calendar = new CalendarController();
calendar.show(); calendar.handleDay(new Date(), function (el, date, calendar) {
el.html('今天');
});
现在如果有事件绑定的话，便注册至viewController即可，我这里便暂时结束了
结语
通过今天的学习，我将与我老大研究出来的MVC的东东搞了出来，事实证明还是需要有一些优化的......
今天状态不是太好，今天暂时到此，剩下的我们后面点来，这块还有很多东西要清理呢。。。。。。