js實現一個簡單的響應式雙向數據綁定

一，基本原理　　

　　咱們這裏使用了對象中的一個特殊屬性：訪問器屬性，這個屬性不能在對象中設置，而是必須經過defineProperty()方法單獨定義。

　　咱們首先定義一個函數：

　　　　var obj = { };

　　其次，爲obj對象定義一個test的訪問器屬性：

　　　　Object.defineProperty(obj, 'test', {

　　　　　　　　get: ()=>{console.log('get被調用了')},

　　　　　　　　set: ()=>{console.log('set被調用了')}

　　　　})

　　能夠像普通屬性同樣讀取訪問器屬性，可是當讀取或設置訪問器屬性的時候，調用其內部特性：get和set函數。get和set方法內部的this都指向obj，這意味着get和set能夠操做對象內部的值。另外訪問器屬性會被優先調用，與其同名的普通屬性則會被忽略。

　　obj.test //讀取屬性，調用get函數

　　obj.test = 'abcd' //爲屬性賦值，調用set函數

二，舉個栗子

　　咱們要的效果是：隨着輸入框文字的變化，span中會同步顯示相同的文字內容；或者在js或控制檯修改obj.test的值，視圖也會更新，這樣就實現了model到view以及view到model的雙向數據綁定。

　　首先有一個input和span。

<input type="text" id="input_1">
<span id="span_1"></span>

var obj = {};
Object.defineProperty(obj, 'test', {
　　set: (newVal)=>{
　　　　document.getElementById('input_1').value = newVal;
　　　　document.getElementById('span_1').innerHTML = newVal;
　　}
});
document.addEventListener('keyup', (e)=>{
　　obj.test = e.target.value;
})

　　效果圖：