1. 預期效果
當資料變動時，觸發自定義的回呼函式，
2. 思路
對物件 object 的 setter 進行設定，使 setter 在賦值之后執行回呼函式 callback()，
3.細節
3.1 設定 setter 和 getter
JS提供了 [Object.defineProperty()](Object.defineProperty() - JavaScript | MDN (mozilla.org)) 這個API來定義物件屬性的設定，這些設定就包括了 getter 和 setter，注意，在這些屬性中，如果一個描述符同時擁有 value 或 writable 和 get 或 set 鍵，則會產生一個例外，
Object.defineProperty(obj, "key", {
enumerable: false, // 是否可列舉
configurable: false, // 是否可配置
writable: false, // 是否可寫
value: "static"
});
我們可以利用JS的 [閉包](閉包 - JavaScript | MDN (mozilla.org))，給 getter 和 setter 創造一個共同的環境，來保存和操作資料 value 和 callback ，同時，還可以在 setter 中檢測值的變化，
// task1.js
const defineReactive = function(data, key, value, cb) {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get() {
console.log('getter')
return value
},
set(newValue) {
if (newValue !== value) {
value = https://www.cnblogs.com/robinbin/p/newValue
console.log('setter: value change')
cb(newValue)
}
}
});
}
const task = function() {
console.log('running task 1...')
const obj = {}
const callback = function(newVal) {
console.log('callback: new value is ' + newVal)
}
defineReactive(obj, 'a', 1, callback)
console.log(obj.a)
obj.a = 2
obj.a = 3
obj.a = 4
}
task()
至此我們監控了 value ，可以感知到它的變化并執行回呼函式，
3.2 遞回監聽物件的值
上面的 defineRective() 在 value 為物件的時候，當修改深層鍵值，則無法回應到，因此通過回圈遞回的方法來對每一個鍵值賦予回應式，這里可以通過 observe() 和 Observer 類來實作這種遞回：
// observe.js
import { Observer } from "./Observer.js"
// 為資料添加回應式特性
export default function(value) {
console.log('type of obj: ', typeof value)
if (typeof value !== 'object') {
// typeof 陣列 = object
return
}
if (typeof value.__ob__ !== 'undefined') {
return value.__ob__
}
return new Observer(value)
}
// Observer.js
import { defineReactive } from './defineReactive.js'
import { def } from './util.js';
export class Observer {
constructor(obj) {
// 注意設定成不可列舉，不然會在walk()中回圈呼叫
def(obj, '__ob__', this, false)
this.walk(obj)
}
walk(obj) {
for (const key in obj) {
defineReactive(obj, key)
}
}
}
在這里包裝了一個 def() 函式，用于配置物件屬性，把 __ob__ 屬性設定成不可列舉，因為 __ob__ 型別指向自身，設定成不可列舉可以放置遍歷物件時死回圈
// util.js
export const def = function(obj, key, value, enumerable) {
Object.defineProperty(obj, key, {
value,
enumerable,
writable: true,
configurable: true
})
}
3.3 檢測陣列
從需求出發，對于回應式，我們對陣列和物件的要求不同，對于物件，我們一般要求檢測其成員的修改；對于陣列，不僅要檢測元素的修改，還要檢測其增刪（比如網頁中的表格）
對由于陣列沒有 key ，所以不能通過 defineReactive() 來設定回應式，同時為了滿足回應陣列的增刪改，所以 Vue 的方法是，通過包裝 Array 的方法來實作回應式，當呼叫 push()、poll()、splice() 等方法時，會執行自己設定的回應式方法
使用 Object.create(obj) 方法可以 obj 物件為原型（prototype）創建一個物件，因此我們可以以陣列原型 Array.prototype 為原型創建一個新的陣列物件，在這個物件中回應式包裝原來的 push()、pop()、splice()等陣列
// array.js
import { def } from "./util.js"
export const arrayMethods = Object.create(Array.prototype)
const methodNameNeedChange = [
'pop',
'push',
'splice',
'shift',
'unshift',
'sort',
'reverse'
]
methodNameNeedChange.forEach(methodName => {
const original = Array.prototype[methodName]
def(arrayMethods, methodName, function() {
// 回應式處理
console.log('call ' + methodName)
const res = original.apply(this, arguments)
const args = [...arguments]
let inserted = []
const ob = this.__ob__
switch (methodName) {
case 'push':
case 'unshift':
inserted = args
case 'splice':
inserted = args.slice(2)
}
ob.observeArray(inserted)
return res
})
})
// Observer.js
import { arrayMethods } from './array.js'
import { defineReactive } from './defineReactive.js'
import observe from './observe.js'
import { def } from './util.js'
export class Observer {
constructor(obj) {
console.log('Observer', obj)
// 注意設定成不可列舉，不然會在walk()中回圈呼叫
def(obj, '__ob__', this, false)
if (Array.isArray(obj)) {
// 將陣列方法設定為回應式
Object.setPrototypeOf(obj, arrayMethods)
this.observeArray(obj)
} else {
this.walk(obj)
}
}
// 遍歷物件成員并設定為回應式
walk(obj) {
for (const key in obj) {
defineReactive(obj, key)
}
}
// 遍歷陣列成員并設定為回應式
observeArray(arr) {
for (let i = 0, l = arr.length; i < l; i++) {
observe(arr[i])
}
}
}
3.5 Watcher 和 Dep 類
設定多個觀察者檢測同一個資料
// Dep.js
var uid = 0
export default class Dep {
constructor() {
this.id = uid++
// console.log('construct Dep ' + this.id)
this.subs = []
}
addSub(sub) {
this.subs.push(sub)
}
depend() {
if (Dep.target) {
if (this.subs.some((sub) => { sub.id === Dep.target.id })) {
return
}
this.addSub(Dep.target)
}
}
notify() {
const s = this.subs.slice();
for (let i = 0, l = s.length; i < l; i++) {
s[i].update()
}
}
}
// Watcher.js
import Dep from "./Dep.js"
var uid = 0
export default class Watcher {
constructor(target, expression, callback) {
this.id = uid++
this.target = target
this.getter = parsePath(expression)
this.callback = callback
this.value = https://www.cnblogs.com/robinbin/p/this.get()
}
get() {
Dep.target = this
const obj = this.target
let value
try {
value = this.getter(obj)
} finally {
Dep.target = null
}
return value
}
update() {
this.run()
}
run() {
this.getAndInvoke(this.callback)
}
getAndInvoke(cb) {
const obj = this.target
const newValue = this.get()
if (this.value !== newValue || typeof newValue ==='object') {
const oldValue = https://www.cnblogs.com/robinbin/p/this.value
this.value = newValue
cb.call(obj, newValue, newValue, oldValue)
}
}
}
function parsePath(str) {
var segments = str.split('.');
return (obj) => {
for (let i = 0; i < segments.length; i++) {
if (!obj) return;
obj = obj[segments[i]]
}
return obj;
};
}
// task2.js
import observe from "../observe.js";
import Watcher from "../Watcher.js";
const task2 = function() {
const a = {
b: {
c: {
d: {
h: 1
}
}
},
e: {
f: 2
},
g: [ 1, 2, 3, { k: 1 }]
}
const ob_a = observe(a)
const w_a = new Watcher(a, 'b.c.d.h', (val) => {
console.log('1111111111')
})
a.b.c.d.h = 10
a.b.c.d.h = 10
console.log(a)
}
task2()
執行結果如下，可以看到成功回應了資料變化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500129.html
標籤：JavaScript