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秒换胎脱骨，更精简更高效，敬请期待！

标签: javascript, mass