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

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

/** * 對象、數組變化監聽(增刪改) * @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;

  


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

-Advertisement-
Play Games
更多相關文章
  • 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(怪異盒模型) 垂直居 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...