JavaScript设计模式(三十七):三人行-MVC模式

简介: 三人行-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 = {
   
   };
    }());

}());
AI 代码解读

示例

image.png

~(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();
    }());

}());
AI 代码解读

特点

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

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

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

目录
打赏
0
0
0
0
25
分享
相关文章
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
101 11
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
|
5天前
|
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
65 40
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式,通过工厂类根据传入参数创建不同类型的对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
43 19
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式(Builder Pattern)是一种创建型设计模式,用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程,定制对象的组成部分,而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性;缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
37 12
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式,通过一个工厂类根据传入参数创建不同类型的产品对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。
34 15
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
77 33
Python编程中的设计模式:工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例,我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者,都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
|
1月前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
51 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等