摘要:此方法充當攔截器,在返回值之前,會首先對屬性值進行檢查,如果不存在,則拋出異常。輸出與第一種情況相同,但此時函數專注于邏輯,只處理消息。在這種情況下,我們需要使用方法,并在其中進行驗證。在此示例中,我們不允許空和發布請求而不提供數據。
翻譯:劉小夕什么是 Proxy原文鏈接:https://devinduct.com/blogpos...
通常,當談到JavaScript語言時,我們討論的是ES6標準提供的新特性,本文也不例外。 我們將討論JavaScript代理以及它們的作用,但在我們深入研究之前,我們先來看一下Proxy的定義是什么。
MDN上的定義是:代理對象是用于定義基本操作的自定義行為(例如,屬性查找,賦值,枚舉,函數調用等)。
換句話說,我們可以說代理對象是我們的目標對象的包裝器,我們可以在其中操縱其屬性并阻止對它的直接訪問。 你可能會發現將它們應用到實際代碼中很困難,我鼓勵你仔細閱讀這個概念,它可能會改變你的觀點。
術語handler
包含陷阱(traps)的占位符對象。
traps
提供屬性訪問的方法。這類似于操作系統中捕獲器的概念。
target
代理虛擬化的對象。(由代理對象包裝和操作的實際對象)
在本文中,我將為 get 和 set 陷阱 提供簡單的用例,考慮到最后,我們將看到如何使用它們并包含更復雜的功能,如API。
語法和用例let p = new Proxy(target, handler);
將目標和處理程序傳遞給Proxy構造函數,這樣就創建了一個proxy對象。現在,讓我們看看如何利用它。為了更清楚地看出Proxy的好處,首先,我們需要編寫一些沒有它的代碼。
想象一下,我們有一個帶有幾個屬性的用戶對象,如果屬性存在,我們想要打印用戶信息,如果不存在,則拋出異常。在不使用代理對象時,判斷屬性值是否存在的代碼也放在了打印用戶信息的函數,即 printUser 中(這并不是我們所希望的),如下demo所示:
let user = { name: "John", surname: "Doe" }; let printUser = (property) => { let value = user[property]; if (!value) { throw new Error(`The property [${property}] does not exist`); } else { console.log(`The user ${property} is ${value}`); } } printUser("name"); // 輸出: "The user name is John" printUser("email"); // 拋出錯誤: The property [email] does not existget
通過查看上面的代碼,你會發現:將條件和異常移到其他地方,而printUser中僅關注顯示用戶信息的實際邏輯會更好。這是我們可以使用代理對象的地方,讓我們更新一下這個例子。
let user = { name: "John", surname: "Doe" }; let proxy = new Proxy(user, { get(target, property) { let value = target[property]; if (!value) { throw new Error(`The property [${property}] does not exist`); } return value; } }); let printUser = (property) => { console.log(`The user ${property} is ${proxy[property]}`); }; printUser("name"); // 輸出: "The user name is John" printUser("email"); // 拋出錯誤: The property [email] does not exist
在上面的示例中,我們包裝了 user 對象,并設置了一個 get 方法。 此方法充當攔截器,在返回值之前,會首先對屬性值進行檢查,如果不存在,則拋出異常。
輸出與第一種情況相同,但此時 printUser 函數專注于邏輯,只處理消息。
set代理可能有用的另一個例子是屬性值驗證。在這種情況下,我們需要使用 set 方法,并在其中進行驗證。例如,當我們需要確保目標類型時,這是一個非常有用的鉤子。我們來看一下實際使用:
let user = new Proxy({}, { set(target, property, value) { if (property === "name" && Object.prototype.toString.call(value) !== "[object String]") { // 確保是 string 類型 throw new Error(`The value for [${property}] must be a string`); }; target[property] = value; } }); user.name = 1; // 拋出錯誤: The value for [name] must be a string
這些是相當簡單的用例,以下場景,proxy均可以派上用場:
格式化
價值和類型修正
數據綁定
調試
...
現在是時候創建一個更復雜的用例了。
具有代理的API - 更復雜的示例通過使用簡單用例中的知識,我們可以創建一個API包裝器,以便在我們的應用程序中使用。 當前只支持 get 和 post 請求,但它可以很容易地擴展。代碼如下所示。
const api = new Proxy({}, { get(target, key, context) { return target[key] || ["get", "post"].reduce((acc, key) => { acc[key] = (config, data) => { if (!config && !config.url || config.url === "") throw new Error("Url cannot be empty."); let isPost = key === "post"; if (isPost && !data) throw new Error("Please provide data in JSON format when using POST request."); config.headers = isPost ? Object.assign(config.headers || {}, { "content-type": "application/json;chartset=utf8" }) : config.headers; return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open(key, config.url); if (config.headers) { Object.keys(config.headers).forEach((header) => { xhr.setRequestHeader(header, config.headers[header]); }); } xhr.onload = () => (xhr.status === 200 ? resolve : reject)(xhr); xhr.onerror = () => reject(xhr); xhr.send(isPost ? JSON.stringify(data) : null); }); }; return acc; }, target)[key]; }, set() { throw new Error("API methods are readonly"); }, deleteProperty() { throw new Error("API methods cannot be deleted!"); } });
讓我們解釋一下簡單實現,set 和 deleteProperty。 我們添加了一個保護級別,并確保每當有人意外或無意地嘗試為任何API屬性設置新值時,都會拋出異常。
每次嘗試刪除屬性時都會調用 deleteProperty 方法。可以確保沒有人可以從我們的代理(即此處的 api)中刪除任何屬性,因為通常我們都不想丟失API方法。
get 在這里很有趣,它做了幾件事。target 是一個空對象,get 方法將在第一次有人使用 api 時創建所有方法(如當前的 get 和 post請求),在 reduce 回調中,我們根據提供的配置執行API規范所需的驗證和檢查。在此示例中,我們不允許空URL和發布請求而不提供數據。這些檢查可以擴展和修改,但重要的是我們只能在這一個地方集中處理。
reduce 僅在第一次API調用時完成,之后都會跳過整個 reduce 進程,get 只會執行默認行為并返回屬性值,即API處理程序。每個處理程序返回一個Promise對象,負責創建請求并調用服務。
使用:
api.get({ url: "my-url" }).then((xhr) => { alert("Success"); }, (xhr) => { alert("Fail"); });
delete api.get; //throw new Error("API methods cannot be deleted!");結論
當您需要對數據進行更多控制時,代理可以派上用場。你可以根據受控規則擴展或拒絕對原始數據的訪問,從而監視對象并確保正確行為。
如果您喜歡這篇文章,請關注我的公眾號。可以在下面的評論部分中表達您的想法。
謝謝各位小伙伴愿意花費寶貴的時間閱讀本文,如果本文給了您一點幫助或者是啟發,請不要吝嗇你的贊和Star,您的肯定是我前進的最大動力。https://github.com/YvetteLau/...
關注小姐姐的公眾號,加入交流群。文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106442.html
摘要:協議轉換微服務架構允許使用不同的協議以便于獲得使用不同技術的優勢。過于龐大的在實現時,應當避免將非通用邏輯如領域特定數據轉換放入其中。服務應始終對其數據域擁有完全的所有權。構建一個過于龐大的,從服務團隊爭奪控制權,這違反了微服務的理念。 我們團隊的后端服務中,一開始只有一個大服務,所有的東西都往里面寫,可以想象下,當這個服務變得不斷的龐大,將會變得多么難以維護。后來逐漸把一些數據服務抽...
摘要:在下文中,首先我會介紹的使用方式,然后列舉具體實例解釋的使用場景。如果簡單地區分和的使用場景,可以概括為的核心作用是控制外界對被代理者內部的訪問,的核心作用是增強被裝飾者的功能。 文章永久鏈接地址:http://pinggod.com/2016/%E5%AE%9E%E4%BE%8B%E8%A7%A3%E6%9E%90-ES6-Proxy-%E4%BD%BF%E7%94%A8%E5%9C...
摘要:譯使用更好的封裝更多前端技術和知識點,搜索訂閱號菌訂閱看到篇文章覺得不錯,原文。講的是使用來封裝,做一層提供存取數據的代理層。這里簡單翻譯一下這篇文章的主要內容。請關注我的訂閱號,不定期推送有關的技術文章,只談技術不談八卦 showImg(https://segmentfault.com/img/remote/1460000019889841?w=640&h=426); [譯]使用 P...
閱讀 3403·2023-04-26 02:41
閱讀 2445·2023-04-26 00:14
閱讀 2823·2021-08-11 10:22
閱讀 1276·2019-12-27 11:38
閱讀 3571·2019-08-29 18:34
閱讀 2375·2019-08-29 12:13
閱讀 2951·2019-08-26 18:26
閱讀 1834·2019-08-26 16:49