实现一个mvvm

最近在团队内做了一次vue原理分享，现场手写了一个乞丐版mvvm，这里记录一下这个mvvm实现的过程。

源码：https://github.com/keller35/mvvm

这个mvvm是基于发布订阅模式实现（也是vue本身的实现原理），最终达到的效果如下：

使用方式也跟vue一样：

    
    


    

        
        {{ text }}
        重置
    
    
    

实现很简单：

class Mvvm {
    constructor(options) {
        const { el, data, methods } = options;
        this.methods = methods;
        this.target = null;
        // 初始化dispatcher
        this.observe(this, data);
        // 初始化watcher
        this.compile(document.getElementById(el));
    }

    observe(root, data) {
        for (const key in data) {
            this.defineReactive(root, key, data[key]);
        }
    }

    defineReactive(root, key, value) {
        if (typeof value == 'object') {
            return this.observe(value, value);
        }
        const dep = new Dispatcher();
        Object.defineProperty(root, key, {
            set(newValue) {
                if (value == newValue) return;
                value = newValue;
                // 发布
                dep.notify(newValue);
            },
            get() {
                // 订阅
                dep.add(this.target);
                return value;
            }
        });
    }

    compile(dom) {
        const nodes = dom.childNodes;
        for (const node of nodes) {
            // 元素节点
            if (node.nodeType == 1) {
                const attrs = node.attributes;
                for (const attr of attrs) {
                    if (attr.name == 'v-model') {
                        const name = attr.value;
                        node.addEventListener('input', e => {
                            this[name] = e.target.value;
                        });
                        this.target = new Watcher(node, 'input');
                        this[name];
                    }
                    if (attr.name == '@click') {
                        const name = attr.value;
                        node.addEventListener('click', this.methods[name].bind(this));
                    }
                }
            }
            // text节点
            if (node.nodeType == 3) {
                const reg = /\{\{(.*)\}\}/;
                const match = node.nodeValue.match(reg);
                if (match) {
                    const name = match[1].trim();
                    this.target = new Watcher(node, 'text');
                    this[name];
                }
            }
        }
    }
}

class Dispatcher {
    constructor() {
        this.watchers = [];
    }
    add(watcher) {
        this.watchers.push(watcher);
    }
    notify(value) {
        this.watchers.forEach(watcher => watcher.update(value));
    }
}

class Watcher {
    constructor(node, type) {
        this.node = node;
        this.type = type;
    }
    update(value) {
        if (this.type == 'input') {
            this.node.value = value;
        }
        if (this.type == 'text') {
            this.node.nodeValue = value;
        }
    }
}

原理：

1. 最根本的原理很简单，无非是基于发布订阅的消息通知模式，消息发出方来自mvvm中modal层的变法，而订阅方来自view层。
2. modal层的变化，是通过对data设置setter来实现响应式，只要数据发生变化，通知所有订阅者。
3. view层的订阅，则是在compile阶段，compile会对所有数据依赖进行收集，然后在getter中注册监听。