MVC 与 Vue

本文写于 2020 年 7 月 27 日

首先有个问题：Vue 是 MVC 还是 MVVM 框架？

维基百科告诉我们：MVVM 是 PM 的变种，而 PM 又是 MVC 的变种。

所以一定程度上来说，不管 Vue 是 MVC 还是 MVVM 或者都不是，它的思想方向与这些设计模式的方向是大体相同的。

并且 Vue 的官网中也说道：“虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。”

这个问题网上吵得比较多，本文并不是来讨论这个问题的，而是面是向初学者浅浅的分析一下老大哥 MVC 的思想在 Vue 中的体现。

0 新手的困惑

很多前端的初学者的学习顺序是 HTML、CSS、JS、Vue/React。

要知道使用原生 DOM 或者 jQuery 来写复杂页面是一件很痛苦的事情，因此很多同学的 JS 基础都没有学好就急火火的开始 Vue/React 之旅。

但是对于他们来说，这会是一场“魔法之旅”——因为 R/V 对他们来说就像魔法一样神奇。

例如下面这段代码：

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

大家一开始的心声大概是这样的：“什么？！这是什么？谁看得懂！”

并且不光是初学者，一些写了一段时间 Vue 的人，懂得 el 是是什么、data 是什么，但可能也不清楚为什么 Vue 要这么来组织代码——除非他学过 MVC。

1 一个 MVC 计数器

一个 MVC 模块是三个对象的合体：M, V, C。

M，即为 Model，代表数据；
V，即为 View，代表视图；
C，即为 Controller，代表控制（业务逻辑）。

严格来说……MCV 没有严格来说，MVC 的定义并不明确，所以我以为 MVC 其实是一种思想方向，代表着视图和业务逻辑互不干扰。

还是那句话，放码过来。我们先实现一个非常常见的例子：加按钮与减按钮。

普通版本 JS 计数器

<div id="app">
  <span>0</span>
  <button id="add">+</button>
  <button id="minus">-</button>
</div>

我们希望的结果是，当我们点击 + 号时，<span> 中的数字就会 +1，点击 - 号时，同理就会 -1。

我相信这种 JS 代码应该是信手拈来的对吧。

const numberWrapper = document.querySelector('#app span');
const addBtn = document.querySelector('#add');
const minusBtn = document.querySelector('#minus');

addBtn.addEventListener('click', () => {
  const newNumber = parseInt(numberWrapper.innerText) + 1;
  numberWrapper.innerText = newNumber.toString();
});

minusBtn.addEventListener('click', () => {
  const newNumber = parseInt(numberWrapper.innerText) - 1;
  numberWrapper.innerText = newNumber.toString();
});

但这只是普通版，接下来让我们用 MVC 的方式来一步步的重构这个代码。

MVC 版本 JS 计数器

首先我们想，这样写的一个计数器，如果需要修改，那我一方面要改 HTML 文件、一方面还要修改 JS 文件，何其麻烦！

写到一起来吧：

const app = document.querySelector('#app');

const html = `
  <span>0</span>
  <button id="add">+</button>
  <button id="minus">-</button>
`;
const counter = document.createElement('div');
counter.innerHTML = html;
app.appendChild(counter);

那么我们来梳理一下现在的代码：

首先我们需要创建 HTML 元素；
然后通过 CSS 选择器找到对应的 DOM 元素；
再对他们添加各种监听事件与操作。

那我们可以大胆的猜测一下嘛，如何使用 MVC 思想呢？

首先新建一个对象叫做 view 吧，再将我们的 html 代码放进去：

const view = {
  html: `
    <span>0</span>
    <button id="add">+</button>
    <button id="minus">-</button>
  `
};

还有我们用来新建 div、将 html 代码放入 div、再将 div 放进 app 的操作，应该也是属于视图层。

所以我们给 view 对象添加一个 render 方法：

const view = {
  // ...html...
  render() {
    const counter = document.createElement('div');
    counter.innerHTML = view.html;
    app.appendChild(counter);
  }
};

view.render();

这样我们就搞定了 V，然后看看 C。除了视图和数据，其他的东西应该都属于 C，所以 DOM 元素的获取放在 C 里、事件绑定也放在 C 里。

const controller = {
  ui: {},
  bindEvents() {}
};

这里我们准备将 DOM 元素放在 ui 对象里，但是这里需要脑子转一下。

一旦我们在这里写了 querySelector，那么必然是找不到元素的，因为我们还没有 render，根本没有那些按钮和数字。

所以我们得在里面写一个 init 函数，这样我们执行初始化之后，他就会先去获取 DOM、再去绑定事件：

init() {
  this.ui = {
    numberWrapper: document.querySelector('#app span'),
    addBtn: document.querySelector('#add'),
    minusBtn: document.querySelector('#minus')
  };
  controller.bindEvents();
},

绑定事件的写法就非常简单了：

bindEvents() {
  controller.ui.addBtn.addEventListener('click', () => {
    const newNumber = parseInt(controller.ui.numberWrapper.innerText) + 1;
    controller.ui.numberWrapper.innerText = newNumber.toString();
  });
  controller.ui.minusBtn.addEventListener('click', () => {
    const newNumber = parseInt(controller.ui.numberWrapper.innerText) - 1;
    controller.ui.numberWrapper.innerText = newNumber.toString();
  });
}

