MVP模式
MVP模式
MVC即模型Model、视图View、管理器Presenter，MVP模式从MVC模式演变而来，通过管理器将视图与模型巧妙地分开，即将Controller改名为Presenter，同时改变了通信方向，MVP模式模式不属于一般定义的23种设计模式的范畴，而通常将其看作广义上的架构型设计模式。
描述
在MVC里View是可以直接访问Model中数据的，但MVP中的View并不能直接使用Model，而是通过为Presenter提供接口，让Presenter去更新Model，再通过观察者模式等方式更新View，与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型使职责划分更加清晰，由于View不依赖Model，可以将View抽离出来做成组件，其只需要提供一系列接口提供给上层操作。
View <-> Controller <-> Model
实现
在这里我们主要是示例MVP的分层结构，如果要实现MVP信息传递就需要进行一些指令与事件的解析等，Presenter作为View和Model之间的中间人，除了基本的业务逻辑外，还需要实现对从View到Model以及从Model到View的数据进行手动同步，例如我们在View中实现一个++计数器就需要在Presenter实现具体操作的Model进行++后再Render到视图中，此外由于没有数据绑定，如果Presenter对视图渲染的需求增多，其不得不过多关注特定的视图，一旦视图需求发生改变Presenter也需要改动。
<!DOCTYPE html>
<html>
<head>
<title>MVP</title>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
const MVP = function(){
this.data = {};
this.template = "";
};
MVP.prototype.model = function(data){
/* 一些预处理 */
this.data = data;
}
MVP.prototype.view = function(template){
/* 一些预处理 */
this.template = template;
}
MVP.prototype.presenter = function(el){
/* 一些处理 */
/* 重点是presenter部分 指令的解析、逻辑等都需要在这里实现 */
const container = document.querySelector(el);
const formatString = (str, data) => {
return str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] === void 0 ? "" : data[key]);
}
return {
render: () => {
const parsedStr = formatString(this.template, this.data);
container.innerHTML = parsedStr;
}
}
}
const mvp = new MVP();
mvp.model({
name: "测试",
phone: "13333333333"
})
mvp.view(`
<div>
<span>姓名</span>
<span>{{name}}</span>
</div>
<div>
<span>手机号</span>
<span>{{phone}}</span>
</div>
`);
const presenter = mvp.presenter("#app");
presenter.render();
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://zhuanlan.zhihu.com/p/140071889
https://juejin.cn/post/6844903480126078989
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
