JavaScript设计模式（八）：架构型设计模式-MVC模式、MVP模式

野性酷女 2024-04-01 18:30 65阅读 0赞

#### JavaScript设计模式 - 架构型设计模式 ####

*  三人行-MVC模式
 *   *  MVC
     *  MVC设计模式模板
     *  示例
     *  特点
 *  三军统帅-MVP模式
 *   *  MVP
     *  示例
     *  特点

## 三人行-MVC模式 ##

### MVC ###

> 即模型（Model）- 视图（View）- 控制器（Controller），用一种将业务逻辑、数据、视图分离的方式组织架构代码。

### MVC设计模式模板 ###

~(function () {
        
    
        // 初始化MVC对象
        const MVC = {
        };
    
        // MVC数据模型层
        MVC.model = (function () {
        
            // 内部数据对象
            var M = {
        };
            // 服务器端获取的数据，通常通过Ajax获取并存储，后面的案例为简化实现，直接作为同步数据
            // 写在页面中，减少服务器端异步请求操作
            M.data = {
        };
            // 配置数据，页面加载时即提供
            M.conf = {
        };
            // 返回数据模型层对象操作方法
            return {
        
                // 获取服务器端数据
                getData: function (m) {
        
                    // 根据数据字段获取数据
                    return M.data[m];
                },
                // 获取配置数据
                getConf: function (c) {
        
                    // 根据配置数据字段获取配置数据
                    return M.conf[c]
                },
                // 设置服务器端数据（通常将服务器端异步获取到的数据，更新该数据）
                setData: function (m, v) {
        
                    // 设置数据字段m对应的数据v
                    M.data[m] = v;
                    return this;
                },
                // 设置配置数据（通常在页面中执行某些操作，为做记录而更新配置数据）
                setConf: function (c, v) {
        
                    // 设置配置数据字段c对应的配置数据v
                    M.conf[c] = v;
                    return this;
                },
                // ...
            }
        }());
    
        // MVC视图层
        MVC.view = (function () {
        
            // 模型数据层对象操作方法引用
            var M = MVC.model;
            // 内部视图创建方法对象
            var V = {
        }
            // 获取视图接口方法
            return function (v) {
        
                // 根据视图名称返回视图（由于获取的是一个方法，这里需要将该方法执行一遍以获取相应视图）
                V[v]();
            }
        }());
    
        // MVC控制器层
        MVC.ctrl = (function () {
        
            // 模型数据层对象操作方法引用
            var M = MVC.model;
            // 视图数据层对象操作方法引用
            var V = MVC.view;
            // 控制器创建方法对象
            var C = {
        };
        }());
    
    }());

### 示例 ###

![在这里插入图片描述][4294611da5ff4a309ff95386c4c41121.png_pic_center]

