#yyds干货盘点#聊聊前端架构模式

架构模式是使用多种设计模式，来改进代码的组织方式，实现软件设计的低耦合高内聚（降低模块间的接口的复杂度，每个模块尽可能独立完成自己的功能，不依赖于模块外部代码）
前后端不分的时代，前端代码由后端生成发送到浏览器（服务端渲染），所以最先是后端采用MVC或MVP架构模式，前端只是后端的View层
Ajax技术的诞生，使前端可以独立获取数据，不再依赖于服务端渲染
前端代码也需要保存数据、处理数据、生成视图，所以导致前端MVC、MVP以及MVVM的诞生

MVC架构模式

Model层：

用来封装数据以及处理数据的一些方法，一旦数据发生变化便通知相关视图
Model与View之间使用了观察者模式，View注册监听Model，更新View

View层：

用来做数据的展示
View与Controller之间使用策略模式，View通过controller实例，实现特定的响应策略

Controller层：

是模型与视图间的纽带，将响应机制封装到Controller中

具体实现

//Model层
  function Model(){
      //模拟数据
      var val = 0;
      //定义一个操作数据的方法跟一个返回数据的方法
      this.add = function(){
          val +=1;
      }
      this.getVal = function(){
          return val;
      }
      //观察者模式
      var views = []
      //将观察者存入数组
      this.regist = function(view){
          views.push(view);
      }
      //通知view更新
      this.notify = functiong(){
          //所有定义了render方法的view都会执行render方法
          for(var i = 0;i < views.length;i++){
              if(views[i].render){
                  views[i].render(this);
              }
          }
      }
  }
  //View层
  function View(controller){
      //获取节点
      var $num = $('#num');
      var $add = $('#add');
      this.render = function(model){
          $num.text(model.getVal());
      }
      $add.on('click',controller.add)
  }
  //Controller层
  function Controller(){
      var model = null;
      var view = null;
      this.init = function(){
          model = new Model();
          view = new View(this);
          model.regist(view);
      }
      this.add = function(){
          model.add();
          model.notify();
      }
  }
  //运行程序时，以Controller为入口
  (function(){
      var controller = new Controller();
      controller.init();
  })()

MVC中view跟controller是一一对应的，视图与控制器联系过于紧密，不能多个View复用一个controller，因为初始化入口在controller
上面很明显可以看出model是直接可以通知view更新

MVP架构模式

MVP是MVC模式的改良
Model层：

依然用来封装数据以及处理数据的一些方法
View的更新不依赖于model，Model只负责管理数据
Model更新完数据后将结果交给Persenter

View层：

依然用来做数据的展示
View与Presenter之间使用观察者模式与策略模式

View通过Presenter实例，实现特定的响应策略通知Model更新
等Model更新完之后Presenter调用view暴露给回调函数通知View更新

Presenter层:

Presenter是模型与视图的中间人，除了处理逻辑外，还有大量的数据同步操作

具体实现

 //Model层
  function Model(){
      //模拟数据
      var val = 0;
      //定义一个操作数据的方法跟一个返回数据的方法
      this.add = function(){
          val +=1;
      }
      this.getVal = function(){
          return val;
      }
  }
  //View层
  function View(){
       //获取节点
      var $num = $('#num');
      var $add = $('#add');
      this.render = function(model){
          $num.text(model.getVal());
      }
      this.init = function(){
          var presenter = new Presenter(this)
          $add.on('click',presenter.add)
      }
  }
  //Presenter
  function Presenter(view){
      var _model = new Model();
      var _view = view;
      _view.render(_model);
      this.add=function(){
          _model.add();
          _view.render(_model);
      }
  }
  //运行时以View为入口
  (function(){
      var view = new View();
      view.init();
  })()

由于入口为View，所以可以实现多个View共享一个Presenter
Presenter中有大量的手动同步数据操作，使得Presenter非常臃肿，而且一个Presenter要处理多个视图，维护也不方便

MVVM架构模式

MVVM将数据的同步自动化，以前的Presenter不需要手动进行数据同步，而是交给框架提供的数据绑定进行同步，只需要告诉他View显示的数据对应Model中的那一部分即可
Model层：

它只关注数据本身，没有任何数据处理行为，可以认为就是Json转化的Js对象，数据处理交给VM

View层：

通过模板语法将数据渲染进DOM，通过数据绑定与Model进行数据同步

ViewModel层：

除了实现业务逻辑外，最主要的是实现数据绑定，之前Presenter中的手动数据同步交给ViewModel中的数据绑定来做

双向数据绑定：

实现View与Model的同步自动化，不同的MVVM框架中实现数据绑定的方式有所不同，主要有以下两种

数据劫持+观察者模式（Vue）
脏值检查（Angular）

具体实现参考Angular与Vue的相关文章

#yyds干货盘点#聊聊前端架构模式

MVC架构模式

MVP架构模式

MVVM架构模式

相关文章