如何在ES5中实现简单Mvvm框架

2024-02-14 01:24:23

在ES5中，我们就可以通过defineProperty()方法来实现一个简单可用的mvvm框架，使得开发者们能够在JS中以声明式的方式编写复杂的程序，清晰地管理数据流。让我们一起来看看如何用ES5实现一个mvvm框架。

1. Mvvm 类

首先，我们需要定义一个名为 Mvvm 的类，它将负责管理数据的变化和更新。它接受两个参数：el（指定要绑定的 HTML 元素）和 data（保存数据的对象）。

class Mvvm {
  constructor(el, data) {
    this.el = el;
    this.data = data;
    this.compile(el);
  }

  compile(el) {
    // 从 el 中解析指令并执行
    // ...
  }
}

2. Observe 类

为了跟踪数据对象的变化，我们需要实现一个名为 Observe 的类。它负责监听数据对象的属性变化，并在变化时通知订阅者。

class Observe {
  constructor(data) {
    this.data = data;
    this.watchers = [];

    // 遍历 data 对象，为每个属性设置 getter 和 setter
    for (let key in data) {
      this.defineProperty(key, data[key]);
    }
  }

  defineProperty(key, val) {
    // 使用 Object.defineProperty() 定义属性的 getter 和 setter
    Object.defineProperty(this.data, key, {
      get: () => {
        // 在 getter 中触发 watchers 更新
        this.watchers.forEach(watcher => watcher.update());
        return val;
      },
      set: newVal => {
        val = newVal;
        // 在 setter 中触发 watchers 更新
        this.watchers.forEach(watcher => watcher.update());
      },
    });
  }

  addWatcher(watcher) {
    this.watchers.push(watcher);
  }
}

3. Watcher 类

订阅者类称为 Watcher，当数据发生变化时，它的update() 方法将被调用以更新视图。

class Watcher {
  constructor(mvvm, exp, fn) {
    this.mvvm = mvvm;
    this.exp = exp; // 表达式
    this.fn = fn; // 回调函数

    // 为表达式添加观察者
    this.addObserver();
  }

  addObserver() {
    const data = this.mvvm.data;
    const keys = this.exp.split('.'); // 将表达式拆分为属性名

    // 依次为每个属性添加观察者
    for (let i = 0; i < keys.length - 1; i++) {
      data = data[keys[i]];
    }

    // 为最后一个属性添加观察者
    new Observe(data).addWatcher(this);
  }

  update() {
    // 调用回调函数更新视图
    this.fn.call(this.mvvm, this.get());
  }

  get() {
    // 从 data 对象中获取表达式的值
    const data = this.mvvm.data;
    const keys = this.exp.split('.');

    // 依次获取属性值
    for (let i = 0; i < keys.length; i++) {
      data = data[keys[i]];
    }

    return data;
  }
}

4. 编译 el

在 Mvvm 类中，compile() 方法负责编译 el 并将数据绑定到 HTML 元素上。

compile(el) {
  // 获取 el 中的指令
  const directives = el.querySelectorAll('[v-model]');

  // 遍历指令
  directives.forEach(directive => {
    // 获取指令的属性名和值
    const attrName = directive.getAttribute('v-model');
    const exp = directive.value;

    // 创建 Watcher 实例，为表达式添加观察者
    new Watcher(this, exp, val => {
      // 更新指令对应的元素值
      directive.value = val;
    });

    // 将数据绑定到元素上
    directive.value = this.data[attrName];
  });
}