雙向數據綁定原理(三種實現方式)

時間 2020-02-13

標籤雙向數據綁定原理三種實現方式简体版

原文原文鏈接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>雙向數據綁定原理(三種實現方式)</title>
	</head>
	<body>
		<input type="text" id="a" />
		<span id="b"></span>
		<!--
			
			//髒檢查
			咱們說Angularjs（這裏特指AngularJS 1.x.x版本，不表明AngularJS 2.x.x版本）雙向數據綁定的技術實現是髒檢查，大體的原理就是，
			Angularjs內部會維護一個序列，將全部須要監控的屬性放在這個序列中，當發生某些特定事件時（注意，
			這裏並非定時的而是由某些特殊事件觸發的），Angularjs會調用 $digest 方法，這個方法內部作的邏輯就是遍歷全部的watcher，
			對被監控的屬性作對比，對比其在方法調用先後屬性值有沒有發生變化，若是發生變化，則調用對應的handler。
			網上有許多剖析Angularjs雙向數據綁定實現原理的文章，好比 這篇 ，再好比 這篇 ，等等。
			這種方式的缺點很明顯，遍歷輪訓watcher是很是消耗性能的，特別是當單頁的監控數量達到一個數量級的時候。
			
			//觀察機制
			博主以前有一篇轉載翻譯的文章， Object.observe()帶來的數據綁定變革 ，說的就是使用ECMAScript7中的 Object.observe 方法對對象
			（或者其屬性）進行監控觀察，一旦其發生變化時，將會執行相應的handler。
			這是目前監控屬性數據變動最完美的一種方法，語言（瀏覽器）原生支持，沒有什麼比這個更好了。惟一的遺憾就是目前支持廣度還不行，有待全面推廣。
			
			//封裝屬性訪問器
			國產mvvm框架vue.js實現數據雙向綁定的原理就是屬性訪問器。
			它使用了ECMAScript5.1（ECMA-262）中定義的標準屬性 Object.defineProperty 方法。針對國內行情，
			部分還不支持 Object.defineProperty 低級瀏覽器採用VBScript做了完美兼容，不像其餘的mvvm框架已經逐漸放棄對低端瀏覽器的支持。
			
		-->
		<script>
		
			//封裝屬性訪問器
			//Object.defineProperty(obj, prop, descriptor)
			//obj ，待修改的對象
			//prop ，帶修改的屬性名稱
			//descriptor ，待修改屬性的相關描述
			var obj = {};
			Object.defineProperty(obj,'a',{
				set:function(newVal){
					document.getElementById('a').value = newVal;
					document.getElementById('b').innerHTML = newVal;
				}
			});
			
			document.addEventListener('keyup',function(e){
				obj.a = e.target.value;
			});
			
			
		</script>
		
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。