MVVM（Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的開發(fā)模式，他與MVC
模式一樣用于把視圖（界面）和數(shù)據(jù)進(jìn)行解耦，不同的是采用ViewModel來(lái)完成數(shù)據(jù)與視圖的雙向綁定，通
過(guò)自動(dòng)化的方式承擔(dān)大部分?jǐn)?shù)據(jù)工作，來(lái)解決由于界面復(fù)雜化和快速迭代帶來(lái)的問(wèn)題。

由于現(xiàn)在vue比較火，現(xiàn)在就用vue相同的原理（屬性劫持）來(lái)完成一個(gè)簡(jiǎn)單MVVM框架

創(chuàng)建dom

var html="{{msg}}
{{msg2}}
{{msg}}
";
var div = document.createElement("div");
div.id="app";
div.innerHTML = html;
document.body.appendChild(div);

數(shù)據(jù)對(duì)象（Model）,與dom綁定的數(shù)據(jù)都在這兒

var Model = {
    msg:"hello world",
    msg2:"hello world2"
};

視圖對(duì)象（View），里面封裝了對(duì)dom節(jié)點(diǎn)的解析、事件綁定、視圖更新渲染等方法

var View = {
    init:function(el){
        //將數(shù)據(jù)與View綁定
        ViewModel.bind(Model);
        //解析Dom
        this.processNode(el);
    },
    subs:[],
    processNode:function(el){
        var node = document.querySelector(el);
        var frag = document.createDocumentFragment(),child;
        while(child = node.firstChild){
            this.compile(child);
            frag.appendChild(child);
        }
        node.appendChild(frag);
    },
    compile:function(node){
        function Sub(node,name,nodeType){
            this.node = node;
            this.name = name;
            this.nodeType = nodeType;
        }
        var self = this;
        if(node.nodeType === 1){
            if(node.childNodes){
                var nodes =[...node.childNodes];
                nodes.forEach(function(node){
                    self.compile(node);
                })
            }
            var attrs = [...node.attributes];
            attrs.forEach(function(attr){
                if(attr.nodeName === "v-model"){
                    var name = attr.nodeValue;
                    node.addEventListener("input",function(e){
                        self[name] = e.target.value;
                    });
                    node.value = self[name];
                    node.removeAttribute("v-model");
                    var sub = new Sub(node,name,"input");
                    self.render(sub);
                    self.subs.push(sub);
                }
            })
        }
        if(node.nodeType === 3){
            if(/{{(.*)}}/.test(node.nodeValue)){
                var name = RegExp.$1;
                name=name.trim();
                var sub = new Sub(node,name,"text");
                self.render(sub);
                self.subs.push(sub);
            }
        }
    },
    update:function(){
        var self = this;
        this.subs.forEach(function(sub){
            self.render(sub);
        })
    },
    render:function(sub){
        if(sub.nodeType === "input"){
            sub.node.value=this[sub.name];
        }
        if(sub.nodeType === "text"){
            sub.node.nodeValue=this[sub.name];
        }
    }
};

視圖模板綁定對(duì)象（ViewModel）,這也是mvvm實(shí)現(xiàn)的核心方法，通過(guò)defineProperty將Model對(duì)象中的數(shù)據(jù)
復(fù)制到了View對(duì)象中，并對(duì)數(shù)據(jù)進(jìn)行了監(jiān)控，每當(dāng)get或set時(shí)都會(huì)觸發(fā)自定義事件，完成對(duì)視圖的跟新。

var ViewModel={
    bind:function(m){
        Object.keys(m).forEach(function(key){
            Object.defineProperty(View,key,{
                get:function(){
                    return m[key];
                },
                set:function(newVal){
                    m[key] = newVal;
                    this.update();
                }
            })
        });
    }
};

最后調(diào)用View對(duì)象的初始化方法執(zhí)行框架,至此就完成了一個(gè)簡(jiǎn)單的MVVM框架。

View.init("#app");