前端框架架构模式

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

MVC架构模式

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

  • 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架构模式

mvp

  • MVVM将数据的同步自动化,以前的Presenter不需要手动进行数据同步,而是交给框架提供的数据绑定进行同步,只需要告诉他View显示的数据对应Model中的那一部分即可
  • Model层:
    • 它只关注数据本身,没有任何数据处理行为,可以认为就是Json转化的Js对象,数据处理交给VM
  • View层:
    • 通过模板语法将数据渲染进DOM,通过数据绑定与Model进行数据同步
  • ViewModel层:
    • 除了实现业务逻辑外,最主要的是实现数据绑定,之前Presenter中的手动数据同步交给ViewModel中的数据绑定来做
  • 双向数据绑定:
    • 实现View与Model的同步自动化,不同的MVVM框架中实现数据绑定的方式有所不同,主要有以下两种
      • 数据劫持+观察者模式(Vue)
      • 脏值检查(Angular)
    • 具体实现参考Angular与Vue的相关文章