javascript觀察者模式實(shí)現(xiàn)自動刷新效果
本文實(shí)例為大家分享了js觀察者模式實(shí)現(xiàn)自動刷新的具體代碼,供大家參考,具體內(nèi)容如下
// 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;
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript觀察者模式原理與用法實(shí)例詳解
- 原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
- PHP觀察者模式實(shí)例分析【對比JS觀察者模式】
- JavaScript設(shè)計(jì)模式之觀察者模式實(shí)例詳解
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布訂閱模式)原理與實(shí)現(xiàn)方法示例
- JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁面中金額數(shù)的方法
- JavaScript原生實(shí)現(xiàn)觀察者模式的示例
- JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern)實(shí)例詳解
- JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法
- 深入理解Javascript中的觀察者模式
- Javascript設(shè)計(jì)模式之觀察者模式(推薦)
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式之觀察者模式
- JavaScript觀察者模式(經(jīng)典)
- 怎樣用JavaScript實(shí)現(xiàn)觀察者模式
相關(guān)文章
解決AjaxFileupload 上傳時(shí)會出現(xiàn)連接重置的問題
這篇文章主要介紹了解決AjaxFileupload 上傳時(shí)會出現(xiàn)連接重置的問題,需要的朋友可以參考下2017-07-07利用js實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時(shí)間
本文為大家介紹下利用JavaScript實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示停留時(shí)間即在狀態(tài)欄上顯示訪問者在本頁停留的時(shí)間2013-12-12js實(shí)現(xiàn)無限層級樹形數(shù)據(jù)結(jié)構(gòu)(創(chuàng)新算法)
這篇文章主要介紹了js實(shí)現(xiàn)無限層級樹形數(shù)據(jù)結(jié)構(gòu),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02javascript 玩轉(zhuǎn)Date對象(實(shí)例講解)
下面小編就為大家?guī)硪黄猨avascript 玩轉(zhuǎn)Date對象(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07JS實(shí)現(xiàn)向表格中動態(tài)添加行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向表格中動態(tài)添加行的方法,涉及javascript針對表格行的動態(tài)添加技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03僅一個(gè)form表單 js實(shí)現(xiàn)注冊信息依次填寫提交功能
這篇文章主要為大家詳細(xì)介紹了僅一個(gè)form表單,JavaScript可實(shí)現(xiàn)注冊信息依次填寫提交功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06