javascript Proxy 代理模式深度監聽對象、數組變化

来源:https://www.cnblogs.com/aiv367/archive/2020/06/28/12753340.html

/** * 對象、數組變化監聽(增刪改) * @author w-bing * @date 2020-04-22 * @param {Object} obj * @param {Function} cb * @return {Proxy} */ function deepProxy(obj, cb) ...


/**
 * 對象、數組變化監聽(增刪改)
 * @author w-bing
 * @date 2020-04-22
 * @param {Object} obj
 * @param {Function} cb
 * @return {Proxy}
 */
function deepProxy(obj, cb) {

	if (typeof obj === 'object') {

		for (let key in obj) {
			if (typeof obj[key] === 'object') {
				obj[key] = deepProxy(obj[key], cb);
			}
		}

	}

	return new Proxy(obj, {

		/**
		 * @param {Object, Array} target 設置值的對象
		 * @param {String} key 屬性
		 * @param {any} value 值
		 * @param {Object} receiver this
		 */
		set: function (target, key, value, receiver) {

			if (typeof value === 'object') {
				value = deepProxy(value, cb);
			}

			let cbType = target[key] == undefined ? 'create' : 'modify';

			//排除數組修改length回調
			if (!(Array.isArray(target) && key === 'length')) {
				cb(cbType, { target, key, value });
			}
			return Reflect.set(target, key, value, receiver);

		},
		deleteProperty(target, key) {
			cb('delete', { target, key });
			return Reflect.deleteProperty(target, key);
		}

	});

}


// 數組測試
let a = deepProxy([], (type, data) => {
	console.log(type, data);
});

a.push(1)
a.push({ a: 1 })

// 對象測試
let b = deepProxy({}, (type, data) => {
	console.log(type, data);
});

b.name = '大花貓花大';
b.info = {
	age: 10,
	data: {
		data: {
			data: {
				text: 1
			}
		}
	}
}

delete b.info.age;

  


您的分享是我們最大的動力!

