.jpg)
在軟件開發(fā)中，實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)變化至關(guān)重要。本文探討在無(wú)需依賴外部庫(kù)的情況下，如何高效、可靠地監(jiān)聽值變化。
傳統(tǒng)的輪詢方法（例如while循環(huán)）雖然簡(jiǎn)單直接，但在現(xiàn)代編程環(huán)境中卻容易造成資源浪費(fèi)，甚至導(dǎo)致系統(tǒng)崩潰。因此，我們需要更精巧的方案。
JavaScript中的高效監(jiān)聽方法
JavaScript提供了強(qiáng)大的元編程能力，可以優(yōu)雅地解決這個(gè)問(wèn)題。
1. Proxy 對(duì)象: Proxy對(duì)象能夠攔截對(duì)對(duì)象的訪問(wèn)，從而在數(shù)據(jù)變更時(shí)觸發(fā)回調(diào)函數(shù)。
const obj = new Proxy({ bar: 1 }, { set(target, prop, value) { console.log('值已更新:', prop, ':', value); target[prop] = value; // 必須手動(dòng)設(shè)置值 return true; // 返回true表示設(shè)置成功 } }); obj.bar = 2; // 輸出: 值已更新: bar : 2
2. Object.defineProperty: Object.defineProperty方法允許定義對(duì)象的屬性，并設(shè)置getter和setter函數(shù)，從而在訪問(wèn)或修改屬性時(shí)執(zhí)行特定操作。
發(fā)布-訂閱模式:
另一種更通用的方法是使用發(fā)布-訂閱模式。這種模式解耦了數(shù)據(jù)源和監(jiān)聽器，提高了代碼的可維護(hù)性和可擴(kuò)展性。
// 發(fā)布者 class Emitter { events = {}; on(eventName, listener) { (this.events[eventName] || (this.events[eventName] = [])).push(listener); } emit(eventName, ...args) { (this.events[eventName] || []).forEach(listener => listener(...args)); } } // 數(shù)據(jù)類 class Data { emitter = new Emitter(); data = {}; set(key, value) { this.data[key] = value; this.emitter.emit('dataChange', key, value); } get(key) { return this.data[key]; } } // 使用示例 const data = new Data(); data.emitter.on('dataChange', (key, value) => console.log(`'${key}' changed to '${value}'`)); data.set('foo', 'bar'); // 輸出: 'foo' changed to 'bar'
總結(jié):
監(jiān)聽值變化的方法多種多樣，Proxy和Object.defineProperty適用于直接操作對(duì)象的情況，而發(fā)布-訂閱模式則更具通用性和可擴(kuò)展性，適用于更復(fù)雜的場(chǎng)景。選擇何種方法取決于具體需求和項(xiàng)目架構(gòu)。 避免使用簡(jiǎn)單的輪詢方法，因?yàn)樗实拖虑胰菀壮鲥e(cuò)。
.png)
