深入代码理解MVC模式、MVP模式和MVVM模式

恒生LIGHT云社区

于 2022-04-15 10:41:00 发布

阅读量611

点赞数 1

文章标签：设计模式 python vue javascript mvc

本文链接：https://blog.youkuaiyun.com/weixin_44433834/article/details/124193206

版权

本文深入探讨了MVC、MVP和MVVM三种设计模式，详细阐述了它们的基本结构、优缺点。MVC模式中，视图和控制器联系紧密，耦合性较大；MVP模式降低了耦合度，但视图和Presenter交互频繁；MVVM模式通过数据双向绑定实现了更低的耦合，但也可能导致视图复用困难。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：麦乐

不知道看了多少遍有关三者区别的文章，每个都是有图有真相，但是当被问起三者的区别，还是觉得说不清楚，因为没有真正的理解。

MVC

如下图，View和Controler都可以访问Model，Model中数据流动方法都是双向的。也就是说V和C都可以改变数据，也可以获取数据。

上图在代码层面表现如下：

基本结构：

function createMVC() {
  var MVC = {};
  MVC.model = function() {
 
  }
  MVC.view = function() {
  
  }
  MVC.controler = function() {
  
  }
}

比如说要实现一个新闻列表模块,实现数据层：

function createMVC() {
  var MVC = {};
  MVC.model = function() {
    var M = {}
    // 通常是从后端获取的
    M.data = {
      newsList = [
        {
          text: '新闻一',
          icon: '',
          url: 'https://www.baidu.com'
        },
        {
          text: '新闻二',
          icon: '',
          url: 'https://blog.youkuaiyun.com'
        }
      ]
    }
    M.config= {
      // 新闻动画控制数据
    }
    return {
      getData: function(key) {
        return M.data[key]
      },
      setData: function(key, value) {
        M.data[key] = value;
        return this;
      },
      getConfig: function(key) {
        return M.config[key]
      },
      setConfig: function(key, value) {
        M.config[key] = value;
        return this;
      }

最低0.47元/天解锁文章