[译]使用 Proxy 更好的封装 Storage API

Java_oldboy 发布于2019-08-26 10:22 / 2954人阅读

摘要：译使用更好的封装更多前端技术和知识点，搜索订阅号菌订阅看到篇文章觉得不错，原文。讲的是使用来封装，做一层提供存取数据的代理层。这里简单翻译一下这篇文章的主要内容。请关注我的订阅号，不定期推送有关的技术文章，只谈技术不谈八卦

[译]使用 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接口封装数据如何更好的分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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