很多讲解MVC的例子都从一个具体的框架的某个概念入手,比如Backbone的collection或AngularJS中model,这当然不失为一个好办法。但框架之所以是框架,而不是类库(jQuery)或者工具集(Underscore),就是因为它们的背后有着众多优秀的设计理念和最佳实践,这些设计精髓相辅相成,环环相扣,缺一不可,要想在短时间内透过复杂的框架而看到某一种设计模式的.本质并非是一件容易的事。
这便是这篇随笔的由来——为了帮助大家理解概念而生的原型代码,应该越简单越好,简单到刚刚足以大家理解这个概念就够了。
的基础是观察者模式,这是实现model和view同步的关键
为了简单起见,每个model实例中只包含一个primitive value值。
function Model(value) {
this._value = typeof value === 'undefined' ? '' : value;
this._listeners = [];
}
= function (value) {
var self = this;
self._value = value;
// model中的值改变时,应通知注册过的回调函数
// 按照Javascript事件处理的一般机制,我们异步地调用回调函数
// 如果觉得setTimeout影响性能,也可以采用requestAnimationFrame
setTimeout(function () {
self._ach(function (listener) {
(self, value);
});
});
};
h = function (listener) {
// 注册监听的回调函数
this._(listener);
};
// html代码:
<div id="div1"></div>
// 逻辑代码:
(function () {
var model = new Model();
var div1 = lementById('div1');
h(function (value) {
rHTML = value;
});
('hello, this is a div');
})();
借助观察者模式,我们已经实现了在调用model的set方法改变其值的时候,模板也同步更新,但这样的实现却很别扭,因为我们需要手动监听model值的改变(通过watch方法)并传入一个回调函数,有没有办法让view(一个或多个dom node)和model更简单的绑定呢?
2. 实现bind方法,绑定model和view
= function (node) {
// 将watch的逻辑和通用的回调函数放到这里
h(function (value) {
rHTML = value;
});
};
// html代码:
<div id="div1"></div>
<div id="div2"></div>
// 逻辑代码:
(function () {
var model = new Model();
(lementById('div1'));
(lementById('div2'));
('this is a div');
})();
通过一个简单的封装,view和model之间的绑定已经初见雏形,即使需要在一个model上绑定多个view,实现起来也很轻松。注意bind是Function类prototype上的一个原生方法,不过它和MVC的关系并不紧密,笔者又实在太喜欢bind这个单词,一语中的,言简意赅,所以索性在这里把原生方法覆盖了,大家可以忽略。言归正传,虽然绑定的复杂度降低了,这一步依然要依赖我们手动完成,有没有可能把绑定的逻辑从业务代码中彻底解耦呢?
3. 实现controller,将绑定从逻辑代码中解耦
细心的朋友可能已经注意到,虽然讲的是MVC,但是上文中却只出现了Model类,View类不出现可以理解,毕竟HTML就是现成的View(事实上本文中从始至终也只是利用HTML作为View,javascript代码中并没有出现过View类),那Controller类为何也隐身了呢?别急,其实所谓的”逻辑代码”就是一个框架逻辑(姑且将本文的原型玩具称之为框架)和业务逻辑耦合度很高的代码段,现在我们就来将它分解一下。
如果要将绑定的逻辑交给框架完成,那么就需要告诉框架如何来完成绑定。由于JS中较难完成annotation(注解),我们可以在view中做这层标记——使用html的标签属性就是一个简单有效的办法。
function Controller(callback) {
var models = {};
// 找到所有有bind属性的元素
var views = ySelectorAll('[bind]');
// 将views处理为普通数组
views = (views, 0);
ach(function (view) {
var modelName = ttribute('bind');
// 取出或新建该元素所绑定的model
models[modelName] = models[modelName] || new Model();
// 完成该元素和指定model的绑定
models[modelName](view);
});
// 调用controller的具体逻辑,将models传入,方便业务处理
(this, models);
}
// html:
<div id="div1" bind="model1"></div>
<div id="div2" bind="model1"></div>
// 逻辑代码:
new Controller(function (models) {
var model1 = l1;
('this is a div');
});
就这么简单吗?就这么简单:在Controller中完成业务逻辑并对Model进行修改,Model的变化触发View的自动更新,怎么样,算得上一个有模有样的MVC吧?当然,这样的”框架”还不足以用于生产环境,不过如果它能或多或少地帮助到大家对于MVC的理解的话,博主就非常满足了。
整理后去掉注释的”框架”代码:
function Model(value) {
this._value = typeof value === 'undefined' ? '' : value;
this._listeners = [];
}
= function (value) {
var self = this;
self._value = value;
setTimeout(function () {
self._ach(function (listener) {
(self, value);
});
});
};
h = function (listener) {
this._(listener);
};
= function (node) {
h(function (value) {
rHTML = value;
});
};
function Controller(callback) {
var models = {};
var views = (ySelectorAll('[bind]'), 0);
ach(function (view) {
var modelName = ttribute('bind');
(models[modelName] = models[modelName] || new Model())(view);
});
(this, models);
}
4. 一个简单的例子
下面请大家看一个简单例子,如何实现电子表
// html:
<span bind="hour"></span> : <span bind="minute"></span> : <span bind="second"></span>
// controller:
new Controller(function (models) {
function setTime() {
var date = new Date();
(ours());
(inutes());
(econds());
}
setTime();
setInterval(setTime, 1000);
});
可以看出,controller中只负责更新model的逻辑,和view完全解耦;而view和model的绑定是通过view中的属性和框架中controller的初始化代码完成的,也没有出现在业务逻辑中;至于view的更新,也是通过框架中的观察者模式实现的。