再看到這個題的時候榨馁,作為入門的程序員黔牵,我只能:
想到用原生dom去利用定時器或?qū)μ囟ㄓ|發(fā)事件去對值做一個動態(tài)改變嗽交。
當我搜索以后發(fā)現(xiàn)做法有以下三種:
發(fā)布者-訂閱模式【backbone.js】完全沒有聽過的節(jié)奏
臟值檢查【angular.js】在我初入AngularJS的時候聽過花颗,但猶豫換代的原因卖哎,對angular并沒有堅持下去
數(shù)據(jù)劫持【vue.js】在實習(xí)公司使用的就是此框架,但我其實僅限于了解并且會使用录淡,在慢慢的深入(我承認我深入的很慢)
-
發(fā)布者-訂閱模式
通過sub捌木,pub的方式實現(xiàn),而筆者對此沒有深入了解
-
臟值檢查
通過臟值檢測的方式對數(shù)據(jù)是否變更決定是否更新視圖(觸發(fā)事件后赁咙,遍歷所有數(shù)據(jù)來確定變化的數(shù)據(jù))
在angular中
- DOM事件
- XHR事件
- Location變更事件
- Timer事件
- $digest()和$apply()
-
數(shù)據(jù)劫持
數(shù)據(jù)劫持結(jié)合發(fā)布者訂閱者模式钮莲,通過Object.defineProperty()來劫持各個屬性的getter,setter
針對Object.defineProperty(obj,prop,descriptor)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
其中描述符分兩種:數(shù)據(jù)描述符和存取描述符
- 數(shù)據(jù)描述符的鍵如下:
configurable(bool),是否可改變以及被刪除
enumerable(bool),是否可被枚舉
value,值
writable(bool),是否可被賦值運算更改- 存取描述符的鍵如下:
configurable(bool),是否可改變以及被刪除
enumerable(bool),是否可被枚舉
get,
set,
其中這些屬性是可以被繼承的彼水,需要時斷開繼承
使用此方法時崔拥,所有bool值都默認為false,其他值默認為undefined凤覆。并且若無特定屬性時链瓦,默認為數(shù)據(jù)描述符
如何實現(xiàn)MVVM如下
- 實現(xiàn)數(shù)據(jù)監(jiān)聽Observer
- 實現(xiàn)指令解析Compile
- 實現(xiàn)Watcher【Observer和Compile的橋梁】
image.png
作者寫的很詳細,深入了解請戳
https://segmentfault.com/a/1190000006599500