- ES55 的 getter和setter
- ES6 proxy
- 數(shù)據(jù)臟檢查
對象的屬性類型
- [[Value]]: 屬性的值， 默認(rèn)為undefined
使用 on-change庫監(jiān)聽js變化
on-change庫監(jiān)聽js變化
js監(jiān)聽對象或?qū)傩宰兓?/h1>
- ES55 的 getter和setter
- ES6 proxy
- 數(shù)據(jù)臟檢查
對象的屬性類型
-
-
-
- [[Value]]: 屬性的值， 默認(rèn)為undefined
on-change庫監(jiān)聽js變化
on-change提供了一個簡單的監(jiān)聽對象（Object）或數(shù)組（Array）的屬性變化，on-change可以監(jiān)聽任務(wù)深度的屬性變化，如obj.a.b[0].c = true
安裝
$ npm isntall -S on-change
# 或者
$ yarn add on-change
基本用法
// 創(chuàng)建一個需要監(jiān)聽的對象
const object = {
foo: false,
a: {
b: [
{
c: false
}
]
}
};
// 此處返回一個監(jiān)聽對象
const watchedObject = onChange(object, function (path, value, previousValue) {
console.log('this:', this); // Proxy {foo: true, a: {…}}
console.log('path:', path); // path: a.b.0.c
console.log('value:', value); // value: true
console.log('previousValue:', previousValue); // previousValue: false
});
// 我們現(xiàn)在改變?nèi)我獾膶傩缘闹? 將會觸發(fā)回調(diào)，輸出如上注釋
watchedObject.a.b[0].c = true;
參數(shù)及方法
onChange方法的參數(shù)
onChange(object, onChange, options?)
被監(jiān)聽的返回對象與原對象一樣，只是添加了代理
參數(shù)1： object
必傳，需要被監(jiān)聽對象，可以是object也可以是array
參數(shù)2： 回調(diào)函數(shù)onChange
該函數(shù)會在被監(jiān)聽對象屬性發(fā)生改變時調(diào)用，回調(diào)函數(shù)接受三個參數(shù)
-
path：已更改值的路徑，如上a.b.0.c -
value：在此路徑上，新的值 -
previousValue：此路徑上，上一次的值
例如：
const watchedObject = onChange(object, function (path, value, previousValue) {
console.log('this:', this); // 這里的 this 指向代理對象
console.log('path:', path); // 已經(jīng)個更改值的路徑
console.log('value:', value); // 此路徑上的新值
console.log('previousValue:', previousValue); // 此路徑上，上一次的值
});
參數(shù)3： options？
- isShallow：
boolean類型，默認(rèn)值為false，如果設(shè)置為true，深度屬性改變不會觸發(fā)回調(diào)，只有改變原始對象直接屬性才會觸發(fā)回調(diào)； - equals：接受一個函數(shù)，默認(rèn)為Object.is，接受兩個參數(shù)就行比較，如果相等返回true，如果需要更寬松的比較方式，可以設(shè)置這個參數(shù)
- ignoreSymbols：設(shè)置Symbo類型的屬性是否不處罰回調(diào)，默認(rèn)為false; 設(shè)置為true，則不觸發(fā)回調(diào)
- ignoreKeys：Array<string | symbol> 數(shù)組類型，此數(shù)組內(nèi)的屬性值修改不會觸發(fā)回調(diào)
- ignoreUnderscores：忽略下滑線的屬性，默認(rèn)為false
- pathAsArray：boolean，默認(rèn)為fasle，輸出為
a.b.0.c這種形式，設(shè)置為true，則路徑用數(shù)組表示
onChange.target(object)
返回未監(jiān)聽原始對象
onChange.unsubscribe(object)
取消被監(jiān)聽對象的所有回調(diào)，并返回原始對象
例子
有些代碼可能如下，每次改變屬性需要保存修改的對象
const foo = {
a: 0,
b: 0
};
// …
foo.a = 3;
save(foo); // 保存對象，或者其他操作
// …
foo.b = 7;
save(foo); // 保存對象，或者其他操作
// …
foo.a = 10;
save(foo); // 保存對象，或者其他操作
現(xiàn)在使用on-change就可以簡化如下代碼
const foo = onChange({
a: 0,
b: 0
}, () => save(foo));
// …
foo.a = 3;
// …
foo.b = 7;
// …
foo.a = 10;
