架构模式

框架

浏览数:1,334

2017-12-23

  • 架构模式是使用多种设计模式,来改进代码的组织方式,实现软件设计的低耦合高内聚(降低模块间的接口的复杂度,每个模块尽可能独立完成自己的功能,不依赖于模块外部代码)
  • 前后端不分的时代,前端代码由后端生成发送到浏览器(服务端渲染),所以最先是后端采用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的相关文章

如需转载,请注明出处: http://www.aaronxue.top/2017/06/架构模式.html