Proxy中代理數(shù)據(jù)攔截的方法詳解
更新時(shí)間：2022年12月02日 14:29:05 作者：叫我詹躲躲
這篇文章主要為大家詳細(xì)介紹了Proxy中代理數(shù)據(jù)攔截的方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作具有一定的借鑒價(jià)值，需要的可以參考一下
proxy
Proxy 對(duì)象用于創(chuàng)建一個(gè)對(duì)象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。
new Proxy(target,handler) // target 是proxy 要包裝的對(duì)象 （可以是數(shù)組、函數(shù)，也可以是另一個(gè)Proxy） //handler 一個(gè)通常以函數(shù)作為屬性的對(duì)象，用來(lái)定制攔截行為
基本的語(yǔ)法是：
const p = new Proxy(target,handler)
主要的方法有: handler.has() 是針對(duì) in 操作符的代理方法
handler.set() 方法是設(shè)置屬性值操作的捕獲器。
handler.get() 方法用于攔截對(duì)象的讀取屬性操作。
handler.defineProperty() 用于攔截對(duì)對(duì)象的 Object.defineProperty() 操作。
handler.deleteProperty() 方法用于攔截對(duì)對(duì)象屬性的 delete 操作。
handler.has()方法
const obj = {
name: '微芒不朽',
occupation: '前端開發(fā)'
}
const handler = {
has(target, key) {
//判斷是否存在該屬性
return key in target
}
}
const p = new Proxy(obj, handler)
console.log(p.name) //微芒不朽
console.log(p.like) //undefined
console.log(p.occupation) //前端開發(fā)handler.get()方法
const obj = {
name: '微芒不朽',
occupation: '前端開發(fā)'
}
const handler = {
has(target, key) {
//判斷是否存在該屬性
return key in target
},
get(target, key) {
if (key in target) {
return target[key]
} else {
return new ReferenceError(key + '屬性不存在')
}
}
}
const p = new Proxy(obj, handler)
console.log(p.name) //微芒不朽
console.log(p.like) //ReferenceError: like屬性不存在
console.log(p.occupation) //前端開發(fā)handler.set()方法
const obj = {
name: '微芒不朽',
occupation: '前端開發(fā)'
}
const handler = {
set(target, key) {
if (key in target) {
return Reflect.set(...arguments)
}
throw new ReferenceError(key+'屬性不存在')
}
}
const p = new Proxy(obj, handler)
p.like = '編程' //Uncaught ReferenceError: like屬性不存在
// console.log(p.like)
p.occupation = '測(cè)試'
console.log(p.occupation) //測(cè)試
handler.defineProperty() 方法
用于攔截對(duì)對(duì)象的 Object.defineProperty() 操作
const obj = {
name: '微芒不朽',
configurable: true,
enumerable: true,
}
const handler = {
defineProperty(target, key, descriptor) {
console.log('屬性', key)
return true;
}
}
const p = new Proxy({}, handler)
Object.defineProperty(p, 'like', obj) //屬性 like
也可以使用 Reflect.defineProperty
const obj = {
name: '微芒不朽',
configurable: true,
enumerable: true,
}
const handler1 = {
defineProperty(target, key, descriptor) {
console.log('屬性1', descriptor)
return Reflect.defineProperty(target, key, descriptor)
}
}
const p1 = new Proxy({}, handler)
Object.defineProperty(p1, 'like', obj) //屬性 like
handler.deleteProperty() 方法
主要攔截對(duì)象的 delete操作；
const obj = {
name: '微芒不朽',
}
const handler = {
deleteProperty(target, key) {
console.log('刪除' + key)
}
}
const p = new Proxy({}, handler)
delete p.name //刪除name
//也會(huì)攔截 Reflect.deleteProperty
Reflect.deleteProperty(obj,'name')
Proxy.revocable 撤銷代理
proxy有一個(gè)唯一的靜態(tài)方法，Proxy.revocable(target, handler) Proxy.revocable()方法可以用來(lái)創(chuàng)建一個(gè)可撤銷的代理對(duì)象。 該方法的返回值是一個(gè)對(duì)象，其結(jié)構(gòu)為： {"proxy": proxy, "revoke": revoke}
- proxy 表示新生成的代理對(duì)象本身，和用一般方式 new Proxy(target, handler) 創(chuàng)建的代理對(duì)象沒什么不同，只是它可以被撤銷掉。
- revoke 撤銷方法，調(diào)用的時(shí)候不需要加任何參數(shù)，就可以撤銷掉和它一起生成的那個(gè)代理對(duì)象。
const obj = {
name: '微芒不朽',
}
const handler = {}
const { proxy, revoke } = Proxy.revocable(obj, handler)
console.log(proxy.name) //微芒不朽
revoke() // 取值完成對(duì)proxy進(jìn)行封閉，撤消代理
console.log(proxy.name) // Uncaught TypeError: illegal operation attempted on a revoked proxy
應(yīng)用場(chǎng)景
Proxy實(shí)現(xiàn)一個(gè)格式檢驗(yàn)器
場(chǎng)景：驗(yàn)證身份證、電話、姓名和郵箱
const obj = {
certno: '420101198101012964',
name: '微芒不朽1',
tel: '123456789',
mail: '13@qq.com',
}
const validators = {
//校驗(yàn)證件號(hào)碼
certno(val) {
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)
},
//校驗(yàn)姓名，只能為漢字
name(val) {
return /^[\u0391-\uFFE5]+$/.test(val)
},
//檢驗(yàn)電話或手機(jī)號(hào)
tel(val) {
return /^1\d{10}$|^0\d{2,3}-?\d{7,8}$/.test(val)
},
//檢驗(yàn)郵箱
mail() {
return /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)
}
}
const validatorType = (target, validator) => {
return new Proxy(target, {
_validator: validator,
set(target, key, value, proxy) {
let validator = this._validator[key](value)
if (validator) {
return Reflect.set(target, key, value, proxy)
} else {
throw Error(`設(shè)置${key} 的值為 ${value}，格式不正確`)
}
}
})
}
const proxy = validatorType(obj, validators)
proxy.certno = '420101198101012964'
proxy.name = '微芒不朽1' //Uncaught Error: 設(shè)置name 的值為 微芒不朽1，格式不正確
proxy.tel = '123456789' //Uncaught Error: 設(shè)置tel 的值為 123456789，格式不正確
proxy.mail = '13@qq.com'
proxy 攔截私有屬性
用proxy攔截日常定義的私有屬性，使其不能更改；一般以下劃線開頭；
let obj = {
_id:'1234567890',
name:'微芒不朽'
}
const p = new Proxy(obj,{
set(target,prop){
if(prop[0]==='_'){
throw Error( `${prop}為私有屬性`)
}
return Reflect.set(target,prop)
}
})
p.name = '加油啊'
console.log(p.name) //加油啊
p._id = '123'
console.log(p._id) //Uncaught Error: _id為私有屬性
Reactive函數(shù)
用來(lái)綁定引用數(shù)據(jù)類型, 例如對(duì)象和數(shù)組等,實(shí)現(xiàn)響應(yīng)式。 Proxy 本質(zhì)上是對(duì)某個(gè)對(duì)象的劫持，這樣它不僅僅可以監(jiān)聽對(duì)象某個(gè)屬性值的變化，還可以監(jiān)聽對(duì)象屬性的新增和刪除 。而 reactive 是 vue3 中對(duì)數(shù)據(jù)進(jìn)行劫持的核心 。
//判斷是否為對(duì)象
function isObject(value) {
return value != null && (typeof value === 'object' || typeof value === 'function')
}
function reactive(obj) {
if (!isObject(obj)) {
return obj
}
return new Proxy(obj, {
get(target, key) {
// TODO:收集依賴
return Reflect.get(target, key)
},
set(target, key, value) {
// TODO:觸發(fā)依賴
return Reflect.set(target, key, value)
}
})
}
const state = reactive({
name: '微芒不朽'
})
console.log(state) //Proxy代理的對(duì)象
// Proxy { <target>: {…}, <handler>: {…} }
// <target>: Object { name: "微芒不朽" }
// name: "微芒不朽"
// <prototype>: Object { … }
// <handler>: Object { get: get(target, key), set: set(target, key, value)
// }
// get: function get(target, key)
// set: function set(target, key, value)到此這篇關(guān)于Proxy中代理數(shù)據(jù)攔截的方法詳解的文章就介紹到這了,更多相關(guān)Proxy代理數(shù)據(jù)攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
適合前端Vue開發(fā)童鞋的跨平臺(tái)Weex的使用詳解
這篇文章主要介紹了適合前端Vue開發(fā)童鞋的跨平臺(tái)Weex的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對(duì)路徑問題解決的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue和react項(xiàng)目中key的作用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
基于Vue 和 iView分片上傳功能實(shí)現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術(shù),通過(guò)將文件拆分成多個(gè)小塊并逐塊上傳,解決了大文件上傳時(shí)的諸多問題,如上傳速度慢、超時(shí)和網(wǎng)絡(luò)中斷等,它還展示了如何實(shí)現(xiàn)分片上傳的進(jìn)度顯示、錯(cuò)誤處理和斷點(diǎn)續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧2025-01-01
vue使用rules實(shí)現(xiàn)表單字段驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue使用rules實(shí)現(xiàn)表單字段驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue實(shí)現(xiàn)點(diǎn)擊按鈕下載文件功能
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
詳解在WebStorm中添加Vue.js單文件組件的高亮及語(yǔ)法支持
本篇文章主要介紹了詳解在WebStorm中添加Vue.js單文件組件的高亮及語(yǔ)法支持，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的全過(guò)程
el-upload組件文件上傳都是每個(gè)文件請(qǐng)求一次接口,本次實(shí)現(xiàn)一次請(qǐng)求上傳多個(gè)文件,下面這篇文章主要給大家介紹了關(guān)于使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue3.0父子傳參,子修改父數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0父子傳參,子修改父數(shù)據(jù)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04