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
posted @ 2021-04-21 21:45  WindRunnerMax  阅读(179)  评论(0)    收藏  举报
©Copyright    @Blog    @WindRunnerMax