1. 程式人生 > 其它 >使用JS如何實現雙向繫結(1)

使用JS如何實現雙向繫結(1)

1.在ES5中給我們定義了一個Object.defineProperty方法(詳細可以參考MDN)

Object.defineProperty()方法會直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性,並返回此物件。

注意:應當直接在 object 構造器物件上呼叫此方法,而不是在任意一個Object型別的例項上呼叫。

語法:

Object.defineProperty(obj, prop, descriptor)

obj要定義屬性的物件。prop要定義或修改的屬性的名稱或 symbol 。descriptor要定義或修改的屬性描述符。

關注重點:

descriptor的內部給我們提供了一個get和set

是不是和物件裡屬性的 getter 函式和set函式很像,同理我們可以用這個屬性來監聽data

我們需要了解 雙向繫結是誰對誰?

view--data

在更新資料的時候 同時改變dom元素,同理對dom元素的改變更新data的內部資料(可能不太準確)

2.資料劫持

在getter 函式和setter函式裡 在呼叫了這個屬性的時候會觸發get和set 這時候就可對資料進行處理

3.我們需要了解 什麼是釋出-訂閱者模式?

釋出-訂閱模式其實是一種物件間一對多的依賴關係,當一個物件的狀態傳送改變時,所有依賴於它的物件都將得到狀態改變的通知。

例項程式碼: