实现一个mvvm

Keller

发布于 2021-12-14 09:30:48

2370

发布于 2021-12-14 09:30:48

文章被收录于专栏：Keller

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

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

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

使用方式也跟vue一样：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mvvm</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text">
        {{ text }}
        <button @click="reset" style="display:block;">重置</button>
    </div>
    <script src="./index.js"></script>
    <script>
        var vm = new Mvvm({
            el: 'app',
            data: {
                text: 'hello world'
            },
            methods: {
                reset() {
                    this.text = '';
                },
            },
        });
    </script>
</body>
</html>

实现很简单：

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;
        }
    }
}

原理：