更多相關文章
  • vue項目啟動出現cannot GET /服務錯誤 查看控制台 是一些sass相關庫沒安裝成功 進行下麵操作進行安裝,再次啟動,完美解決! 一、首先說明sass和scss的區別。 1、異同:1)簡言之可以理解scss是sass的一個升級版本,完全相容sass之前的功能,又有了些新增能力。語法形式上有 ...
  • var newArr = []新建一個數據,用於存儲扁平化化後的數組 flatData(arr) { arr.forEach(item => { this.res.push(item) item.children && item.children.length > 0 ? this.flatData ...
  • getCookie(cookie_name) { var allcookies = document.cookie; //索引長度,開始索引的位置 var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引,就代表cookie存在,否則不 ...
  • 一:定義 1.TypeScript無法直接在瀏覽器上運行(node也無法去運行),會被編譯成JavaScript語法再去運行 2.是JavaScript的超集,是靜態類型,一旦定義成某類型,將無法改變 //靜態類型 let c: number=123; c='123';//報錯 c=123; 二:優 ...
  • 1、年齡的問題。年齡確實是一個必須考慮的重要問題,30歲大多已成家,可能已經有了小孩,分給家庭的時間會越來越多,能夠投入的時間和精力必然比不上20出頭的小伙子。但我認為精力反而不是最大的問題,最大的問題是越來越輸不起。到了30歲的人應該都有體會,你做的每一個決策都有很高的機會成本,是牽一發而動全身的 ...
  • 因為所出標簽太多,所以我們很難都用得上或者意識到需要用。 但其實也有許多有趣但是我們未曾發掘的標簽,本文所要介紹的 便是一個。 <dataList>是什麼? 標簽一個類似於 標簽一樣可以通過包裹 來表示控制項可選值的,唯一不同的就是 需要配合 來使用,而且 不表示任何內容,僅作展示。 我們康個慄子: ...
  • 本案例製作一個咖啡銷售網站,通過網站呈現自己的理念和咖啡文化,頁面佈局設計獨特,採用兩欄的佈局形式;頁面風格設計簡潔,為瀏覽者提供一個簡單、時尚的頁面,瀏覽時讓人心情舒暢。 1、網站概述網站的設計思路和設計風格與Bootstrap框架風格完美融合,下麵就來具體地介紹實現的步驟。 2、網站結構 本案例 ...
  • 盒模型 盒模型主要兩種,標準盒模型和怪異和模型 標準盒模型:width指content部分的寬度 怪異盒模型:width指content、padding、border的總寬度 解決方法:box-sizing屬性,值為content-box(標準盒模型),值為border-box(怪異盒模型) 垂直居 ...
一周排行
  • 本次課程就正式進入開發部分。 首先我們先搭建項目框架,還是和之前漸進式風格保持一致,除必備組件外,儘量使用原生功能以方便大家理解。 開發工具:vs 2019 或以上 資料庫:SQL SERVER 2017 或以上 其他需要用到的我們在項目過程中再提。 一、新建 MVC項目 1、打開VS 2019,C ...
  • 一.背景說明: 之前分享過一個微服務開發框架, “享一個集成.NET Core+Swagger+Consul+Polly+Ocelot+IdentityServer4+Exceptionless+Apollo+SkyWalking的微服務開發框架”,前兩天在Github上收到一個Issues,是想我 ...
  • 前言 Http我們都已經耳熟能詳了,而關於Http學習的文章網上有很多,各個知識點的講解也可說是深入淺出。然而,學習過後,我們對Http還是一知半解。問題出在了哪? Http是一個客戶機與伺服器之間的通信的協議,真的想學習Http,就必須把客戶機和伺服器也學了,也就是說,必須立體的學習,不然我們永遠 ...
  • 本人製作的這個 “簡易日誌 (SimpleLogger)” 包裡面包含的代碼邏輯,最開始也就是簡單地寫入文本,後來經過實際使用的演化,做了各種優化,添加了一些實用的特性,感覺用著還不錯。正所謂獨樂樂不如眾樂樂,於是將其打包上傳到微軟的包管理庫 NuGet 中,大家可以使用試試,相互交流。 ...
  • 1.需求示意圖 2.需求描述 原本是為了給做unity3d客戶端開發的同事提供不定時的消息推送,比如商城購買道具後服務端將道具信息推送給客戶端。 本篇文章簡化理解,用“相關部門開展活動,向全市人民徵集社會服務改善意見”為例子。但核心想法一致:單向推送(指這個需求上只需要單向)。所以這個功能並不是聊天 ...
  • 找到項目中ServiceStack.Text.dll文件的版本,比如我的版本是5.0.0,到GitHub上下載對應的源碼(https://github.com/ServiceStack/ServiceStack.Text/tags) 打開解決方案,重新生成ServiceStack.Text項目,如果 ...
  • 前言 上一篇文章主要介紹了IL的概念以及基礎的示例代碼,在這一篇文章中我們將通過對象調用看IL。 創建對象與調用方法 class Program { static void Main(string[] args) { var obj = new MyClass(); Console.WriteLin ...
  • abp版本5.9 概述 數據遷移無非就是兩件事情,1、創建資料庫,並根據實體創建對應的表;2、添加一些初始數據 abp的數據遷移也是完成這兩件事,比較特殊的是它是多租戶saas系統,而且支持不同的租戶有獨立的資料庫。所以abp中的遷移要先遷移戶主Host,再遷移租戶Tenant的資料庫 它的遷移定義 ...
  • 本文屬於OData系列 目錄 武裝你的WEBAPI-OData入門 武裝你的WEBAPI-OData便捷查詢 武裝你的WEBAPI-OData分頁查詢 武裝你的WEBAPI-OData資源更新Delta 武裝你的WEBAPI-OData之EDM 武裝你的WEBAPI-OData常見問題 武裝你的WE ...
  • 前言 面試總是會被問到有沒有用過分散式鎖、redis 鎖,大部分讀者平時很少接觸到,所以只能很無奈的回答 “沒有”。本文通過 Spring Boot 整合 redisson 來實現分散式鎖,並結合 demo 測試結果。 首先看下大佬總結的圖 正文 添加依賴 <!--redis--> <depende ...