[譯]使用 Proxy 更好的封裝 Storage API

Java_oldboy 發布于2019-08-26 10:22 / 3053人閱讀

摘要：譯使用更好的封裝更多前端技術和知識點，搜索訂閱號菌訂閱看到篇文章覺得不錯，原文。講的是使用來封裝，做一層提供存取數據的代理層。這里簡單翻譯一下這篇文章的主要內容。請關注我的訂閱號，不定期推送有關的技術文章，只談技術不談八卦

[譯]使用 Proxy 更好的封裝 Storage API

?? 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

看到篇文章覺得不錯，原文：https://davidwalsh.name/javas...。講的是使用 Proxy 來封裝 Storage API，做一層提供存取數據的代理層。這里簡單翻譯一下這篇文章的主要內容。

封裝 Storage

這篇文章提到 Proxy 這種語法可以用來封裝 sessionStorage、 localStorage 甚至是 IndexedDB。可以使用 Proxy 代理來使 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

然后編寫一種存取 Storage 數據的代理：

// 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 封裝后使用屬性操作符讀取數據更方便。

請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦

GPU云服務器云服務器直播平臺使用的api 建議上傳oss,使用cdn加速效果訪問效果更好 webrtc中api接口封裝數據如何更好的分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106068.html

【譯】Proxy及其優勢

摘要：此方法充當攔截器，在返回值之前，會首先對屬性值進行檢查，如果不存在，則拋出異常。輸出與第一種情況相同，但此時函數專注于邏輯，只處理消息。在這種情況下，我們需要使用方法，并在其中進行驗證。在此示例中，我們不允許空和發布請求而不提供數據。翻譯：劉小夕原文鏈接：https://devinduct.com/blogpos... 什么是 Proxy 通常，當談到JavaScript語言時，我...

Freeman 2019-08-26 10:35 評論0 收藏0
開源容器集群管理系統Kubernetes架構及組件介紹

摘要：隨著社區及各大廠商的不斷改進發展，將成為容器管理領域的領導者。以集群的方式運行管理跨機器的容器。的自我修復機制使得容器集群總是運行在用戶期望的狀態。本文來源于Infoq的一篇文章（見參考部分），并在難懂的地方自己理解的基礎上做了修改。實際在ubuntu上部署 kubernetes 操作另見文章。 Together we will ensure that Kubernete...

2i18ns 2019-07-01 16:18 評論0 收藏0
開源容器集群管理系統Kubernetes架構及組件介紹

摘要：隨著社區及各大廠商的不斷改進發展，將成為容器管理領域的領導者。以集群的方式運行管理跨機器的容器。的自我修復機制使得容器集群總是運行在用戶期望的狀態。本文來源于Infoq的一篇文章（見參考部分），并在難懂的地方自己理解的基礎上做了修改。實際在ubuntu上部署 kubernetes 操作另見文章。 Together we will ensure that Kubernete...

godlong_X 2019-06-28 14:53 評論0 收藏0
【譯】漸進式 Web App 的離線存儲

摘要：離線存儲數據的建議對尋址資源，使用這是的一部分。在到達儲量限制之前，兩種存儲機制都會一直進行存儲。則沒有對存儲量做出限制，只是在之后會彈出提醒。是異步的基于回調函數，但它同樣不支持。也是異步的基于回調函數，在和中可以工作雖然使用的是同步。拖拖拉拉好久，終于把個人博客整出來了。鳴謝 @pinggod。厚著臉安利一下，地址是 http://www.wemlion.com/。歡迎訪問，歡...

Joyven 2019-08-21 14:19 評論0 收藏0