上一篇文章我们写了MVC模式，以及说了MVC模式的缺点，这篇文章我们就来实现一个简单的MVVM模式。
Model负责管理数据，View负责管理视图，ViewModel负责数据和视图的连接。
image.png

先看一下大概的目录结构：

  1. 08-MVVM
  2.  ├─ index.html
  3.  ├─ mvvm
  4.  │  ├─ index.js
  5.  │  ├─ render.js # 负责页面的渲染
  6.  │  ├─ compiler
  7.  │  │  ├─ event.js # 负责事件处理
  8.  │  │  └─ state.js # 负责数据处理
  9.  │  ├─ reactive
  10.  │  │  ├─ index.js
  11.  │  │  └─ mutableHandler.js # 对数据进行响应式处理
  12.  │  └─ shared
  13.  │     └─ utils.js
  14.  └─ src
  15.     └─ App.js # 程序的入口

这个案例使用了Vite作为服务器进行开发，所以你需要进行安装Vite和配置package.json文件。

  1. {
  2.   "name": "08-mvvm",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "dev": "vite"
  8.   },
  9.   "author": "",
  10.   "license": "ISC",
  11.   "devDependencies": {
  12.     "vite": "^4.0.3"
  13.   }
  14. }

App.js

  1. // Vite 会自动补全 /index.js 的后缀
  2. import { useDom, useReactive } from "../mvvm/index";
  4. function App() {
  5.   // 创建响应式
  6.   const state = useReactive({
  7.     count: 0,
  8.     name: "TestName"
  9.   });
  10.   // 操作 state 数据的方法
  11.   const add = function (num) {
  12.     state.count += num;
  13.   };
  14.   const minus = function (num) {
  15.     state.count -= num;
  16.   };
  17.   const changeName = function (name) {
  18.     state.name = name;
  19.   };
  20.   // 模版的渲染
  21.   return {
  22.     template: `
  23.       <h1>{{ count }}</h1>
  24.       <h2>{{ name }}</h2>
  25.       <button onClick="add(2)">新增</button>
  26.       <button onClick="minus(1)">减去</button>
  27.       <button onClick="changeName('xiechen')">更改名字</button>
  28.     `,
  29.     state,
  30.     methods: {
  31.       add,
  32.       minus,
  33.       changeName
  34.     }
  35.   };
  36. }
  38. useDom(
  39.   App(), // 返回 template，state，methods
  40.   document.querySelector("#app")
  41. );

以上代码，我们引入了useDom方法对App的模版进行渲染，引入useReactive对state数据进行管理。

我们把所有需要用到的方法，都导入到了mvvm/index.js这个文件里面进行管理：

  1. export { useReactive } from "./reactive";
  2. export { useDom, update } from "./render";
  3. export { eventFormat } from "./compiler/event";
  4. export { stateFormat } from "./compiler/state";

接下来，就让我们看看每个文件都负责干了点啥。

mvvm/reactive

该文件的useReactive方法在App.js文件中进行了调用：

  1. // isObject 主要是判断是不是一个对象，如果你想看到更多的实现细节，你可以滑倒文章的最后。
  2. import { isObject } from "../shared/utils";
  3. import { mutableHandler } from "./mutableHandler";
  5. export function useReactive(target) {
  6.   // target 为 App.js 中的 state , 也就是
  7.   /* 
  8.     {
  9.       count: 0,
  10.       name: "TestName"
  11.     }
  12.   */
  13.   // mutableHandler 为 Proxy 对象拦截属性的一些方法
  14.   return createReactObject(target, mutableHandler);
  15. }
  17. function createReactObject(target, baseHandler) {
  18.   if (!isObject(target)) {
  19.     return target;
  20.   }
  21.   return new Proxy(target, baseHandler);
  22. }

