如何实现一个简单的MVVM框架

接触过web开发的同学想必都接触过MVVM，业界著名的MVVM框架就有AngelaJS。今天闲来无事，决定自己实现一个简单的MVVM框架玩一玩。所谓简单，就是仅仅实现一个骨架，仅表其意，不摹其形。

分析

MVVM最大的特点莫过于双向绑定了，数据的变化能及时更新到视图上，同时视图的变化也能及时的更新到数据中。
那么怎么实现这样的双向绑定呢？最直接的方式莫过于事件了。
所以，我们需要实现一个事件的订阅与分发机制，这个功能很常见，网上搜一搜一大堆。
有了这么一套事件的订阅与分发机制，我们就可以通过它将Model和View关联起来，这样不管是Model还是View有变化，都可以通过事件通知到对方了。

实现

首先要实现一套事件的订阅与分发机制，直接贴代码了：

function Event() {  
    this.handlers = {};  
}

Event.prototype.on = function (eventName, handler) {
    if (!this.handlers) {
        this.handlers = {};
    }
    if (this.handlers[eventName]) {
        this.handlers[eventName].push(handler);
    } else {
        this.handlers[eventName] = [handler];
    }
}

Event.prototype.fire = function (eventName, eventData) {
    if (this.handlers[eventName]) {
        this.handlers[eventName].forEach(function (handler) {
            handler(eventData);
        });
    }
}

Event.prototype.off = function (eventName, handler) {
    if (this.handlers[eventName]) {
        for (var i = 0; i < this.handlers[eventName].length; i++) {
            if (this.handlers[eventName][i] === handler) {
                this.handlers[eventName].splice(i, 1);
            }
        }
    }
}  

上诉代码实现了某个事件的监听、触发与移除操作。

有了事件，如何将其与View和Model结合起来呢？ 继承。

function Model(data) {
    this.data = data;
}

Model.prototype = new Object(Event.prototype);
Model.prototype.constructor = Model;

Model.prototype.set = function (key, value) {
    if (this.data[key]) {
        this.data[key] = value;
    }
    this.fire("change", value);
}


Model.prototype.get = function (key) {
    console.log("key: ", key, " value: ", this.data[key]);
}

function View(model, el) {
    this.el = el;
    this.model = model;

    this.init();
}

View.prototype.init = function () {
    var me = this;
    this.model.on("change", function (value) {
        me.model.get("value");
        if (me.el.type === "text") {
            me.el.value = value;
        } else {
            me.el.innerText = value;
        }       
    });
    if (this.el.type === "text") {
        this.el.addEventListener("change", function () {
            me.model.set("value", this.value);
        });
    } else {
        this.el.addEventListener("click", function () {
            var num = new Number(this.innerText || 0);
            me.model.set("value", num + 1);
        });
    }

}

View中为了简单处理，直接进行了硬编码，实际应用过程中需要详细处理。

到此，Model和View都有了，下面再加一段代码将他们关联起来：

function MVVM() {
    this.cache = {};
}

MVVM.prototype.bind = function (data, el) {
    var model = new Model(data);
    var view = new View(model, el);
    var key = "key_" + (new Date()).getTime();
    this.cache[key] = {
        model: model,
        view: view
    };
}

测试代码如下：

< !DOCTYPE html>
< html>
< head>
    < title>MVVM</title>
    < script type="text/javascript" src="./Event.js"></script>
    < script type="text/javascript" src="./Model.js"></script>
    < script type="text/javascript" src="./View.js"></script>
    < style type="text/css">
        #inputId {
            width: 300px;
            height: 30px;
            border: 1px solid grey;
            margin: 10px;
        }
        #textId {
            width: 300px;
            height: 100px;
            text-align: center;
            border: 1px solid black;
            line-height: 100px;
            font-size: 20px;
        }
    < /style>
< /head>
< body>
< div>
    < input id="inputId" type="text"></input>
    < div id="textId">0</div>
< /div>
< script type="text/javascript" src="./index.js"></script>
< script type="text/javascript">
var mvvm = new MVVM();
mvvm.bind({
    value: "text input"
}, document.getElementById("inputId"));
mvvm.bind({
    value: "div text"
}, document.getElementById("textId"));
< /script>
< /body>
< /html>

测试代码中绑定了一个输入框和一个div，当输入框中值发生改变时，Model中的值也会相应改变（查看控制台打印信息）。当点击div时，div中的文本数字会加一，对应Model中的数据也会改变。

到此所有的功能就实现完了，虽说简单了点，但是基本意思算是都到了，收工~~。

转载于:https://www.cnblogs.com/bingooo/p/5323228.html