1

Author: akaching

defineProperty.js

@@ -0,0 +1,22 @@
+let user = {
+  nickname: 'youngoldman',
+  age: 18,
+  hobby: ['football', 'basketball'],
+  say() {
+    console.log('hello')
+  }
+}
+
+let tempName = user.nickname
+Object.defineProperty(user, 'nickname', {
+  get() {
+    // console.log('get', objname)
+    // debugger
+    return tempName
+  },
+  set(v) {
+    tempName = v
+    console.log('set', tempName)
+    return tempName
+  },
+})

index.html

@@ -21,10 +21,27 @@ <h1>debounce</h1>
 </body>
 <script src="./debounce.js"></script>
 <script src="./throttle.js"></script>
-<script src="./promise.js"></script>
+<!-- <script src="./promise.js"></script>
 <script src="./publish-subscribe.js"></script>
-<script src="./observer.js"></script>
+<script src="./observer.js"></script> -->
+<script src="./vm.js"></script>
 <script>
+  let vm = new Vue({
+    data: {
+      message: 'hello',
+      flag: true,
+      list: [1,2,3],
+      obj: {
+        a: 1,
+        b: 2,
+        man: {
+          c: 3,
+          d: 4
+        }
+      }
+    }
+  })
+
   const debounceInput = document.querySelector('#debounce')
   debounceInput.addEventListener('input', debounce((...args) => {
     console.log('debounce');

observer.js

@@ -35,7 +35,7 @@ try {
 	a = 2
 	console.log(a)
 } catch (error) {
-	console.log(error.name)
-	console.log(error.message)
+	// console.log(error.name)
+	// console.log(error.message)
 }
-throw new Error('错误信息')
+// throw new Error('错误信息')

throttle.js

@@ -1,23 +1,25 @@
-// const throttle = (fn, delay = 1000) => {
-// 	let record = Date.now()
-// 	return function (...args) {
-// 		let now = Date.now()
-// 		if (now - record > delay) {
-// 			fn(...args)
-// 			record = Date.now()
-// 		}
-// 	}
-// }
-
+// 判断时间法
 const throttle = (fn, delay = 1000) => {
-	let executed = false
+	let record = Date.now()
 	return function (...args) {
-		if (!executed) {
-			setTimeout(() => {
-				fn(...args)
-        executed = false
-			}, delay)
-      executed = true
+		let now = Date.now()
+		if (now - record > delay) {
+			fn(...args)
+			record = Date.now()
 		}
 	}
 }
+
+// 定时器法
+// const throttle = (fn, delay = 1000) => {
+// 	let executed = false
+// 	return function (...args) {
+// 		if (!executed) {
+// 			setTimeout(() => {
+// 				fn(...args)
+//         executed = false
+// 			}, delay)
+//       executed = true
+// 		}
+// 	}
+// }

vm.js

@@ -0,0 +1,68 @@
+class Vue {
+	constructor(options) {
+		this.$options = options
+		this.$data = options.data
+		this.$el = document.querySelector(options.el)
+		this.initData()
+	}
+
+  // 初始化数据
+	initData() {
+		let data = this.$data
+		Object.keys(data).forEach(key => {
+      defineReactive(this, key, data[key])
+			// Object.defineProperty(this, key, {
+			// 	enumerable: true,
+			// 	configurable: true,
+			// 	get() {
+			// 		return data[key]
+			// 	},
+			// 	set(value) {
+			// 		data[key] = value
+			// 	},
+			// })
+		})
+    // observe(data)
+	}
+}
+
+ // 劫持数据对象
+const defineReactive = (obj, key, value) => {
+  observe(value)
+  Object.defineProperty(obj, key, {
+    enumerable: true,
+    configurable: true,
+    get() {
+      console.log(`${key}属性被访问了`)
+      return value
+    },
+    set(val) {
+      if (val === value) return
+      console.log(`值发生了改变:${val}=>${value}`)
+      value = val
+      return value
+    },
+  })
+}
+
+// // 判断数据是不是基本类型, 如果是基本类型则不进行递归, 否则进行递归
+const observe = data => {
+  let type = Object.prototype.toString.call(data)
+  if (type !== '[object Object]' && type !== '[object Array]') {
+    return
+  }
+  new Observer(data)
+}
+
+// 监听数据
+class Observer {
+  constructor(data) {
+    this.walk(data)
+  }
+  walk(data) {
+    Object.keys(data).forEach(key => {
+      let value = data[key]
+      defineReactive(data, key, value)
+    })
+  }
+}