架构模式

浏览数:1,973

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

喜欢 0

架构模式

MVC架构模式

MVP架构模式

MVVM架构模式

相关推荐