手写一个简单的双向数据绑定

 姓名：

     

 

1.es5  Object.defineProperty

        let obj={

            name:''

        }

        let newObj = JSON.parse(JSON.stringify(obj))

        Object.defineProperty(obj,'name',{

            get(){

                return newObj.name

            },

            set(val){

               if(val === newObj.name) return 

               newObj.name = val

               observer()

            }

        })

        function observer() {

            spanName.innerHTML = obj.name

            inputName.value = obj.name

        }

         setTimeout(() => {

                obj.name = '999'

            }, 1000);

        inputName.oninput=function(){

           obj.name = this.value 

        }

2.es6 Proxy

 let obj = {}

        obj = new Proxy(obj, {

            get(target, prop) {

                return target[prop]

            },

            set(target, prop, value) {

                target[prop] = value

                observer()

            }

        })

        function observer() {

            spanName.innerHTML = obj.name

            inputName.value = obj.name

        }

        setTimeout(() => {

            obj.name = '999'

        }, 1000);

        inputName.oninput = function () {

            obj.name = this.value

        }