#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的相关文章
发表评论

相关文章