code-explain.md · fishbone/mini-mvvm

# mini-mvvm

## MVVM

MVVM（Model-View-ViewModel）是一种软件架构模式，主要用于分离用户界面（UI）的开发与业务逻辑的开发。MVVM 是 MVC（Model-View-Controller）和 MVP（Model-View-Presenter）模式的演变，特别适用于需要复杂 UI 交互的应用程序，如桌面应用程序、移动应用程序和单页应用（SPA）。

### MVVM 组成部分

1. **Model（模型）**：负责表示应用的数据结构以及业务逻辑。它可以是简单的数据对象或包含复杂的逻辑和操作。Model不直接与UI交互，而是通过ViewModel来间接实现。

2. **View（视图）**：指的是用户界面层，负责定义如何显示信息给用户。在MVVM中，View会监听ViewModel的变化，并根据ViewModel的状态自动更新自身。这通常是通过数据绑定机制实现的。

3. **ViewModel（视图模型）**：作为连接Model和View的桥梁，ViewModel负责转换Model中的数据以适应View的需求。它提供了一些属性和命令，这些可以被View直接绑定使用。此外，ViewModel还处理来自View的输入并执行相应的动作，如调用服务端API、更新Model等。

### MVVM 核心机制

1. **数据代理**: 数据代理通常是通过在 ViewModel 中定义与 Model 数据同名的属性，并在其 setter 和 getter 中实现数据读写操作，从而间接操作 Model 的数据。在数据从 Model 到 View 的传递过程中，ViewModel 可以加入一些逻辑处理，如格式化数据、数据验证等。在 Vue.js 中，数据代理主要体现在**将组件实例（即 ViewModel ）上的属性访问请求代理到其 data 选项上**。这意味着当你在模板中直接访问某些属性时，实际上是通过组件实例间接访问到了 data 中的对应属性。
2. **数据劫持**: 通过某种方式拦截对对象属性的访问和修改操作，它允许定义或修改对象的属性，使得当这些属性被访问或修改时，可以触发相应的getter和setter函数。这为 Vue 提供了监听数据变化的能力，从而能够**在数据发生变化时自动更新视图**。Vue 2.x 使用 `Object.defineProperty()` 实现数据劫持，Vue 3 开始使用 `Proxy` 。
3. **通知机制**: 通知机制是 MVVM 中实现数据同步的关键。当数据发生变化时，通知机制确保所有依赖于这些数据的部分都能够得到更新。在 MVVM 框架中，这通常是通过**发布/订阅模式或观察者模式**实现的。在数据劫持的过程中，当视图中的指令（如 v-model ）与 ViewModel 的数据进行绑定的时候，框架会记录这种依赖关系。一旦数据通过 setter 被修改，数据劫持的过程会触发**通知**机制（notify），告诉所有依赖于该数据的观察者（Watcher）。观察者接收到通知后，会执行相应的更新函数（update），从而**更新视图**。

### 实现思路

#### Vue.js

入口文件 `Vue.js`，获取vm实例挂载的根节点 `$el` 与数据 `$data` 。此时要访问数据需要通过 `vm.$data.key`，因此在此处进行数据代理 `_proxyData(this.$data)`（同时将函数也进行代理 `_proxyMethod(option.methods)`），在vm实例上定义data与method的同名属性，访问vm上的属性 `vm.key` 即可代理到真正的数据（与函数）。对于 `$data` 进行数据劫持，对于 `$el` 进行模板编译。

##### Object.defineProperty

此方法用于直接在一个对象上定义或修改一个属性，允许精确地添加或修改对象的属性，包括为属性设置 getter 和 setter 函数，从而实现数据绑定和劫持。

```javascript
Object.defineProperty(obj, prop, descriptor)
```

- `obj`：要在其上定义属性的对象。
- `prop`：要定义或修改的属性的名称。
- `descriptor`：将被定义或修改的属性的描述符。

其中 `descriptor` 是一个对象，它包含以下可配置的属性：

- `configurable`：当且仅当该属性的 `configurable` 为 `true` 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 `false`。
- `enumerable`：当且仅当该属性的 `enumerable` 键值为 `true` 时，该属性才会出现在对象的枚举属性中。默认为 `false`。
- `value`：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 `undefined`。
- `writable`：当且仅当该属性的 `writable` 键值为 `true` 时，属性的值即上面的 `value`，才能被赋值运算符改变。默认为 `false`。
- `get`：一个给属性提供 `getter` 的方法，如果没有 `getter` 则为 `undefined`。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入 `this` 对象（由于继承关系，这里的 `this` 并不一定是定义该属性的对象）。
- `set`：一个给属性提供 `setter` 的方法，如果没有 `setter` 则为 `undefined`。当属性值被修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

##### code

