當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

使用JS如何實現(xiàn)雙向綁定(1)
2021-10-11 15:03:52

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

Object.defineProperty()?方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現(xiàn)有屬性,并返回此對象。

?注意:應(yīng)當(dāng)直接在 object 構(gòu)造器對象上調(diào)用此方法,而不是在任意一個?Object?類型的實例上調(diào)用。

?語法:

Object.defineProperty(obj, prop, descriptor)

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

關(guān)注重點:

descriptor的內(nèi)部給我們提供了一個get和set

是不是和對象里屬性的 getter 函數(shù)和set函數(shù)很像,同理我們可以用這個屬性來監(jiān)聽data

我們需要了解 雙向綁定是誰對誰??

view--data

在更新數(shù)據(jù)的時候 同時改變dom元素,同理對dom元素的改變更新data的內(nèi)部數(shù)據(jù)(可能不太準(zhǔn)確)

2.數(shù)據(jù)劫持

在getter 函數(shù)和setter函數(shù)里 在調(diào)用了這個屬性的時候會觸發(fā)get和set 這時候就可對數(shù)據(jù)進(jìn)行處理

3.我們需要了解? ?什么是發(fā)布-訂閱者模式?

? ? 發(fā)布-訂閱模式其實是一種對象間一對多的依賴關(guān)系,當(dāng)一個對象的狀態(tài)發(fā)送改變時,所有依賴于它的對象都將得到狀態(tài)改變的通知。

實例代碼:

?

本文摘自 :https://www.cnblogs.com/

開通會員,享受整站包年服務(wù)立即開通 >