實現Vue-MVVM-step1

孟折雲發表於2018-08-01
VueMVVM

實現Vue-MVVM-step1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue-MVVM</title>
	</head>
	<body>
		<input type="text" id="input1" value="" oninput="myFun()" />
		<input type="text" id="input2" />
	</body>
	<script>
		function myFun() {
			o._data.test = document.getElementById('input1').value
		}
		/* 這個函式用來模擬檢視更新 */
		function cb(val) {
			console.log('試圖更新啦~~');
			document.getElementById('input2').value = val
		}
		/* 遍歷所有屬性的方式對該物件的每一個屬性都通過 defineReactive  */
		function observer(value) {
			if (!value || (typeof value !== 'object')) {
				return;
			}
			Object.keys(value).forEach((key) => {
				defineReactive(value, key, value[key]);
			})
		}
		/* 實現對物件的「響應式」 */
		function defineReactive(obj, key, val) {
			Object.defineProperty(obj, key, {
				enumerable: true,		// 能否被遍歷，比如 for in，預設值為 false
				configurable: true,		// 描述該屬性的描述符能否被改變，預設值為 false
				get: function reactiveGetter() {		// 取值的時候呼叫，預設值為 false
					return val;
				},
				set: function reactiveSetter(newVal) {		// 設定值的時候使用
					if (newVal === val) return;
					cb(newVal);
				}
			});
		}
		/* 宣告類 */
		class Vue {
			constructor(options) {
				this._data = options.data;
				observer(this._data)
			}
		}
		/* 建立例項 */
		var o = new Vue({
			data: {
				test: ""
			}
		})
	</script>
</html>

複製程式碼


相關文章