以上代码，我们在createReactObject方法中对App.js文件中的数据进行拦截，并引入了mutableHandler.js文件对Proxy的数据进行处理。

  1. import { useReactive } from "./index";
  2. /**
  3.  * hasOwnProperty 用于判断一个属性是不是对象本身上的属性，而非原型上的属性
  4.  * isEqual 用于判断新值和旧值是否相等
  5.  */
  6. import { isObject, hasOwnProperty, isEqual } from "../shared/utils";
  7. import { update } from "../render";
  8. import { statePool } from "../compiler/state";
  10. function createGetter() {
  11.   return function get(target, key, receiver) {
  13.     // 通过 Reflect.get 方法去操作属性
  14.     // 详见MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/get
  15.     const res = Reflect.get(target, key, receiver);
  17.     // 如果返回的值是一个对象，那么就继续调用 useReactive 去处理
  18.     if (isObject(res)) {
  19.       return useReactive(res);
  20.     }
  22.     // 否则直接返回
  23.     return res;
  24.   };
  25. }
  27. function createSetter() {
  28.   return function set(target, key, value, receiver) {
  29.     const isKeyExist = hasOwnProperty(target, key);
  30.     const oldValue = target[key];
  31.     // 同 Reflect.get ，但是 set 返回的是是否设置成功的布尔值
  32.     const res = Reflect.set(target, key, value, receiver);
  34.     // 如果对象上没有这个属性，那么这个属性就是新增的属性
  35.     if (!isKeyExist) {
  36.       console.log("响应式新增：", value);
  37.     } else if (!isEqual(value, oldValue)) {
  38.       // 否则就是去更改属性的值
  39.       console.log("响应式修改：", key, value);
  40.       // 然后调用视图的 update 方法
  41.       update(statePool, key, value);
  42.     }
  44.     return res;
  45.   };
  46. }
  48. const get = createGetter();
  49. const set = createSetter();
  51. export const mutableHandler = {
  52.   get,
  53.   set
  54. };

以上代码，我们分别对属性的set和get拦截进行了处理，在set方法中，无论是新增或更改对象的属性，我们都可以拦截的到。

mvvm/render.js

render.js文件主要负责了对视图管理，我们在App.js文件中调用了useDom方法进行视图的渲染，且在Proxy的set处理中调用了update进行视图的更新。

  1. /**
  2.  * bindEvent 用于给元素绑定事件
  3.  */
  4. import { bindEvent } from "./compiler/event";
  5. import { eventFormat, stateFormat } from "./index";
  7. export function useDom({ template, state, methods }, rootDom) {
  8.   // 接收 App.js 方法返回的对象，也就是
  9.   /* 
  10.     {
  11.       template: xxx
  12.       state: xxx
  13.       methods: xxx
  14.     }
  15.   */
  16.   // 调用 render 方法，对模版数据进行处理
  17.   rootDom.innerHTML = render(template, state);
  18.   // 调用 bindEvent 方法进行绑定事件
  19.   bindEvent(methods);
  20. }
  22. export function render(template, state) {
  23.   /* 
  24.     eventFormat 方法会给绑定事件的模版新增一个属性 data-mark="xxx"，例如模版
  26.     <button onClick="add(2)">新增</button> =>>
  27.     <button data-mark="12345" onClick="add(2)">新增</button>
  29.     并且保存到一个名为 eventPool 的数组中，数据结构如下：
  30.     [
  31.       {
  32.         mark: 12345 // dom 标签上的 data-mark 
  33.         handler: add(2)
  34.         type: click
  35.       }
  36.     ]
  37.   */
  38.   template = eventFormat(template);
  40.   /* 
  41.     stateFormat 方法会给标签新增一个属性 data-mark="xxx"，例如模版
  42.     <h1>{{ count }}</h1> =>> 
  43.     <h1 data-mark="12345">1</h1>
  45.     并且保存到一个名为 statePool 的数组中，数据结构如下：
  46.     [
  47.       {
  48.          mark: 12345,
  49.          state: ["count"]
  50.        }
  51.     ]
  52.   */
  53.   template = stateFormat(template, state);
  54.   return template;
  55. }
  57. /* 
  58.    update 方法接收了 statePool 为参数，也就是
  59.    [
  60.         {
  61.           mark: 12345
  62.           state: ["count"]
  63.         }
  64.       ]
  66.     还接收了 set 数据的时候，要更改的属性和值
  67. */
  68. export function update(statePool, key, value) {
  69.   const allElements = document.querySelectorAll("*");
  70.   let oItem = null;
  72.   // 进行遍历
  73.   statePool.forEach((el) => {
  74.     // 如果 statePool 中 el.state 中的数据等于要 set 的属性名
  75.     if (el.state[el.state.length - 1] === key) {
  77.       for (let i = 0; i < allElements.length; i++) {
  78.         oItem = allElements[i];
  79.         const _mark = parseInt(oItem.dataset.mark);
  81.         // 如果 statePool.mark 等于某个节点的 data-mark 属性
  82.         if (el.mark === _mark) {
  83.           oItem.innerHTML = value;
  84.         }
  85.       }
  86.     }
  87.   });
  88. }

