用ES6的class模仿Vue写一个双向绑定

原文地址：Bougie的博客

点击在线尝试一下

最终效果如下：

构造器(constructor)

构造一个TinyVue对象，包含基本的el，data，methods

class TinyVue{
    constructor({el, data, methods}){
        this.$data = data
        this.$el = document.querySelector(el)
        this.$methods = methods
        // 初始化
        this._compile()
        this._updater()
        this._watcher()
    }
}

编译器(compile)

用于解析绑定到输入框和下拉框的v-model和元素的点击事件@click。
先创建一个函数用来载入事件：

// el为元素tagName，attr为元素属性（v-model，@click）
_initEvents(el, attr, callBack) {
    this.$el.querySelectorAll(el).forEach(i => {
        if(i.hasAttribute(attr)) {
            let key = i.getAttribute(attr)
            callBack(i, key)
        }
    })
}

载入输入框事件

this._initEvents('input, textarea', 'v-model', (i, key) => {
    i.addEventListener('input', () => {
        Object.assign(this.$data, {[key]: i.value})
    })
})

载入选择框事件

this._initEvents('select', 'v-model', (i, key) => {
    i.addEventListener('change', () => Object.assign(this.$data, {[key]: i.options[i.options.selectedIndex].value}))
})

载入点击事件

点击事件对应的是methods中的事件

this._initEvents('*', '@click', (i, key) => {
    i.addEventListener('click', () => this.$methods[key].bind(this.$data)())
})

视图更新器(updater)

同理先创建公共函数来处理不同元素中的视图，包括input、textarea的value，select的选择值，div的innerHTML

_initView(el, attr, callBack) {
    this.$el.querySelectorAll(el, attr, callBack).forEach(i => {
        if(i.hasAttribute(attr)) {
            let key = i.getAttribute(attr),