資訊專欄INFORMATION COLUMN
摘要：譯使用更好的封裝更多前端技術(shù)和知識(shí)點(diǎn)，搜索訂閱號(hào)菌訂閱看到篇文章覺(jué)得不錯(cuò)，原文。講的是使用來(lái)封裝，做一層提供存取數(shù)據(jù)的代理層。這里簡(jiǎn)單翻譯一下這篇文章的主要內(nèi)容。請(qǐng)關(guān)注我的訂閱號(hào)，不定期推送有關(guān)的技術(shù)文章，只談技術(shù)不談八卦
[譯]使用 Proxy 更好的封裝 Storage API
?? 更多前端技術(shù)和知識(shí)點(diǎn)，搜索訂閱號(hào) JS 菌 訂閱封裝 Storage看到篇文章覺(jué)得不錯(cuò)，原文：https://davidwalsh.name/javas...。講的是使用 Proxy 來(lái)封裝 Storage API，做一層提供存取數(shù)據(jù)的代理層。這里簡(jiǎn)單翻譯一下這篇文章的主要內(nèi)容。
這篇文章提到 Proxy 這種語(yǔ)法可以用來(lái)封裝 sessionStorage、 localStorage 甚至是 IndexedDB?？梢允褂?Proxy 代理來(lái)使 API 更容易使用。
首先介紹一下 Proxy 的基本用法：
/*
const proxy = new Proxy({}, {
get: (obj, prop) => { ... },
set: (obj, prop, value) => { ... },
// more props here
});
*/
// This basic proxy returns null instead of undefined if the
// property doesn"t exist
// 如果屬性不存在那么返回的是 null 而不是 undefined
const proxy = new Proxy({}, {
get: (obj, prop) => {
return prop in obj ? obj[prop] : null;
}
});
// proxy.whatever => null
然后編寫(xiě)一種存取 Storage 數(shù)據(jù)的代理：
// storage 是 Storage API 的類型，可以是 localStorage 或是 sessionStorage
// prefix 則屬于 namespace
function getStorage(storage, prefix) {
// 這里返回一個(gè) Proxy 實(shí)例，調(diào)用這個(gè)實(shí)例的 set 或 get 方法來(lái)存取數(shù)據(jù)
return new Proxy({}, {
set: (obj, prop, value) => {
obj[prop] = value;
storage.setItem(`${prefix}.${prop}`, value);
},
get: (obj, prop) => {
// return obj[prop];
return storage.getItem(`${prefix}.${prop}`);
},
});
}
// Create an instance of the storage proxy
// 使用的時(shí)候首先通過(guò) namespace 創(chuàng)建 Storage Proxy 實(shí)例
const userObject = getStorage(localStorage, "user");
// Set a value in localStorage
// 然后通過(guò)直接訪問(wèn)屬性的方法來(lái)操作數(shù)據(jù)
userObject.name = "David";
// Get the value from localStorage
// 可以方便的使用解構(gòu)獲取數(shù)據(jù)
const { name } = userObject;
補(bǔ)充
class Storage {
constructor(storage, prefix) {
this.storage = storage;
this.prefix = prefix;
}
getItem(prop) {
return this.storage.getItem(`${this.prefix}.${prop}`);
}
setItem(prop, val) {
return this.storage.setItem(`${this.prefix}.${prop}`, val);
}
}
使用 class 封裝 Storage 通過(guò) new 方法創(chuàng)建實(shí)例，并使用 get/setItem 方法操作明顯沒(méi)有 Proxy 封裝后使用屬性操作符讀取數(shù)據(jù)更方便。
請(qǐng)關(guān)注我的訂閱號(hào)，不定期推送有關(guān) JS 的技術(shù)文章，只談技術(shù)不談八卦
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106068.html
摘要：此方法充當(dāng)攔截器，在返回值之前，會(huì)首先對(duì)屬性值進(jìn)行檢查，如果不存在，則拋出異常。輸出與第一種情況相同，但此時(shí)函數(shù)專注于邏輯，只處理消息。在這種情況下，我們需要使用方法，并在其中進(jìn)行驗(yàn)證。在此示例中，我們不允許空和發(fā)布請(qǐng)求而不提供數(shù)據(jù)。 翻譯：劉小夕原文鏈接：https://devinduct.com/blogpos... 什么是 Proxy 通常，當(dāng)談到JavaScript語(yǔ)言時(shí)，我...
摘要：隨著社區(qū)及各大廠商的不斷改進(jìn)發(fā)展，將成為容器管理領(lǐng)域的領(lǐng)導(dǎo)者。以集群的方式運(yùn)行管理跨機(jī)器的容器。的自我修復(fù)機(jī)制使得容器集群總是運(yùn)行在用戶期望的狀態(tài)。 本文來(lái)源于Infoq的一篇文章（見(jiàn)參考部分），并在難懂的地方自己理解的基礎(chǔ)上做了修改。實(shí)際在ubuntu上部署 kubernetes 操作另見(jiàn) 文章 。 Together we will ensure that Kubernete...
摘要：隨著社區(qū)及各大廠商的不斷改進(jìn)發(fā)展，將成為容器管理領(lǐng)域的領(lǐng)導(dǎo)者。以集群的方式運(yùn)行管理跨機(jī)器的容器。的自我修復(fù)機(jī)制使得容器集群總是運(yùn)行在用戶期望的狀態(tài)。 本文來(lái)源于Infoq的一篇文章（見(jiàn)參考部分），并在難懂的地方自己理解的基礎(chǔ)上做了修改。實(shí)際在ubuntu上部署 kubernetes 操作另見(jiàn) 文章 。 Together we will ensure that Kubernete...
摘要：離線存儲(chǔ)數(shù)據(jù)的建議對(duì)尋址資源，使用這是的一部分。在到達(dá)儲(chǔ)量限制之前，兩種存儲(chǔ)機(jī)制都會(huì)一直進(jìn)行存儲(chǔ)。則沒(méi)有對(duì)存儲(chǔ)量做出限制，只是在之后會(huì)彈出提醒。是異步的基于回調(diào)函數(shù)，但它同樣不支持。也是異步的基于回調(diào)函數(shù)，在和中可以工作雖然使用的是同步。 拖拖拉拉好久，終于把個(gè)人博客整出來(lái)了。鳴謝 @pinggod。 厚著臉安利一下，地址是 http://www.wemlion.com/。歡迎訪問(wèn)，歡...
閱讀 832·2023-04-26 00:37
閱讀 719·2021-11-24 09:39
閱讀 2146·2021-11-23 09:51
閱讀 3812·2021-11-22 15:24
閱讀 743·2021-10-19 11:46
閱讀 1876·2019-08-30 13:53
閱讀 2426·2019-08-29 17:28
閱讀 1325·2019-08-29 14:11
