对MVVM架构的一些理解-白红宇

对MVVM架构的一些理解

阅读量：7007 次

发布时间：2019-06-28

本文共 3122 字，大约阅读时间需要 10 分钟。

MVVM（Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的开发模式，他与MVC

模式一样用于把视图（界面）和数据进行解耦，不同的是采用ViewModel来完成数据与视图的双向绑定，通

过自动化的方式承担大部分数据工作，来解决由于界面复杂化和快速迭代带来的问题。

由于现在vue比较火，现在就用vue相同的原理（属性劫持）来完成一个简单MVVM框架

创建dom

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

数据对象（Model）,与dom绑定的数据都在这儿

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

视图对象（View），里面封装了对dom节点的解析、事件绑定、视图更新渲染等方法

var View = {    init:function(el){        //将数据与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];        }    }};

视图模板绑定对象（ViewModel）,这也是mvvm实现的核心方法，通过defineProperty将Model对象中的数据

复制到了View对象中，并对数据进行了监控，每当get或set时都会触发自定义事件，完成对视图的跟新。

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();                }            })        });    }};

最后调用View对象的初始化方法执行框架,至此就完成了一个简单的MVVM框架。