以上代码，我们分别调用了

  • bindEvent对DOM绑定事件。
  • eventFormat把DOM和事件的对应关系进行存储。
  • stateFormat把DOM和数据的对应关系进行存储，并且替换为state中对应的数据。

mvvm/compiler

以下是对mvvm/compiler/event.js文件的详解：

  1. import { checkType, randomNum } from "../shared/utils";
  3. /**
  4.  * {
  5.  *  mark: random,
  6.  *  handler: 事件处理函数的字符串
  7.  *  type: click
  8.  * }
  9.  */
  10. const reg_onClick = /onClick\=\"(.+?)\"/g;
  11. const reg_fnName = /^(.+?)\(/;
  12. const reg_arg = /\((.*?)\)/;
  13. const eventPool = [];
  15. export function eventFormat(template) {
  16.   return template.replace(reg_onClick, function (node, key) {
  17.     const _mark = randomNum();
  19.     // 把数据的对应关系存到 eventPool 里面，方面我们进行对比调用
  20.     eventPool.push({
  21.       mark: _mark,
  22.       handler: key.trim(),
  23.       type: "click",
  24.     });
  26.     /* 
  27.       eventPool 结构如下：
  28.       [
  29.         {
  30.           mark: 12345 // dom 标签上的 data-mark 
  31.           handler: add(2)
  32.           type: click
  33.         }
  34.       ]
  35.     */
  37.     // 给标签新增一个 data-mark="12345" 这样的属性
  38.     return `data-mark="${_mark}"`;
  39.   });
  40. }
  42. export function bindEvent(methods) {
  43.   const allElements = document.querySelectorAll("*");
  44.   let oItem = null;
  45.   let _mark = 0;
  47.   /* 
  48.     eventPool 结构如下：
  49.     [
  50.       {
  51.         mark: 12345 // dom 标签上的 data-mark 
  52.         handler: add(2)
  53.         type: click
  54.       }
  55.     ]
  56.   */
  58.   // 循环对比
  59.   eventPool.forEach((el) => {
  60.     for (let i = 0; i < allElements.length; i++) {
  61.       oItem = allElements[i];
  62.       _mark = parseInt(oItem.getAttribute("data-mark"));
  64.       // 如果 eventPool 中 el.mark 等于某个 dom 的 data-mark 的属性
  65.       if (el.mark === _mark) {
  66.         // 绑定事件
  67.         oItem.addEventListener(el.type, function () {
  68.           const fnName = el.handler.match(reg_fnName)[1];
  69.           const arg = checkType(el.handler.match(reg_arg)[1]);
  71.           // 调用 state.methods 里面对应的方法
  72.           methods[fnName](arg);
  73.         }, false);
  74.       }
  75.     }
  76.   });
  77. }

以下是对mvvm/compiler/state.js文件的详解：

  1. import { randomNum } from "../shared/utils";
  3. const reg_html = /\<.+?\>\{\{(.+?)\}\}\<\/.+?\>/g;
  4. const reg_tag = /\<(.+?)\>/;
  5. const reg_var = /\{\{(.+?)\}\}/g;
  7. /**
  8.  * {
  9.  *  mark: _mark
  10.  *  state: value
  11.  * }
  12.  */
  14. export const statePool = [];
  16. let o = 0;
  18. export function stateFormat(template, state) {
  19.   let _state = {};
  21.   // 绑定 data-mark
  22.   template = template.replace(reg_html, function (node, key) {
  23.     const matched = node.match(reg_tag);
  24.     const _mark = randomNum();
  26.     /* 
  27.       _state 结构如下：
  28.       {
  29.         mark: 12345,
  30.       }
  32.       statePool 结构如下：
  33.       [
  34.         {
  35.           mark: 12345,
  36.         }
  37.       ]
  38.     */
  40.     _state.mark = _mark;
  41.     statePool.push(_state);
  43.     _state = {};
  45.     // 例如将 <h1>{{ count }}</h1> 替换为
  46.     // <h1 data-mark="12345">{{ count }}</h1>
  47.     return `<${matched[1]} data-mark="${_mark}">{{ ${key} }}</${matched[1]}>`;
  48.   });
  50.   // 替换模版数据
  51.   template = template.replace(reg_var, function (node, key) {
  52.     let _var = key.trim(); // 拿到 state 里面属性的 key
  53.     const _varArr = _var.split(".");
  54.     let i = 0;
  56.     while (i < _varArr.length) {
  57.       // 去拿 state 里面对应的数据，例如 _var 为 count，所以 state.count
  58.       // 最后 _var 得到了 state.count 的值，也就是 0
  59.       _var = state[_varArr[i]];
  60.       i++;
  61.     }
  63.     _state.state = _varArr;
  64.     statePool[o].state = _varArr;
  65.     o++;
  67.     /* 
  68.       statePool 的结构如下：
  69.       [
  70.         {
  71.           mark: 12345
  72.           state: ["count"]
  73.         }
  74.       ]
  75.     */
  77.     // 将 <h1 data-mark="12345">{{ count }}</h1> 中的 count 替换为真实的数据
  78.     return _var;
  79.   });
  81.   return template;
  82. }

shared/utils.js

utils.js文件主要存放的是一些工具类的方法，我们在上面案例使用到的方法，在这里都可以找得到。

  1. function isObject(val) {
  2.   return typeof val === "object" && val !== null;
  3. }
  5. function hasOwnProperty(target, key) {
  6.   return Object.prototype.hasOwnProperty.call(target, key);
  7. }
  9. function isEqual(newVal, oldValue) {
  10.   return newVal === oldValue;
  11. }
  13. function randomNum() {
  14.   return new Date().getTime() + parseInt(Math.random() * 10000);
  15. }
  17. function checkType(str) {
  18.   const reg_check_str = /^[\'\"](.*?)[\'\"]/;
  19.   const reg_str = /(\'|\")/g;
  21.   if (reg_check_str.test(str)) {
  22.     return str.replace(reg_str, "");
  23.   }
  25.   switch (str) {
  26.     case "true":
  27.       return true;
  28.     case "false":
  29.       return false;
  30.     default:
  31.       break;
  32.   }
  34.   return Number(str);
  35. }
  37. export { isObject, hasOwnProperty, isEqual, randomNum, checkType };

收尾

到这里，我们就把这个模式完整的解释完了，再回顾一下这个代码的结构，
image.png
屏幕录制2023-02-07 15.11.11.gif

这样我们就只负责数据和视图的逻辑，剩下的事情全部交给mvvm驱动去管理，mvvm负责了创建响应式数据、对事件和数据进行编译、对模版进行渲染以及视图更新。

源码地址：
https://github.com/xiechen1201/JSPlusPlus/blob/main/%E8%85%BE%E8%AE%AF%E8%AF%BE%E5%A0%82/Vue%20%E6%9C%AC%E5%B0%8A01/08-MVVM/src/App.js