MVVM框架 v1发布
如果经常浏览我博客的人就发现，我三个月前就搞鼓过一下什么MVVM与MVC的比较，knockout.js与ember.js。然后就没动静了，因为之后一个月，我的MVVM就孵化出来，开发代码很逆天也很龌鹾，就叫avalon(WPF开发代号)。我觉得，都是好东西，相互借鉴是没所谓，只要造福IT民工！
说说MVVM的重要性，它虽然是从MVC中衍生出来的，但其双向绑定机制是特有的，完全是面向界面开发而生，这是传统的MVC比不了。最近我拉了一伙人在搞我的mass UI就遇到这问题了。
//由mass UI开发团队的Hodor 提供
define(
'panel'
,[
'$node'
,
'$event'
,
'$css'
,
'$flow'
,
'./ejs'
],
function
(){
$.ui = $.ui||{}
var
defaults = {
showHead :
true
,
showFoot :
true
,
closeAble :
true
,
parent :
'body'
,
content : {
title :
'title'
,
body :
'body'
,
foot :
''
},
css : {
width : 400,
height : 200
}
};
$.ui.Panel = $.factory({
inherit: $.Flow,
init:
function
(opts) {
this
.setOptions (
"data"
, defaults, opts )
var
self =
this
;
self.template = $.ejs.compile(
'<div class="panel_wrap">\
<% if( data.showHead ){ %>\
<div class="panel_header">\
<div class="panel_title">\
<%= data.content.title %>\
</div>\
<% if( data.closeAble ){ %>\
<span class="panel_closer"></span>\
<% } %>\
</div>\
<% } %>\
<div class="panel_body">\
<%= data.content.body %>\
</div>\
<% if( data.showFoot ){ %>\
<div class="panel_foot">\
<%= data.content.foot %>\
</div>\
<% } %>\
</div>'
);
self.show();
},
show :
function
() {
this
.fire (
'beforeshow'
)
this
.ui &&
this
.ui.remove();
this
.ui = $(
this
.template(
this
.data ))
.appendTo(
this
.parent )
.css (
this
.css )
.show ();
this
.fire (
'show'
)
},
hide :
function
() {
this
.ui &&
this
.ui.hide().remove();
this
.ui = undefined;
this
.fire (
'hide'
);
},
set :
function
( keyChain, val ) {
//每改一个属性就重刷整个视图，因此不能容纳子控件,除非我们多做一些额外工作
var
keys = keyChain.split(
'.'
);
var
key;
var
ret =
this
;
while
( keys.length > 1){
key = keys.shift();
ret[key] = ret[key] != undefined ?
ret[key] :
{};
ret = ret[key];
}
ret[keys.shift()] = val;
this
.show();
return
this
;
}
});
})
|
遇到的问题与其他UI团队一样，其实你看一下jquery UI就知了。一个控件，它肯定有视图层，这里我们是用ejs v10来生成。生成HTML插入到DOM算是完成了一半，但当我们要修改这个控件的一些属性，一些与视图相关的属性就遇到麻烦了。比如说title属性，如果是jquery ui，它肯定先到这个控件的ID，然后再找包含这个title的元素节点，再替换掉它的文本。用jquery是这样写出：
setTilte:
function
(newTitle){
$(
this
.UIid).find(
"jquery-panel-title"
).text(newTitle);
//更新视图
this
.title = newTitle;
//同时同步对应的属性
}
getTitle:
function
(){
return
this
.title;
}
|
如果一个控件涉及的视图属性越多，控件这样的访问器就越多！长此以往不是办法！像日历组件，你可以看到它是多么臃肿。
这时该到MVVM出马了。它把这些与视图显示相关的属性全部收集到一起，包括基于这些属性的属性，比如说fullName是基于lastName与firstName，它是通过函数生成的，这个在模型（M）里是不存在的，但它存于视图模型（VM）中。由于双向绑定的存在，我们修改了VM的一个值，它立即自动刷新视图中对应的位置的值，这过程完全不需要动用到选择器！
基于选择器的方式是最不可靠的，因为视图的变更最频繁，某一天PM说要多加一功能或不要一功能，于是就多几个父节点或少几个子节点，把HTML的层级关系搞得乱七八糟，我们的选择器寻找就得重写一次！
因此对于这些DOM操作，我们最好也封装一层，这是比jquery的DOM操作函数更高层的封装，目的是让控件开发者远离视图层，他们只需要关注于模型层。如果我们把DOM操作看成增删改查，那么原始的DOM API相当于直接用二进制手段暴力去改数据库，而像jQuery等主流库提供了强大的选择器引擎与DOM操作函数，相当于发明SQL，而像knockout.js这样的MVVM框架拥有尖端的依赖链机制、双向绑定，让智能的集化操作，事务与锁成为可能，是DOM级别的“ORM系统”！
顺便一提，在VM中，所有属性都是函数，每个函数都是读写结合，像jquery的html, attr, text那样便捷！这有出于兼容IE678的考量，因为它们不支持Object.defineProperty这样的属性描述符（或支持不良好，如IE8）。
我的MVVM v1完全是向knockout.js致敬的，用法与它的一模一样，不过代码量少了许多。具体教程与实可以看以下链接：
最近看了许多MVVM的实现，功力大增，估计v2秒换胎脱骨，更精简更高效，敬请期待！