关于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的内容,本文没有实现

猜你喜欢