2022-09-09【实现双向绑定】

html部分如下

  <div>
        <input type="text" id="input">
        <span id="span"></span>
    </div>

js部分

 const data = {
        text: 'default'
    };
    const input = document.getElementById('input');
    const span = document.getElementById('span');

//es5版本
function initEs5() {
        Object.defineProperty(data, 'text', {
            get(val) {
                console.log(val)
            },
            set(val) {
                span.innerHTML = val
            }
        })
        input.addEventListener('keyup', function (e) {
            data.text = e.target.value
        })
    }

//es6版本
   function initEs6() {
        let p = new Proxy(data, {
            set(target, key, value) {
                target[key] = value;
                span.innerHTML = value
            }
        })
        input.addEventListener('keyup', function (e) {
            p.text = e.target.value
        })
    }