js mvvm 实现原理

MVVM（Model-View-ViewModel）是一种软件架构模式，主要用于分离用户界面（UI）逻辑和业务逻辑。在JavaScript中，MVVM模式的实现通常依赖于数据绑定和观察者模式。以下是MVVM的基本概念及其在JavaScript中的实现原理：

基础概念

Model（模型）：代表应用程序的数据和业务逻辑。
View（视图）：用户界面，通常是HTML和CSS的组合。
ViewModel（视图模型）：作为Model和View之间的桥梁，负责将Model的数据转换为View可以展示的形式，并处理View的用户交互。

实现原理

数据绑定

数据绑定是MVVM的核心机制，它使得ViewModel中的数据变化能够自动反映到View上，反之亦然。常见的实现方式有：

双向数据绑定：当Model的数据改变时，View会自动更新；当用户在View上进行操作时，Model的数据也会相应更新。

观察者模式

观察者模式用于实现数据绑定。ViewModel会“观察”Model中的数据，一旦数据发生变化，就会通知相关的View进行更新。

优势

分离关注点：将UI逻辑与业务逻辑分离，使代码更易于维护和测试。
提高可重用性：ViewModel可以被多个View复用。
自动化更新：数据的变化能自动同步到UI，减少了手动操作DOM的需要。

类型与应用场景

单向数据流：适用于简单的表单和列表展示。
双向数据绑定：适用于复杂的交互界面，如表单验证、实时搜索等。

实现示例

以下是一个简单的JavaScript MVVM实现示例：

class Observable {
  constructor(data) {
    this.data = data;
    this.walk(data);
  }

  walk(obj) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      this.defineReactive(obj, keys[i]);
    }
  }

  defineReactive(obj, key) {
    let val = obj[key];
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        if (Dep.target) {
          dep.addSub(Dep.target);
        }
        return val;
      },
      set(newVal) {
        if (newVal === val) return;
        val = newVal;
        dep.notify();
      }
    });
  }
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

Dep.target = null;

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    Dep.target = this;
    const value = this.vm.data[this.exp];
    Dep.target = null;
    return value;
  }

  update() {
    const oldValue = this.value;
    this.value = this.vm.data[this.exp];
    this.cb.call(this.vm, this.value, oldValue);
  }
}

// 使用示例
const data = { name: 'John' };
const vm = new Observable(data);

new Watcher(vm, 'name', (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

vm.data.name = 'Jane'; // 输出: Name changed from John to Jane