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

JS菌發表於2019-07-26
封裝API

20190727005843.png

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

⭐️ 更多前端技術和知識點，搜尋訂閱號 JS 菌 訂閱

看到篇文章覺得不錯，原文：davidwalsh.name/javascript-… 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 菌公眾賬號

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

相關文章