javascript觀察者模式實現自動刷新效果
更新時間:2017年09月05日 11:44:52 作者:在這個肆意的青春歲月
這篇文章主要為大家詳細介紹了javascript觀察者模式實現自動刷新效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js觀察者模式實現自動刷新的具體代碼,供大家參考,具體內容如下
// author wangbinandi@gmail.com const observable = obj => { const observers = Symbol(); const set = function(target, key, value) { const result = Reflect.set(target, key, value); //console.log("set key:" + key); if ( target[observers].has(key) ) { target[observers].get(key).forEach(observer => observer()); } return result; } const get = function(target, key) { const result = Reflect.get(target, key); //console.log("get key:" + key); if (arguments.callee.caller) { if (!target[observers].has(key)) { target[observers].set(key, new Set()) } target[observers].get(key).add(arguments.callee.caller); } return result; } obj[observers] = new Map(); // string => Set() return new Proxy(obj, {set, get}); }; const autorun = fn => fn(); var person = observable({ firstName: 'Matt', lastName: 'Ruby', age: 18, weight: 50 }); autorun(function () { console.log('autorun.getAge: ' + person.firstName + ' ' + person.age); }); autorun(function () { console.log('autorun.getName: ' + person.firstName + ' ' + person.lastName); }); person.age = 19; person.weight = 55; person.firstName = 'test'; person.lastName = 'MyLast'; console.log(person.lastName); person.age = 20;
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript觀察者模式原理與用法實例詳解
- 原生javascript實現類似vue的數據綁定功能示例【觀察者模式】
- PHP觀察者模式實例分析【對比JS觀察者模式】
- JavaScript設計模式之觀察者模式實例詳解
- JavaScript設計模式之觀察者模式(發(fā)布訂閱模式)原理與實現方法示例
- JS設計模式之觀察者模式實現實時改變頁面中金額數的方法
- JavaScript原生實現觀察者模式的示例
- JavaScript編程設計模式之觀察者模式(Observer Pattern)實例詳解
- JavaScript觀察者模式(publish/subscribe)原理與實現方法
- 深入理解Javascript中的觀察者模式
- Javascript設計模式之觀察者模式(推薦)
- 學習JavaScript設計模式之觀察者模式
- JavaScript觀察者模式(經典)
- 怎樣用JavaScript實現觀察者模式
相關文章
解決AjaxFileupload 上傳時會出現連接重置的問題
這篇文章主要介紹了解決AjaxFileupload 上傳時會出現連接重置的問題,需要的朋友可以參考下2017-07-07利用js實現在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時間
本文為大家介紹下利用JavaScript實現在瀏覽器狀態(tài)欄顯示停留時間即在狀態(tài)欄上顯示訪問者在本頁停留的時間2013-12-12