简介

• MVC模式指的是：Modal模型、View视图、Controller控制器
• 他是一种使用业务逻辑、数据、视图进行分离的方式来，组织架构代码的模式

代码示例

// 一个简单的MVC实例
var MVC = {};
MVC.model = (function () {
  var data = {
    sideBar: [{
      title: 'sideBar1',
      href: './a.html'
    }, {
      title: 'sideBar2',
      href: './b.html'
    }, {
      title: 'sideBar3',
      href: './c.html'
    }]
  };
  return {
    getData: function (key) {
      return data[key];
    },
    setData: function (key, value) {
      data[key] = value;
      if (key === 'sideBar') {
        var v = MVC.view;
        v('createSideBar');
      }
    }
  }
})();
MVC.view = (function () {
  var m = MVC.model;
  var view = {
    createSideBar: function () {
      var data = m.getData('sideBar');
      var html = '';
      html += '<div id="sideBar">';
      for (var i = 0; i < data.length; i++) {
        html += '<div class="sideBar-item"><a href="' + data[i].href + '">' + data[i].title + '</a></div>';
      }
      html += '</div>'
      document.getElementById('root').innerHTML = html;
    }
  }
  return function (v) {
    view[v]();
  }
})();
MVC.ctrl = (function () {
  var m = MVC.model;
  var v = MVC.view;
  var ctrl = {
    initSideBar: function () {
      v('createSideBar');
    },
    updateSideBar: function () {
      m.setData('sideBar', [{ title: 'new SideBar', href: './aaa.html' }]);
    }
  }
  return ctrl;
})();
window.onload = function () {
  MVC.ctrl.initSideBar();
  setTimeout(function () {
    MVC.ctrl.updateSideBar();
  }, 3000);
}

优缺点

优点：

• 耦合性低；
• 重用性高；
• 部署快；
• 可维护性高；
• 有利于软件工程化管理。

缺点：

• 不适合小型中等规模的应用程序；
• 增加了系统结果和实现的复杂性；
• View 和 Model 之间不匹配，用户界面和流程要考虑易用性，用户体验优化同时考虑业务流程的精确和无错。
• Controler 和 Model 之间界线不清，什么样的逻辑是界面逻辑，什么样的逻辑是业务逻辑，很难定义清楚。没有明确的定义；
• View 的变化不能完全由 Model 控制，即 Observer 模式不足以支持复杂的用户交互。
  • 这其实要求VC之间要有依赖。牵一发而动全身，数据，显示不分离，Controller，Model 联系过于紧密。