2-三大模型MVVM-MVC-MVP

Aben
297 阅读2分钟

前言

Hi，我是Aben，连夜更新第二集，欢迎Star---》源代码仓库

  • 首先需要声明的一个点，在前端的MV模块与后端的MV模块是不相同的，我们可以简单的做点了解，比如前端针对的浏览器的MV，M指的是数据层（JSON、XML）与请求层（Ajax、Axios），V指的是包含HTML与CSS这种视图模块层；而后端的M指的是数据模块中的Session服务器、关系服务器等，其V用来指代各种计算机语言生成的模板。可以看到，在后端的MV与前端的MV存在差异，没有直接的联系。因为我本身为前端开发学习者，因此接下来讲解的方向均针对的是前端方向。

MVC

  • 视图（View）：用户界面。

  • 控制器（Controller）：业务逻辑

  • 模型（Model）：数据保存

    这三者通过彼此单向环状联系，V层传送指令到C层，而C层完成业务后要求M层更改状态，M层再反馈数据给V层，因此用户会得到动态数据反馈。

    用户可以通过方式1，直接更改View，而再传递给Controller；或选择2方式直接更改Controller

image-20210625145538520.png

MVP

  • P（Presenter）：业务逻辑

    与mvc不同，在mvp中这三者实现了双向绑定，在V层与M层为彼此不联系关系，都通过p层进行数据传输

image-20210625151338135.png

MVVM

MVVM，VM指ViuewModel，即为model-view-binder（模型-视图-视图模型），作为一种软件体系结构模式，它通过双向数据绑定，将View于Model的同步更新实现自动化，即Model变化带动ViewModel自动更新，ViewModel变化View也会更新，但V层与M层之间不会产生直接联系。而Vue就是通过数据劫持与发布-订阅模式实现这一功能(关于数据劫持与发布订阅模式届时我们通过与Vue的生命周期，利用Vue源码与流程图的方式一起讲解，这里指简单提及)，引入vue就是可以更加方便的来处理的就是VM这数据绑定。

image-20210625151621459.png 如下面代码所示，template处理的是V层，而其他对象针对的是model模块，我们的vue在这里将很多细节进行了隐藏，如同黑盒子般将v层与m层进行数据处理。

<body>
  
  <div id="app"></div>

  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: `
        <div>
          <h2>{{message}}</h2>
          <h2>{{counter}}</h2>
          <button @click='increment'>+1</button>
          <button @click='decrement'>-1</button>
        </div>
      `,
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },
      // 定义各种各样的方法
      methods: {
        increment() {
          console.log("点击了+1");
          this.counter++;
        },
        decrement() {
          console.log("点击了-1");
          this.counter--;
        }
      }
    }).mount('#app');
  </script>
</body>

image-20210625180149617.png

JS还原MVVM双向绑定

这个时候或许还有人会好奇，MVVM的原理在代码逻辑上是怎么实现的，下面用原生JS代码进行简单的还原mvvm模式。

image-20210625164649395.png

<body>
    <script>
      /* 设定初始变量 */
        let msg = " Hello World!";
        window.onload = function() {
          /* 获取元素 */
            let h2Dom = document.getElementById("h2Dom");
            let inputDom = document.getElementById("inputDom");
            /* 实现双向绑定 */
            h2Dom.innerHTML = msg;
            inputDom.value = msg;
            inputDom.addEventListener("input", function() {
                msg = this.value;
                h2Dom.innerHTML = msg;
            })
        }
    </script>
    <!-- v层 -->
    <div>
        <h2 id="h2Dom"></h2>
        <input id="inputDom" />
    </div>
</body>

好了，对于三大模式的讲解就到这里了 ，欢迎订阅我的频道，如果对文章有其他深刻见解欢迎讨论。

avatar
文章
阅读
粉丝