脚本宝典收集整理的这篇文章主要介绍了

对MVVM架构的一些理解

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

MVVM(Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的开发模式,他与MVC
模式一样用于把视图(界面)和数据进行解耦,不同的是采用ViewModel来完成数据与视图的双向绑定,通
过自动化的方式承担大部分数据工作,来解决由于界面复杂化和快速迭代带来的问题。

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

创建dom

var html="<input type="text" v-model="msg">{{msg}}<p>{{msg2}}</p><p>{{msg}}</p>";
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框架。

View.init('#app');

总结

以上是脚本宝典为你收集整理的

对MVVM架构的一些理解

全部内容,希望文章能够帮你解决

对MVVM架构的一些理解

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过