学习MVC、MVP、MVVM模式
程序员文章站
2022-07-01 19:26:04
...
架构型设计模式
1、MVC模式
前端页面依据MVC思想开发的时候,可将页面分成3层部分,数据层部分、视图层部分、控制层部分。视图层可以调用数据层创建视图,控制器层可以调用数据层数据与视图层内的视图创建页面增添逻辑。
MVC代码
const MVC = {};
// 数据模型层
MVC.model = function(){
const M = {};
M.data = {
demo1: {},
// ...
};
return {
getData(m){},
setData(k, v){},
// ...
}
}();
// 视图层
MVC.view = function(){
const M = MVC.model;
const V = {
// 基于数据,创建视图
createComponent1() {
let data = M.getData('demo1');
console.log(data);
// ...
},
// ...
};
return function(v) {
V[v]();
}
}();
// 控制器层
MVC.ctrl = function(){
const M = MVC.model;
const V = MVC.view;
const C = {
initComponent1: function() {
// 渲染视图
V('createComponent1');
// 添加交互方法
document.getElementById('component1').onclick = function(){};
// ...
},
// ...
};
for (let i in C) {
C[i] && C[i]();
}
}();
2、MVP模式
MVP指模型(Model)、视图(View)、管理器(Presenter),View层不直接引用Model层的数据,而是通过Presenter层实现对Model层内的数据访问。即所有层次的交互都发生在Presenter层中。
MVP代码
const MVP = function(){};
// 数据层
MVP.model = function() {
const M = {};
M.data = {
demo1: {},
// ...
};
return {
getData(m){},
setData(k, v){},
// ...
}
}();
// 视图层
MVP.view = function() {
return function(str) {
let tpl;
// 根据传入的字符串,创建模板
// ...
return tpl;
}
}();
// 管理层
MVP.presenter = function(){
var V = MVP.view;
var M = MVP.model;
var C = {
createComponent1: function(M, V) {
// 获取数据
const demo1 = M.getData('demo1');
// 获取组件模板
let template = V('...');
// 得到如template="<li class='{{className}}'>{{text}}</li>"
compiler(template, demo1);
// 基于数据,编译模板
function compiler(tpl, data) {
let html;
// ...
document.getElementById('app').innerHTML = html;
}
// 添加交互方法等
document.getElementById('app').onclick = function(){};
// ...
},
// ...
};
return {
init: function() {
for (let i in C) {
C[i] && C[i](M, V);
}
}
}
};
// MVP入口
MVP.init = function(){
this.presenter.init();
};
window.onload = function() {
MVP.init();
}
3、MVVM模式
在MVC或MVP模式中,每次实现页面组件的需求时,总是要操作管理器或者控制器。有时多个组件UI功能类似,仍需要多次操作管理器或者控制器,这或许会有代码重复。
MVVM模式可以使视图层更灵活,可以独立于数据模型层、视图模型层而独立修改、*创建。当然这也使得数据模型层可以独立变化,甚至一个视图模型层可以对应多个视图层或者数据模型层。
MVVM代码
const VM = function(){
const Method = {
component1: function(dom, data) {
const node = document.createElement('div');
// 添加样式,添加子元素等
node.style.width = data.data.width;
// ...
dom.appendChild(node);
// 添加交互方法等
node.onclick = function(){};
},
// ...
};
function getBindData(dom) {
// 获取组件上的自定义属性值
let data = dom.getAttribute('data-bind');
// 将data值转换为对象
return !!data && (new Function(`return ({${data}})`))()
}
return function() {
// 获取页面中所有元素
let doms = document.body.getElementsByTagName('*'),
// 元素自定义数据句柄
ctx = null;
for (let i = 0; i < doms.length; i++) {
ctx = getBindData(doms[i]);
ctx.type && Method[ctx.type] && Method[ctx.type](doms[i], ctx);
}
}
};
// ---使用---
// html
<body>
<div data-bind="type: 'component1', data: demo1"></div>
<div data-bind="type: 'component1', data: demo2"><span>自定义内容</span></div>
</body>
// js
const demo1 = {
width: 30,
// ...
}
const demo2 = {
width: 20,
// ...
}
window.onload = function() {
VM();
}
总结
在MVC或MVP模式中,都是控制器或者管理器占据主动权,由它们来决定创建组件的需求。而MVVM模式,是将视图层独立出来,简化了视图层的操作。在视图层里,决定创建哪些组件,决定组件绑定哪些数据。
我们知道Vue的设计借鉴于MVVM模式,但是并没有完全遵循MVVM模型。MVVM是数据驱动视图,视图更改数据,但不能够通过改变数据对视图进行更新,即是非响应式的。
参考资料:《JavaScript设计模式》张容铭
上一篇: Oracle Database 12c SQL关于DML的操作讲解
下一篇: 聊天室开发详解(二)
推荐阅读
-
《从零开始学Swift》学习笔记(Day67)——Cocoa Touch设计模式及应用之MVC模式
-
Android设计模式理解(mvc mvp mvvm)
-
jsp学习---mvc模式介绍和el表达式,jstl标签库的使用入门
-
MVC、MVP、MVVM 模式对比
-
MVC、MVP以及MVVM分析
-
MVC、MVP和MVVM分别是什么_动力节点Java学院整理
-
vue-cli学习笔记 vue-cli学习笔记 MVC、MVP、MVVM
-
WPF学习笔记 MVVM模式下,ViewModel如何关闭View
-
MVC/ MVP / MVVM 架构学习之井字游戏_2_MVP实现
-
MVC/ MVP / MVVM 架构学习之井字游戏_3_MVVM实现