JS数据与DOM元素双向绑定

数据双向绑定原理在VUE中已经有很的解释和应用，此处仅为自己的一个随记。

直接上代码：

//$el jQuery对象
function bindDataToDom ($el, obj, type) {
        obj = obj || {};
  		//data和value可以自定义，但不能相同，否则报错(引起过多调用[递归])
  		//自行了解getter和setter
        Object.defineProperty(obj, 'data', {
            get: function () {
                return this.value;
            },
            set: function (val) {
                this.value = val;
              	//数据设置时也设置DOM元素的value
                $el.val(val);
            }
        });

		//绑定DOM元素事件，在事件中设置obj的data
        switch (type) {
            case 'text':
            case 'number':
                $el.on('input', function (e) {
                    obj.data = e.target.value;
                });
                break;
            case 'select':
                $el.on('change', function (e) {
                    obj.data = e.target.value;
                });
                break;
        }
    }