接下来就是一个转折点了，我们要创建一个 model 对象来保存数据。

const model = {
  data: {
    number: 100
  }
};

这个时候不知道大家有没有领悟到一些东西。

既然已经有了 model，我们何必还去操作 DOM 获取数据呢？

直接操作 model 多优雅呀！

所以 bindEvents 可以改成这样：

controller.ui.addBtn.addEventListener('click', () => {
  model.data.number += 1;
});
controller.ui.minusBtn.addEventListener('click', () => {
  model.data.number -= 1;
});

那我们的 view 对象也需要修改，他也应该从 model 中获取数据：

const view = {
  html: `
    <span>{{number}}</span>
    ......
  `,
  render() {
    const counter = document.createElement('div');
    counter.innerHTML = view.html.replace('{{number}}', model.data.number);
    app.appendChild(counter);
  }
};

但是我们这样操作虽然说修改了数据，可是并没有重新渲染到页面上呀。所以每次提交之后需要重新 render。

此时问题出现了：点击 + 或者 - 后，数字只会变化一次，第二次点击便毫无用处！

这是为什么呢？

很简单，因为我们重新 render，导致俩绑定了事件的 button 全都不是曾经的那个他了。

所以我们使用事件代理来解决这个问题——将事件绑定在外层的 div 上，然后判断点击对象的 id 即可。

写法如下：

const compute = e => {
  switch (e.target.id) {
    case 'add':
      model.data.number += 1;
      break;
    case 'minus':
      model.data.number -= 1;
      break;
    default:
      return;
  }
  view.render();
};

接下来我们会在 view 对象中添加一个 el 属性，用来存储我们创建的外层 div。

const view = {
  el: null,
  // ......
  render() {
    if (!view.el) {
      // 创建 div，并将 div 赋值给 el
    } else {
      // 将 el 的 innerHTML 更换为新的内容
    }
  }
};

最后我们再进行一步优化。

我们本身不应该知道在 render 时，应该 append 给哪一个元素。这个元素应该是别人传给我的，所以应该这么写：

总代码：

MVC 之 V

const view = {
  el: null,
  html: `
    <span>{{n}}</span>
    <button id="add">+</button>
    <button id="minus">-</button>
  `,
  render(container) {
    if (!view.el) {
      const counter = document.createElement('div');
      view.el = counter;
      counter.innerHTML = view.html.replace(
        '{{n}}',
        model.data.number.toString()
      );
      container.appendChild(counter);
    } else {
      view.el.innerHTML = view.html.replace(
        '{{n}}',
        model.data.number.toString()
      );
    }
  }
};

MVC 之 M

const model = {
  data: {
    number: parseInt(window.localStorage.getItem('number')) || 0
  },
  save() {
    window.localStorage.setItem('number', model.data.number.toString());
  }
};

MVC 之 C

const controller = {
  init(container) {
    controller.ui = {
      container
    };
    view.render(container);
    controller.bindEvents();
  },
  bindEvents() {
    controller.ui.container.addEventListener('click', e => {
      switch (e.target.id) {
        case 'add':
          model.data.number += 1;
          break;
        case 'minus':
          model.data.number -= 1;
          break;
        default:
          return;
      }
      model.save();
      view.render();
    });
  }
};

使用方式：

const app = document.querySelector('#app');

controller.init(app);

这个时候我们的程序已经是一个比较完整的 MVC 模式了，但直接全部 render 非常浪费性能。

所以 React 之类的框架会使用虚拟 DOM 和 diff 算法来只修改变化的 DOM。

总的来说，我们的 MVC 思想可以抽想成为一个公式：view = render(data)

使用 class 来优化代码

class 优化代码可以提升我们的代码复用程度，铭记：程序员永远不要重复自己的操作。

先看看 Model：

class Model {
  constructor(options) {
    for (let key in options) {
      this[key] = options[key];
    }
  }

  save() {
    console.error('还未传入save函数');
  }
}

export default Model;

这个非常简单，我们想要传入任何的东西，都在这个 option 里面，就像这样：

const model = new Model({
  data: {},
  save() {}
});

回想一下，我们使用 Vue 的时候，是不是也是如此？

export default new Vue({
  data() {
    return {
      msg: 'hello world'
    };
  },
  methods: {}
});

我没读过 Vue 的源码，不知道 Vue 是否是按照本文的思路构建代码的。

但是 Vue、React 等框架追根溯源都能找到 MVC 的身上。所以毫无疑问，MVC 的思想是每一个程序员都需要学习的一种设计模式。

初学程序，用了几个好用的框架与工具，不应该只沉迷于其方便的一面，要善于从工具的运用中寻找出其作者留下的蛛丝马迹，反推学习、多查资料，才能够慢慢进化成为不惧怕新技术、框架越来越多的大神程序员！

工具也许会一个月一变、一天一变，但是思维是永恒的。

（完）

posted @ 2020-07-28 15:44 徐航宇阅读(4348) 评论(0) 编辑收藏举报

刷新页面返回顶部

徐航宇的网络日志

热爱代码 / 热爱设计 / 热爱生活

MVC 与 Vue

MVC 与 Vue

0 新手的困惑

1 一个 MVC 计数器

普通版本 JS 计数器

MVC 版本 JS 计数器