手写实现一个简单的MVVM框架

什么是MVVM?

MVVM是一种流行的软件架构模式，适用于各种类型的应用程序，包括前端应用程序。它主要由三部分组成：Model（数据）、View（视图）和ViewModel（视图模型）。在前端框架中，如Angular、Vue和React中，使用的是虚拟DOM操作，而不是直接操作DOM。ViewModel可以监听模型的变化，同时也可以监听视图上输入框变化，但使用的并不一定是事件监听器。

MVVM模式的目的是将数据、界面和交互行为分隔开来，从而产生高可维护性和可扩展性的应用程序代码。通过使用MVVM，我们可以更好地组织代码，并将它们分离到单独的责任区域中。

自己实现MVVM

<!-- 视图层 V，用 h1 和 span 显示数据，input 用于设置数据 -->
<h1>显示数据：<span>****</span></h1>
<input type="text" id="username">

<script>
    // 模型层 M，定义数据
    let obj = { name: '六思逸' }

    // 定义数据渲染方法，DOM操作将模型的数据渲染到视图
    function render() {
        document.querySelector('span').textContent = obj.name; // 将obj的数据显示在span中
        document.querySelector('#username').value = obj.name; // 将obj的数据显示在input中
    }
    render(); // 页面载入时要先渲染一次

    console.dir(document.querySelector('span')) // 打印出span的DOM对象方便调试

    // 模型层 M，挟持数据实现数据绑定
    let name = obj.name; // 把obj的name属性值保存在一个变量里
    Object.defineProperty(obj, 'name', { // 为obj的name属性定义一个数据访问器
        get() { // 监听obj的name属性的get方法
            return name; // 取值时直接返回name
        },
        set(v) { // 监听obj的name属性的set方法
            name = v; // 将v的值存到变量中
            render(); // 数据发生变化时重新渲染视图
        },
    });

    // 控制器层 C，视图层 V 到模型层 M，监听 input 的输入事件，自动把输入框的值赋给数据模型
    document.querySelector('#username').oninput = function () {
        obj.name = this.value; // 输入框的值赋给obj的name属性，触发数据绑定
    }
</script>