~(function () {
        
    
        // 初始化MVC对象
        const MVC = {
        };
    
        // MVC数据模型层
        MVC.model = (function () {
        
            // 内部数据对象
            var M = {
        };
            // 服务器端获取的数据，通常通过Ajax获取并存储，后面的案例为简化实现，直接作为同步数据
            // 写在页面中，减少服务器端异步请求操作
            M.data = {
        
                navList: [
                    {
         id: 'nav-001', label: '首页', href: '#' },
                    {
         id: 'nav-002', label: '推荐', href: '#' },
                    {
         id: 'nav-003', label: '我的', href: '#' },
                ]
            };
            // 返回数据模型层对象操作方法
            return {
        
                // 获取服务器端数据
                getData(m) {
        
                    return M.data[m];
                },
                // 整和 数据 + HTML字符串
                formateString(str, data) {
        
                    return str.replace(/\{#(\w+)#\}/g, function (_match, key) {
        
                        return data[key];
                    })
                },
                // ...
            }
        }());
    
        // MVC视图层
        MVC.view = (function () {
        
            // 模型数据层对象操作方法引用
            var M = MVC.model;
            // 内部视图创建方法对象
            var V = {
        
                // 创建导航
                createNav() {
        
                    let html = '';
                    let data = M.getData('navList');
                    // 屏蔽无效数据
                    if (!data || !data.length) {
        
                        return;
                    }
    
                    // 创建dom容器
                    let container = document.createElement('div');
                    container.className = 'container';
    
                    // 模板
                    let tpl = {
        
                        container: `<ul id="nav">{#content#}</ul>`,
                        item: `<li id="{#id#}"><a href="{#href#}">{#label#}</a></li>`,
                    };
    
                    data.forEach(d => {
        
                        html += M.formateString(tpl.item, d);
                    });
    
                    container.innerHTML = M.formateString(tpl.container, {
         content: html });
    
                    document.body.appendChild(container);
                },
            };
            // 获取视图接口方法
            return function (v) {
        
                // 根据视图名称返回视图（由于获取的是一个方法，这里需要将该方法执行一遍以获取相应视图）
                V[v]();
            }
        }());
    
        // MVC控制器层
        MVC.ctrl = (function () {
        
            // 模型数据层对象操作方法引用
            var M = MVC.model;
            // 视图数据层对象操作方法引用
            var V = MVC.view;
            // 控制器创建方法对象
            var C = {
        
                // 模块
                initNav() {
        
                    // 渲染导航栏模块视图
                    V('createNav');
                }
            };
            // 初始化导航
            C.initNav();
        }());
    
    }());

### 特点 ###

> MVC架构模式很好地`解决`了页面中`数据层`、`视图层`、`业务逻辑层（控制器）`之间的`耦合关系`，使它们得到`显性的区分`，这也使得`层次之间`的`耦合度降低`。

> 我们在开发中可以不用顾忌所有需求而专注于某一层次开发，降低了开发与维护成本，提升了开发效率。如果页面系统足够复杂，某些视图要共享同一组数据，或者某些需求的实现引用类似视图，此时MVC模式便可提高某些视图与数据的复用率。

> 因此`对于大型页面系统的开发`，`三个层次各司其职`。`每一层`次`专注于自己的事情`，有`利于工程化`、`模式化开发`并`管理代码`；便于`大型页面系统`的`可持续开发`与`维护`；也是`降低层次耦合`、`提升代码复用`的良好实践。

## 三军统帅-MVP模式 ##

### MVP ###

> 即模型（Model）- 视图（View）- 管理器（Presenter）：View层不直接引用Model层内的数据，而是通过Presenter层实现对Model层内的数据访问。即所有层次的交互都发生在Presenter层中。

### 示例 ###

![在这里插入图片描述][a92849b3210b4bd1ae2cfb586692042b.png_pic_center]

// 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));
    }

### 特点 ###

> 管理层（presenter），负责管理数据、UI视图创建、交互逻辑、动画特效等等一切事务。因此管理层也就强大起来。这样数据层只负责存储数据，视图层只负责创建视图模板，他们的业务独立而又单一，因此我们添加或修改模块，只需要对管理器层做处理就足够了。

> MVP与MVC相比最重要的特征就是MVP中将视图层与数据层完全解耦，使得对视图层的修改不会影响到数据层，数据层内的数据改动又不会影响到视图层。
> 
> 因此，我们在管理器中对数据或者视图灵活地调用就可使数据层内的数据与视图层内的视图得到更高效的复用。
> 
> 因此，MVP模式也可以实现一个管理器，可以调用多个数据，或者创建多种视图，而且是不受限制的。
> 
> 因而管理器有更高的操作权限，因此对于业务逻辑与需求的实现只需专注于管理器的开发即可，当然管理器内过多的逻辑也使得其开发与维护成本提高。

[4294611da5ff4a309ff95386c4c41121.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/364fe1624283443eafe15216b89b434c.png
[a92849b3210b4bd1ae2cfb586692042b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/71a958ee88c64b469e503b47166e7e25.png