⭐️ 更多前端技術和知識點,搜索訂閱號
JS 菌
訂閱javascript
看到篇文章以爲不錯,原文:davidwalsh.name/javascript-… Proxy 來封裝 Storage API,作一層提供存取數據的代理層。這裏簡單翻譯一下這篇文章的主要內容。前端
這篇文章提到 Proxy 這種語法能夠用來封裝 sessionStorage、 localStorage 甚至是 IndexedDB。能夠使用 Proxy 代理來使 API 更容易使用。java
首先介紹一下 Proxy 的基本用法:session
/* 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
複製代碼
而後編寫一種存取 Storage 數據的代理:ui
// storage 是 Storage API 的類型,能夠是 localStorage 或是 sessionStorage
// prefix 則屬於 namespace
function getStorage(storage, prefix) {
// 這裏返回一個 Proxy 實例,調用這個實例的 set 或 get 方法來存取數據
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
// 使用的時候首先經過 namespace 建立 Storage Proxy 實例
const userObject = getStorage(localStorage, "user");
// Set a value in localStorage
// 而後經過直接訪問屬性的方法來操做數據
userObject.name = "David";
// Get the value from localStorage
// 能夠方便的使用解構獲取數據
const { name } = userObject;
複製代碼
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 經過 new 方法建立實例,並使用 get/setItem 方法操做明顯沒有 Proxy 封裝後使用屬性操做符讀取數據更方便。this
請關注個人訂閱號,不按期推送有關 JS 的技術文章,只談技術不談八卦 😊spa