学习MVC、MVP、MVVM模式

最新推荐文章于 2024-07-12 09:36:48 发布

小曾小肉

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量139

点赞数

分类专栏：设计模式文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_41559882/article/details/109495025

版权

设计模式专栏收录该内容

4 篇文章 0 订阅

订阅专栏

架构型设计模式

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设计模式》张容铭

小曾小肉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习MVC、MVP、MVVM模式

架构型设计模式1、MVC模式前端页面依据MVC思想开发的时候，可将页面分成3层部分，数据层部分、视图层部分、控制层部分。视图层可以调用数据层创建视图，控制器层可以调用数据层数据与视图层内的视图创建页面增添逻辑。MVC代码const MVC = {};// 数据模型层MVC.model = function(){ const M = {}; M.data = { demo1: {}, // ... }; return {
复制链接

扫一扫