简体中文

MVC模式

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

描述

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

View -> Controller -> Model -> View

实现

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

  • View传送指令到Controller。
  • Controller完成业务逻辑后，要求Model改变状态。
  • Model将新的数据发送到View，用户得到反馈。
<!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>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/648c5d9dacaa https://segmentfault.com/a/1190000009127861 https://www.kancloud.cn/kancloud/learn-js-design-patterns/56457