MVVM 双向绑定的实现代码

MVVM（Model-View-ViewModel）是一种设计模式，特别是在前端开发中被广泛应用，它通过数据绑定使得View层和ViewModel层可以自动同步，极大地简化了UI和业务逻辑的交互。双向绑定是MVVM模式的核心特性，使得视图和模型之间可以相互更新。 在MVVM中，有几个关键的概念： 1. **Directive（指令）**：这是自定义的执行函数，用来扩展DOM的功能。例如，在Vue.js中，`v-click`和`v-bind`都是指令，它们封装了DOM的某些特定操作。 2. **Filter（过滤器）**：过滤器用于对原始数据进行处理，然后传递给指令或下一个过滤器。比如，我们可以创建一个`formatTime`过滤器，将时间戳转换为指定的日期格式。 3. **表达式**：这些类似前端模板语言的表达式，根据条件控制页面内容的显示，如`if...else`语句。 4. **ViewModel**：ViewModel是Model数据在内存中的表示，它提供了读取和修改数据的方法，并且与View进行双向绑定。 **双向绑定（数据变更检测）**： - **View层到Model层**：当View层的元素发生变化，比如用户输入，可以通过`onchange`等事件监听器触发对Model数据的更新。 - **Model层到View层**：当Model层的数据变化时，需要自动更新View。有多种实现方式，包括： - **手动触发绑定**：在数据变化后，需要显式调用函数来更新View。 - **数据劫持**：利用`Object.defineProperty`或`Proxy`来监听Model对象的get和set操作，当数据变化时，自动触发View的更新。 **手动触发绑定**的示例代码如下： ```javascript let elems = [document.getElementById('el'), document.getElementById('input')]; let data = { value: 'hello'}; let directive = { text: function(text) { this.innerHTML = text }, value: function(value) { this.setAttribute('value', value); this.value = value } }; // 扫描元素并绑定指令 function scan() { // ... } // ViewModel更新函数 function ViewModelSet(key, value) { data[key] = value; scan(); } // 监听View变化并更新ViewModel elems[1].addEventListener('keyup', function(e) { ViewModelSet('value', e.target.value); }, false); // 初始化 scan(); ``` **数据劫持**的实现则通过`Object.defineProperty`来监听数据变化： ```javascript let elems = [document.getElementById('el'), document.getElementById('input')]; let data = { value: 'hello', __defineGetter__: function(key) { return this[key]; }, __defineSetter__: function(key, value) { this[key] = value; // 更新View scan(); } }; ``` 以上就是MVVM双向绑定的基本概念和两种常见的实现方式。通过这种方式，开发者可以专注于业务逻辑，而无需关心UI如何响应数据的变化，从而提高了开发效率。