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抽离出来做成组件，其只需要提供一系列接口提供给上层操作。

Copy
View <-> Controller <-> Model

实现#

在这里我们主要是示例MVP的分层结构，如果要实现MVP信息传递就需要进行一些指令与事件的解析等，Presenter作为View和Model之间的中间人，除了基本的业务逻辑外，还需要实现对从View到Model以及从Model到View的数据进行手动同步，例如我们在View中实现一个++计数器就需要在Presenter实现具体操作的Model进行++后再Render到视图中，此外由于没有数据绑定，如果Presenter对视图渲染的需求增多，其不得不过多关注特定的视图，一旦视图需求发生改变Presenter也需要改动。

Copy
<!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>

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://zhuanlan.zhihu.com/p/140071889
https://juejin.cn/post/6844903480126078989
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
posted @   WindRunnerMax  阅读(164)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
历史上的今天：
2020-04-21 CSS引入方式
点击右上角即可分享
微信分享提示
CONTENTS
✕