使用JS如何實現雙向繫結(1)
阿新 • • 發佈:2021-10-11
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.我們需要了解 什麼是釋出-訂閱者模式?
釋出-訂閱模式其實是一種物件間一對多的依賴關係,當一個物件的狀態傳送改變時,所有依賴於它的物件都將得到狀態改變的通知。
例項程式碼: