前端MVP开发模式

最新推荐文章于 2025-04-24 09:32:36 发布

林多多@

最新推荐文章于 2025-04-24 09:32:36 发布

阅读量948

点赞数 1

分类专栏：初学者学习前端文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_59816940/article/details/125616578

版权

初学者学习前端专栏收录该内容

22 篇文章

订阅专栏

MVP开发模式

身为前端开发，我相信大家对MVVM模式是相当熟悉的，但是在MVVM模式之前，大家有没有思考是什么样的开发模式呢
没错，是MVP，对，一个很神奇的名字，也很好记
那么，MVP模式都有哪些层呢，它和MVVM的区别又是什么呢

什么是MVP模式

在这里插入图片描述

MVP模式是通过分离Model、View、Presenter的方式组织代码。 View负责页面的显示逻辑；
Model负责存储页面的业务数据以及对相应数据的操作；
Presenter将View层的变化与Model层的变化绑定在一起，当用户与页面产生交互的时候，View和Model可以进行同步的更新。
MVP中的presenter同时具有View和Model的接口。 Presenter作为一个中转站，view中的变化先传到Presenter
Presenter传到Model中对Model中的数据进行更改再通过Presenter将数据更新到view层中

这个就是MVP模式的官网图
其实我们发现，它和MVVM一样，都是三层，但是我们知道，MVVM的VM层不需要我们去操作，它是Vue自己操作的，当然，关于VM层的底层原理，我们知道Vue2的Object.defineProperty，也知道Vue3中的proxy，这里就不过多叙述了

需要注意的是，在MVP的三层中，我们都是需要进行操作的，而且大量地操作了DOM，这也是MVP和MVVM最明显的区别了

那么，MVP是用什么去操作实例呢，当然不是vue.js了哈
是我们的老朋友，jquery

MVP代码实例

<body>
  <div>
    <input type="text">
    <button id="btn">提交</button>
    <ul></ul>
  </div>
  <script>
    function Page() { }
    $.extend(Page.prototype, {
      init: function () {
        this.bindEvents()
      },
      bindEvents: function () {
        var btn = $('#btn')
        btn.on('click', $.proxy(this.handleBtnClick,
          this))//proxy是jquery的一个方法，可以改变this指向
      },
      handleBtnClick: function () {
        alert('123')
      }
    })
    var page = new Page()
    page.init()
  </script>
</body>

没错，我们用了jquery的一些api，我们知道jquery80%以上都是用来操作DOM的，也有一部分可以操作Ajax，但是它还是有别的作用的哈！

以上的代码是一个测试的demo，下面的就是一个很简单的TodoList的例子了

<body>
  <div>
    <input id="input" type="text">
    <button id="btn">提交</button>
    <ul id="ul"></ul>
  </div>
  <script>
    function Page() { }
    $.extend(Page.prototype, {
      init: function () {
        this.bindEvents()
      },
      bindEvents: function () {
        var btn = $('#btn')
        btn.on('click', $.proxy(this.handleBtnClick,
          this))
      },
      handleBtnClick: function () {
        var inputValue = $("#input").val()
        var ulElem = $("#ul")
        ulElem.append('<li>' + inputValue + '</li>')
        $("#input").val('')
      }
    })
    var page = new Page()
    page.init()
  </script>
</body>