手把手教你实现MVVM架构

.markdown-body { color: rgba(89, 89, 89, 1); font-size: 15px; font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 0), linear-gradient(1turn, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 0); background-size: 20px 20px; background-position: center }
.markdown-body p { color: rgba(89, 89, 89, 1); font-size: 15px; line-height: 2; font-weight: 400 }
.markdown-body p+p { margin-top: 16px }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { padding: 30px 0; margin: 0; color: rgba(19, 92, 224, 1) }
.markdown-body h1 { position: relative; text-align: center; font-size: 22px; margin: 50px 0 }
.markdown-body h1:before { position: absolute; content: ""; top: -10px; left: 50%; width: 32px; height: 32px; transform: translateX(-50%); background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC"); opacity: 0.36 }
.markdown-body h2 { position: relative; font-size: 20px; border-left: 4px solid; padding: 0 0 0 10px; margin: 30px 0 }
.markdown-body h3 { font-size: 16px }
.markdown-body ul { list-style: disc outside; margin-left: 2em; margin-top: 1em }
.markdown-body li { line-height: 2; color: rgba(89, 89, 89, 1) }
.markdown-body img.loaded { margin: 0 auto; display: block }
.markdown-body blockquote { background: rgba(255, 249, 249, 1); margin: 2em 0; padding: 2px 20px; border-left: 4px solid rgba(178, 174, 197, 1) }
.markdown-body blockquote p { color: rgba(102, 102, 102, 1); line-height: 2 }
.markdown-body a { color: rgba(3, 106, 202, 1); border-bottom: 1px solid rgba(3, 106, 202, 0.8); font-weight: 400; text-decoration: none }
.markdown-body em strong, .markdown-body strong { color: rgba(3, 106, 202, 1) }
.markdown-body hr { border-top: 1px solid rgba(19, 92, 224, 1) }
.markdown-body pre { overflow: auto }
.markdown-body code, .markdown-body pre { overflow: auto; position: relative; line-height: 1.75; font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body table { border-collapse: collapse; margin: 1rem 0; overflow-x: auto }
.markdown-body table td, .markdown-body table th { border: 1px solid rgba(223, 226, 229, 1); padding: 0.6em 1em }
.markdown-body table tr { border-top: 1px solid rgba(223, 226, 229, 1) }
.markdown-body table tr:nth-child(2n) { background-color: rgba(246, 248, 250, 1) }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

引言

现在的前端真可谓是百花齐放，百家争鸣，各种框架层出不穷，但是主要目前用的最多的还是要数Vue、React、以及Angular,这三种，当然不乏近期新出的一些其他框架，但是她们都有一个显著的特点，那就是使用了MVVM的架构。

首先我们要搞清楚什么是MVVM？

MVVM就是Model-View-ViewModel的缩写，MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了。

这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

接下来我会带着你们如何去实现一个简易的MVVM架构。

一、构建MVVM构造函数

创建一个MVVM构造函数，用于接收参数，如：data、methods、computed等:

function MVVM(options) {
    this.$options = options;
    let data = this._data = this.$options.data;
    observe(data);
    for (let key in data) {
        Object.defineProperty(this, key, {
            enumerable: true,
            get() {
                return this._data[key];
            },
            set(newVal) {
                this._data[key] = newVal;
            }
        });
    };
    initComputed.call(this);
    new Compile(options.el, this);
    options.mounted.call(this);
}

二、构建Observe构造函数

创建一个Observe构造函数，用于监听数据变化:

function Observe(data) {
    let dep = new Dep();
    for (let key in data) {
        let val = data[key];
        observe(val);
        Object.defineProperty(data, key, {
            enumerable: true,
            get() {
                Dep.target && dep.addSub(Dep.target);
                return val;
            },
            set(newVal) {
                if (val === newVal) {
                    return;
                }
                val = newVal;
                observe(newVal);
                dep.notify();
            }
        });
    };
};

三、构建Compile构造函数

创建一个Compile构造函数，用于解析模板指令:

function Compile(el, vm) {
    vm.$el = document.querySelector(el);
    let fragment = document.createDocumentFragment();
    while (child = vm.$el.firstChild) {
        fragment.appendChild(child);
    }
    replace(fragment);
    function replace(frag) {
        Array.from(frag.childNodes).forEach(node => {
            let txt = node.textContent;
            let reg = /\{\{(.*?)\}\}/g;
            if (node.nodeType === 3 && reg.test(txt)) {
                let arr = RegExp.$1.split('.');
                let val = vm;
                arr.forEach(key => { val = val[key]; });
                node.textContent = txt.replace(reg, val).trim();
                new Watcher(vm, RegExp.$1, newVal => {
                    node.textContent = txt.replace(reg, newVal).trim();
                });
            }
        if (node.nodeType === 1) {
            let nodeAttr = node.attributes;
            Array.from(nodeAttr).forEach(attr => {
                let name = attr.name;
                let exp = attr.value;
                if (name.includes('v-')) {
                    node.value = vm[exp];
                }
                new Watcher(vm, exp, newVal => {
                    node.value = newVal;
                });
                node.addEventListener('input', e => {
                    let newVal = e.target.value;
                    vm[exp] = newVal;
                });
             });
         };
         if (node.childNodes && node.childNodes.length) {
             replace(node);
         }
       });
     }
     vm.$el.appendChild(fragment);
}

四、构建Watcher构造函数

创建一个Watcher构造函数，用于更新视图:

function Watcher(vm, exp, fn) {
    this.fn = fn;
    this.vm = vm;
    this.exp = exp;
    Dep.target = this;
    let arr = exp.split('.');
    let val = vm;
    arr.forEach(key => {
        val = val[key];
    });
    Dep.target = null;
} 

Watcher.prototype.update = function() {
        let arr = this.exp.split('.');
        let val = this.vm;
        arr.forEach(key => {
            val = val[key];
        });
        this.fn(val);
}

五、构建Dep构造函数

创建一个Dep构造函数，用于管理Watcher:

function Dep() {
    this.subs = [];
} 

Dep.prototype.addSub = function(sub) {
    this.subs.push(sub);
} 

Dep.prototype.notify = function() {
    this.subs.forEach(sub => {
        sub.update();
    });
}

六、构建initComputed构造函数

创建一个initComputed构造函数，用于初始化计算属性:

function initComputed() {
    let vm = this;
    let computed = this.$options.computed;
    Object.keys(computed).forEach(key => {
        Object.defineProperty(vm, key, {
            get: typeof computed[key] === 'function' ? computed[key] : computed[key].get,
            set() {}
        });
    });
}

总结：

至此我们就完成了一个简易的MVVM框架，虽然简易，但是基本的核心思想差不多都已经表达出来了，最后还是希望大家不要丢在收藏文件夹里吃灰，还是要多多动手练习一下，所谓眼过千遍，不如手过一遍。