关于vue.js:如何实现一个简单的MVVM-框架

MVVM是什么?


MVVM是一种设计思维,它是Model-View-ViewModel的缩写。它也是MVC的增强版。

Model是代表数据模型,也能够在Model中定义数据批改和操作的业务逻辑。
View是代表UI组件,它负责将数据模型转化成UI展示进去。
ViewModel是一个同步View和Model的对象。

在MVVM框架下,View和Model之间并没有间接分割,而是通过ViewModel(桥梁)进行交互。
Model和ViewModel之间的交互是双向的。
ViewModel通过双向数据绑定将View和Model层连贯了起来,而View和Model之间的同步工作都是齐全主动的,无需人为操作。

MVVM解决什么问题?

MVC和MVVM的区别其实并不大。都是一种设计思维。

次要就是MVC中Controller演变成MVVM中的viewModel。

MVVM次要解决了MVC中大量的DOM操作使页面渲染性能升高,加载速度变慢,影响用户体验。

当和Model频繁发生变化,开发者须要被动更新到View。

MVVM实现思路

页面变动如何告诉对象
分成两步,
step1 页面变动如何监听
step2 给对象设值

//1
addEventListern,
// 2
obj.value=e.target.value

对象变动如何告诉页面
也是分成两步
step1 如何监听对象变动 两种形式:set 办法形式, proxy 形式
step2 给页面元素赋值

//1
let vm = new Proxy(obj,{
   get function(obj, prop){}
   set function(obj, prop, value){
      // 我变动了
   }
})
//2
el.value = obj.value

MVVM 联动起来
prop => el
el=>prop
演示代码
留神:演示代码是 (绑定一对一)

<input type="text" v-model="value"/>
<input type="text" v-model="test1"/>

<script>
    //mvvm

    let _vm = {
        value: 'tst',
        test1:undefined
    }

    let vm = Vue(_vm)

    function Vue(vm) {

        const tagEventMap = {
            input: 'change'
        }
        const tagSetterMap = {
            input: 'value'
        }
        const attr2ElMap = {
        }


        // 获取 v-model
        let elements = document.body.querySelectorAll('[v-model]');
        // 获取 field2El
        elements.forEach(el=>{
            let fName = el.attributes['v-model'].value
            let tagName = el.localName
            attr2ElMap[fName] = {
                el,
                changeEvent: tagEventMap[tagName],
                setValue: tagSetterMap[tagName]
            }
        })

        let _vm = new Proxy(vm, {
            get: function (obj, prop) {
                return obj[prop];
            },
            set: function (obj, prop, value) {
                let el = attr2ElMap[prop].el;
                obj[prop] = value;
                el[attr2ElMap[prop].setValue] = value
                console.log('update:', prop, value)
            }
        })

        // 代理 设值
        Object.getOwnPropertyNames(attr2ElMap).forEach((prop) => {
            let e = attr2ElMap[prop];
            // init
            if(_vm[prop]){
                _vm[prop] = _vm[prop]
            }
            e.el.addEventListener(e.changeEvent, ev => {
                _vm[prop] = ev.target[attr2ElMap[prop].setValue]
            })
        })

       return _vm
    }


</script>

援用

什么是MVVM?
MVVM和MVC的区别,以及MVVM的毛病

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-2核2G-5M带宽-40-100G SSD服务器,特惠价86元/年(原价724元/年,限时99元续购三次),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据