```javascript
import Compiler from "./compiler";
import Observer from "./observer";

class Vue {
  constructor(options) {
    this.$el = document.querySelector(options.el);
    this.$data = options.data || {};

this._proxyData(this.$data);
    this._proxyMethods(options.methods);
    new Observer(this.$data);
    new Compiler(this);
  }

_proxyData(data) {
    Object.keys(data).forEach((key) => {
      Object.defineProperty(this, key, {
        get() {
          return data[key];
        },
        set(newValue) {
          data[key] = newValue;
        },
      });
    });
  }

_proxyMethods(methods) {
    if (methods && typeof methods === "object") {
      Object.keys(methods).forEach((key) => {
        this[key] = methods[key];
      });
    }
  }
}

window.Vue = Vue;
```

#### observer.js

数据劫持在 `observer.js` 中实现，递归的遍历 `data` 对象的每个属性，通过 `Object.defineProperty` 为其设置 getter 与 setter，使得访问与修改数据的同时可以对视图做出相应的更新。

##### code

```javascript
import Dep from "./dep";

export default class Observer {
  constructor(data) {
    this.data = data; // vm.$data
    this.observe(this.data);
  }

observe(data) {
    if (!data || typeof data !== "object") {
      return;
    }
    Object.keys(data).forEach((key) => {
      this.defineReactive(data, key, data[key]);
    });
  }

defineReactive(data, key, value) {
    const dep = new Dep();
    Object.defineProperty(data, key, {
      enumerable: true, //可遍历
      configurable: false, //不可再配置
      get: () => {
        Dep.target && !dep.hasWatcher(Dep.target) && dep.addSubs(Dep.target);
        return value;
      },
      set: (newValue) => {
        value = newValue;
        dep.notify(); // 通知所有使用此数据的地方进行更新
      },
    });
    // 递归的对数据进行数据劫持
    this.observe(value);
  }
}
```

#### dep.js

每个数据项都可能在页面的多处被使用，当数据发生变化时就要通知所有使用此数据的地方发生更新，因此引入 `Dep` 对依赖此数据的所有地方（`watcher`）进行收集，以便于在数据发生变化时统一通知视图发生更新。每个数据项对应一个 `Dep` 实例。

##### code

```javascript
export default class Dep {
  // 每个数据对应一个Dep，记录所有使用此数据的Watcher
  constructor() {
    this.subs = new Map(); // 使用此数据的所有watcher
  }

addSubs(watcher) {
    this.subs.set(watcher.uid, watcher);
  }

hasWatcher(watcher) {
    return this.subs.has(watcher.uid);
  }

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

#### compiler.js

模板编译在 `compiler.js` 中实现，用于将一些特殊的语法转换为原生属性与代码，根据vm中的数据计算各处表达式的值，并为每处表达式设置监听者 `watcher` 使得视图可以自动更新。

模板编译分为编译文本节点与编译元素节点：文本节点编译会计算转换后的、去除了插值表达式语法的、合法的 JS 表达式的值，并设置到节点上；元素节点编译主要解析节点的特殊属性（v-text、v-model、:attrName、@event等），将转换后的节点属性设置到节点上。为了实现表达式值的响应式变动，为每个表达式设置监听者 watcher。

##### fragment

文档片段 fragment 是一个轻量级的 document 对象，它不属于主文档树一部分，但可以包含DOM节点。由于每次对主文档树DOM的直接修改会触发浏览器的重排与重绘，损失性能，因此可以采用文档片段，在文档片段中批量操作 DOM 从而减少对主文档树的直接操作，操作完后统一加入主文档树，提高性能。

`document.createDocumentFragment()` 可以创建一个空的文档片段。

当执行 `fragment.appengChild(node)` 时，node 会被从原文档树中移除并添加到 fragment 中。

##### code

```javascript
import Watcher from "./watcher";

