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

作者： 麦乐

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

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.csdn.net'
        }
      ]
    }
    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;
      }