欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于MVC的理解

程序员文章站 2022-03-06 08:07:20
...

先来一个图
关于MVC的理解

非常简易的MVC代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MVC架构理解2</title>
</head>
<body>
<div id="div1" bind="model1">123</div>
<div id="div2" bind="model2">456</div>
</body>
<script type="text/javascript">
    window.onload = function () {
        /* Model设计 */
        function Model (value) {
            this._value = typeof value === 'undefined'?'':value;
            this._listeners = [];
        }

        Model.prototype.set = function (value) {
            var self = this;
            self._value = value;
            setTimeout(function () {
                self._listeners.forEach( function(listener) {
                    // 改变listener的作用域,并执行listener函数
                    listener.call(self, value);
                });
            });
        }

        Model.prototype.watch = function (listener) {
            this._listeners.push(listener);
        }

        Model.prototype.bind = function (node) {
            this.watch(function (value) {
                node.innerHTML = value;
            });
        }

        /* Controller设计 */
        function Controller (callback) {
            var models = {};
            var views = document.querySelectorAll('[bind]');
            views = Array.prototype.slice.call(views,0);
            views.forEach( function(view) {
                var modelName = view.getAttribute('bind');
                models[modelName] = models[modelName] || new Model();
                models[modelName].bind(view);
            });
            callback.call(this,models);
        }

        /* 业务代码 */
        new Controller(function (models) {
            var model1 = models.model1;
            model1.set('this is model1');

            setTimeout(function () {
                model1.set('my name is xxx');
            },2000);
        });
    }
</script>
</html>

代码中可以清楚的看到Controller中主要控制的是Model,Model中主要控制View,至于View触发Controller的内容,本文没有实现

相关标签: mvc