export default class Compiler {
  constructor(context) {
    this.$el = context.$el;
    this.context = context;
    if (this.$el) {
      this.$fragment = this.node2Fragment(this.$el);
      this.compile(this.$fragment);
      this.$el.appendChild(this.$fragment);
    }
  }

/**
   * 将DOM转为文档片段
   */
  node2Fragment(node) {
    let fragment = document.createDocumentFragment();
    // childNodes属性为一个节点的子节点列表，包括属于该节点的所有类型的子节点（元素、文本、注释等）
    if (node.childNodes && node.childNodes.length) {
      node.childNodes.forEach((child) => {
        // 去除注释节点和无用的换行
        if (!this.ignore(child)) {
          fragment.appendChild(child); // 原DOM树中的节点被移除，添加到fragment中
        }
      });
    }
    return fragment;
  }

/**
   * 忽略 注释节点 与 \t\n\r文本节点
   */
  ignore(node) {
    const reg = /^[\t\n\r]+/;
    return (
      node.nodeType === Node.COMMENT_NODE ||
      (node.nodeType === Node.TEXT_NODE && reg.test(node.textContent))
    );
  }

/**
   * 模板编译
   */
  compile(node) {
    if (node.childNodes && node.childNodes.length) {
      node.childNodes.forEach((child) => {
        if (child.nodeType === Node.ELEMENT_NODE) {
          this.compileElementNode(child);
        } else if (child.nodeType === Node.TEXT_NODE) {
          this.compileTextNode(child);
        }
      });
    }
  }

/**
   * 编译元素节点
   * @param {Node} node
   */
  compileElementNode(node) {
    let that = this;
    let attrs = [...node.attributes];
    attrs.forEach((attr) => {
      let { name, value } = attr; // 解构每个属性的name和value
      if (name.indexOf("v-") === 0) {
        // 指令 v-text v-model
        let directiveName = name.slice(2);
        switch (directiveName) {
          case "text":
            // data -> 视图
            new Watcher(value, this.context, (newValue) => {
              node.textContent = newValue;
            });
            break;
          case "model":
            // v-model仅绑定到value属性
            // data -> 视图
            new Watcher(value, this.context, (newValue) => {
              node.value = newValue;
            });
            // 视图 -> data  仅处理视图input事件对数据的更改
            node.addEventListener("input", (e) => {
              that.context[value] = e.target.value;
            });
            break;
        }
      }
      if (name.indexOf(":") === 0) {
        const attrName = name.slice(1);
        // v-bind
        new Watcher(value, this.context, (newValue) => {
          if (attrName === "class") {
            node.className = newValue; // 属性class需单独处理 仅处理单一类名
          } else {
            node[attrName] = newValue;
          }
        });
      }
      if (name.indexOf("@") === 0) {
        this.compileMethod(this.context, node, name.slice(1), value);
      }
    });
    // 递归编译所有子节点
    this.compile(node);
  }

/**
   * 解析 @ 指令，挂载事件回调
   */
  compileMethod(scope, node, eventName, eventCbName) {
    let fn = scope[eventCbName];
    node.addEventListener(eventName, fn.bind(scope));
  }

/**
   * 编译文本节点
   */
  compileTextNode(node) {
    let text = node.textContent.trim();
    if (text) {
      let exp = this.parseTextExp(text);
      new Watcher(exp, this.context, (newValue) => {
        node.textContent = newValue;
      });
    }
  }

/**
   * 将表达式字符串转为可执行的表达式
   */
  parseTextExp(exp) {
    // 匹配差值表达式
    const reg = /\{\{(.+?)\}\}/g;
    const matches = exp.match(reg); // <p>{{ msg }}!</p> => ['{{ msg }}']
    let tokens = [];
    exp.split(reg).forEach((item) => {
      // <p>{{ msg }}!</p> => ['', ' msg ', '!']
      if (matches && matches.indexOf(`{{${item}}}`) > -1) {
        // 匹配到插值表达式部分，优先计算
        tokens.push(`(${item})`);
      } else {
        tokens.push(`\'${item}\'`);
      }
    });
    return tokens.join("+");
  }
}
```

#### watcher.js

每个表达式拥有一个监听者 watcher 实例对象，用于在依赖的数据发生变动时，自动对视图进行更新（`update -> this.cb()`）,`cb` 即更新视图中此表达式值的回调函数。

##### 何时收集依赖？

数据发生变动时，通知其 `dep` 中收集的全部 `watcher` 进行重新计算与更新，何时将 `watcher` 加入到对应 `dep` 中呢？当 `watcher` 正在计算一个表达式时，其计算所使用的数据就是当前 `watcher` 要加入的 `dep`。在计算表达式值的 `get` 函数中，为 `Dep` 类设置 `Dep.target = this`，表示当前正在进行计算的 watcher。表达式的计算需要读取数据，由于已做数据劫持，读取数据将会调用 `Observer` 类中在 `defineReactive` 函数中为数据设置的 getter 。因此，可以在数据 getter 中进行依赖的收集，即：`Dep.target && dep.addSubs(Dep.target)`，就将 watcher 加入到了全部依赖的数据对应的 dep 当中。

##### code

```javascript
import Dep from "./dep";

var $uid = 0;
export default class Watcher {
  // 每个表达式对应一个watcher
  constructor(exp, scope, cb) {
    this.exp = exp;
    this.scope = scope;
    this.cb = cb; // 用于更新视图的回调函数
    this.uid = $uid++;

this.update();
  }

/**
   * 计算表达式的值
   */
  get() {
    // 在计算表达式的值时会使用到data，在此时将当前正在计算的watcher加入到dep中
    // 表达式可能用到多个数据，对应多个dep，因此直接加到Dep类上
    Dep.target = this;
    let value = Watcher.compute(this.exp, this.scope);
    Dep.target = null;
    return value;
  }

/**
   * 执行回调函数，更新视图
   */
  update() {
    this.cb && this.cb(this.get());
  }

/**
   * 在作用域scope下，计算表达式exp的值
   */
  static compute(exp, scope) {
    let fn = new Function("scope", `with(scope){return ${exp}}`);
    return fn(scope);
  }
}
```

fishbone/mini-mvvm

简介

发行版

贡献者

语言

近期动态

fishbone/mini-mvvm .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

fishbone/mini-mvvm