3
#yyds干货盘点#聊聊前端架构模式
source link: https://blog.51cto.com/u_11365839/5745621
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
#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();
})()
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();
})()
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的相关文章
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK