MVP
即模型（Model）- 视图（View）- 管理器（Presenter）：View层不直接引用Model层内的数据，而是通过Presenter层实现对Model层内的数据访问。即所有层次的交互都发生在Presenter层中。
示例
<div id="container"></div>
AI 代码解读
// MVP模式
class MVP {
/**
* MVP构造函数
* @param {Array || {name, data, pst}} args
* @param {string} name 模块名称
* @param {any} data 数据
* @param {Function} pst 管理器模块
*/
constructor(...args) {
let arr = Array.isArray(args[0]) ? args[0] : [{
name: args[0], data: args[1], pst: args[2] }];
arr.forEach(m => {
// 在数据层添加数据
this.model.setData(m.name, m.data);
// 在管理器层添加管理器模块
this.presenter.add(m.name, m.pst);
});
}
// 数据层
model = (function () {
let M = {
};
// 存储数据层数据
M.data = {
};
return {
/**
* 获取数据
* @param {string} m 模块名称
* @returns 数据
*/
getData(m) {
return M.data[m];
},
/**
* 设置数据
* @param {string} m 模块名称
* @param {any} value 数据
* @returns 数据
*/
setData(m, value) {
M.data[m] = value;
return value;
},
// 整和 数据 + HTML字符串
formatString(str, data) {
return str.replace(/\{#(\w+)#\}/g, function (_match, key) {
return data[key];
})
},
}
}());
// 视图层 - 解析模板
view = (function () {
// 模板解析器
return function (html) {
/**
* code....
* 可自定义模版进行解析
* code....
*/
return html;
}
}());
// 管理器层
presenter = (function (that) {
let M = that.model;
let V = that.view;
// 存储模板管理器
let P = {
};
return {
// 执行方法
init() {
// 遍历内部管理器
for (let k in P) {
// 执行所有管理器内部逻辑
P[k] && P[k](M, V, k);
}
},
/**
* 添加管理器
* @param {string} name 模块名称
* @param {Function} pst 管理器
*/
add(name, pst) {
P[name] = pst;
return this;
}
};
}(this));
// MVP入口
init = (function (that) {
return function () {
that.presenter.init();
return that;
}
}(this));
}
AI 代码解读
let obj = {
// 模块名称
name: 'nav',
// 数据
data: [
{
label: '新闻头条', type: 'news', url: '#' },
{
label: '最新电影', type: 'movie', url: '#' },
{
label: '热门游戏', type: 'game', url: '#' },
{
label: '今日特价', type: 'price', url: '#' },
],
// 管理器
pst: function (M, V, name) {
let data = M.getData(name);
let tpl = V(`
<li class="{#type#}">
<a href="{#url#}" title="{#label#}">{#label#}</a
</li>
`);
let nav = document.createElement('ul');
nav.id = name;
nav.className = 'nav';
data.forEach(d => {
nav.innerHTML += M.formatString(tpl, d);
});
document.getElementById('container').appendChild(nav);
}
};
new MVP([obj]).init();
AI 代码解读
特点
管理层（presenter），负责管理数据、UI视图创建、交互逻辑、动画特效等等一切事务。因此管理层也就强大起来。这样数据层只负责存储数据，视图层只负责创建视图模板，他们的业务独立而又单一，因此我们添加或修改模块，只需要对管理器层做处理就足够了。
MVP与MVC相比最重要的特征就是MVP中将视图层与数据层完全解耦，使得对视图层的修改不会影响到数据层，数据层内的数据改动又不会影响到视图层。
因此，我们在管理器中对数据或者视图灵活地调用就可使数据层内的数据与视图层内的视图得到更高效的复用。
因此，MVP模式也可以实现一个管理器，可以调用多个数据，或者创建多种视图，而且是不受限制的。
因而管理器有更高的操作权限，因此对于业务逻辑与需求的实现只需专注于管理器的开发即可，当然管理器内过多的逻辑也使得其开发与维护成本提高。
