MVC模式

MVC模式

MVC即模型Model、视图View、控制器Controller，用一种将业务逻辑、数据、视图分离的方式组织架构代码，通过分离关注点的方式来支持改进应用组织方式，其促成了业务数据Model从用户界面View中分离出来，还有第三个组成部分Controller负责管理传统意义上的业务逻辑和用户输入，通常将MVC模式看作架构型设计模式。

描述#

在前端组件式架构开发，常常将视图、数据、业务逻辑等写在一个模块内，如果组件的内容比较多，容易造成层次的混乱，增加开发与维护的成本，而使用MVC模式可以将数据层、视图层、控制器层进行分层组织，用以减少耦合。

Copy
View -> Controller -> Model -> View

实现#

在这里我们主要是示例MVC的分层结构，实际上MVC主要分为三部分，如果要实现这部分信息传递就需要进行一些指令与事件的解析等。

  • View传送指令到Controller。
  • Controller完成业务逻辑后，要求Model改变状态。
  • Model将新的数据发送到View，用户得到反馈。
Copy
<!DOCTYPE html>
<html>
<head>
    <title>MVC</title>
</head>
<body>
    <div id="app"></div>
</body>
<script type="text/javascript">
    const MVC = function(){
        this.data = {};
        this.template = "";
    };
    MVC.prototype.model = function(data){
        /* 一些预处理 */
        this.data = data;
    }
    MVC.prototype.view = function(template){
        /* 一些预处理 */
        this.template = template;
    }
    MVC.prototype.controller = function(el){
        /* 一些处理 */
        /* 重点是controller部分 指令的解析、逻辑等都需要在这里实现 */
        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 mvc = new MVC();
    mvc.model({
        name: "测试",
        phone: "13333333333"
    })
    mvc.view(`
        <div>
            <span>姓名</span>
            <span>{{name}}</span>
        </div>
        <div>
            <span>手机号</span>
            <span>{{phone}}</span>
        </div>
    `);
    const control = mvc.controller("#app");
    control.render();

</script>
</html>

每日一题#

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

参考#

Copy
https://www.jianshu.com/p/648c5d9dacaa
https://segmentfault.com/a/1190000009127861
https://www.kancloud.cn/kancloud/learn-js-design-patterns/56457
posted @   WindRunnerMax  阅读(153)  评论(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编程运行原理
点击右上角即可分享
微信分享提示
CONTENTS
✕