关闭

JavaScript代理的惊人威力

时间: 2020-11-04阅读: 241标签: 代理

今天我们要学习的是ECMAScript 6的代理。我们将在本文中涉及以下主题。

  • 什么是代理
  • 代理人在行动
  • 谁使用代理
  • 使用案例和实例
  • 资源

让我们开始吧:)


什么是代理

如MDN网站所述。

Proxy对象使你能够为另一个对象创建一个代理,它可以拦截和重新定义该对象的基本操作。

他们在解释什么是代理的时候,说它可以创建一个代理**,这有点搞笑。当然,他们并没有错,但我们可以简化这个说法,使其更加友好,说

_Proxy_对象可以让你包裹目标对象,通过这样做,我们可以拦截和重新定义该对象的基本操作。

基本上,它的意思是我们要把一个对象,用Proxy包裹起来,这将允许我们创建一个 "隐藏 "的门,并控制所有对所需对象的访问。

一个小插曲,Proxy也是一种软件设计模式,你一定要阅读一下(维基百科链接)。

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler = {};

const proxy = new Proxy(target, handler);

一个 "代理 "是用两个参数创建的。

  • "target":你要包裹的原始对象(代理)。
  • handler:定义哪些操作将被拦截,以及如何重新定义被拦截的操作的对象,也可以调用 "陷阱"。

大多数浏览器都支持代理,但也有一些老的浏览器不支持(当然是IE),你可以查看完整的列表这里。google有一个polyfill的Proxies,但它不支持所有的Proxy功能。

现在我们知道了什么是代理,我们想看看我们能用它做什么。


代理人在行动

让我们想象一下,我们是A Bank。我们想知道每次银行账户余额被访问并被通知上。我们将使用最简单的handler操作/陷阱。

在上面的例子中,我们有一个银行账户对象,里面有我的名字和2020的余额。

const bankAccount = {
  balance: 2020,
  name: 'Georgy Glezer'
};

const handler = {
   get: function(target, prop, receiver) {
    if (prop === 'balance') {
    console.log(`Current Balance Of: ${target.name} Is: ${target.balance} `);
    }

    return target[prop];
  }
};

const wrappedBankAcount = new Proxy(bankAccount, handler);

wrappedBankAcount.balance; // access to the balance

// OUTPUT:
// Current Balance Of: Georgy Glezer Is: 2020
// 2020

这次的处理者对象实现的是get操作/陷阱,它接收一个有3个参数的函数get的返回值。

  • target。被访问的对象(我们封装的对象)。
  • prop: 被访问的属性。在我们的例子中被访问的属性--这里是 "balance"。
  • receiver:接受者。可以是代理,也可以是继承自代理的对象。

我们定义了一个条件,如果被访问的属性是"_balance"_,我们将通知(log)余额和当前用户名,并返回属性_"balance"_。

从输出中可以看到,一旦 "余额 "属性被访问,我们通过使用代理和设置get操作/陷阱,很容易就通知(log)了这次访问。

我们继续用我们Bank的想法,要求每次有人从银行账户中取钱,我们都要通知一下。而另一个约束条件是,银行不允许出现负余额。为了达到这个目的,我们这次要使用set处理程序/陷阱。

在上面的例子中,我们通知当前的余额和取款后的新余额,如果新的余额为负数,我们也会通知并中止取款操作。

const bankAccount = {
    balance: 2020,
    name: 'Georgy Glezer'
};

const handler = {
    set: function (obj, prop, value) {
        console.log(`Current Balance: ${obj.balance}, New Balance: ${value}`);

        if (value < 0) {
            console.log(`We don't allow Negative Balance!`);
            return false;
        }
        obj[prop] = value;

        return true;
    }
};

const wrappedBankAcount = new Proxy(bankAccount, handler);

wrappedBankAcount.balance -= 2000; // access to the balance
console.log(wrappedBankAcount.balance);

wrappedBankAcount.balance -= 50; // access to the balance
console.log(wrappedBankAcount.balance);

// OUTPUT:
// Current Balance: 2020, New Balance: 20
// 20
// Current Balance: 20, New Balance: -30
// We don't allow Negative Balance!
// 20

我们使用的是set operator/trap,它是一个返回布尔值(true/false)的函数,用来判断更新操作是否成功。它接收以下参数。

  • target: 被访问的对象(我们封装的对象)。
  • prop:正在访问的对象(我们封装的对象)。在我们的例子中,被访问的属性是 "balance"。
  • value。应该更新的新值。
  • receiver*: 原先被分配到的对象。这通常是代理本身。但set()处理程序也可以通过原型链或其他各种方式间接调用。

你可以看到,它其实和get很相似,但只是多接收了1个新值的参数。

这2个操作符/陷阱是最常见的,如果你有兴趣找到所有现有的操作符/陷阱,你可以查看这里


谁使用代理

许多流行的库都使用了这种技术,例如: * [MobX]()

还有更多......他们中的大多数人都利用了Proxies给我们带来的惊人力量,并为我们提供了很棒的库。


使用案例和示例

我们已经看到,我们可以使用代理服务器来进行。

  • 记录(通知银行)
  • 验证(阻止负数余额更新)

缓存

我们将再次使用get操作符/陷阱,并将 "dollars "属性添加到我们的对象中。在每次访问 "dollars "属性时,我们将计算我们的余额价值多少美元。因为计算是一个繁重的操作,所以我们希望尽可能的Cache它。

const bankAccount = {
    balance: 10,
    name: 'Georgy Glezer',
    get dollars() {
        console.log('Calculating Dollars');
        return this.balance *3.43008459;
    }
};

let cache = {
    currentBalance: null,
    currentValue: null
};

const handler = {
    get: function (obj, prop) {
        if (prop === 'dollars') {
            let value = cache.currentBalance !== obj.balance ? obj[prop] : cache.currentValue;

            cache.currentValue = value;
            cache.currentBalance = obj.balance;

            return value;
        }

        return obj[prop];
    }
};

const wrappedBankAcount = new Proxy(bankAccount, handler);

console.log(wrappedBankAcount.dollars);
console.log(wrappedBankAcount.dollars);
console.log(wrappedBankAcount.dollars);
console.log(wrappedBankAcount.dollars);

// OUTPUT:
// Calculating Dollars
// 34.3008459
// 34.3008459
// 34.3008459
// 34.3008459

正如你在例子中所看到的,我们有一个缓存对象,它保存着当前的银行余额和以美元为单位的余额价值。每次有人访问"_dollars"_属性时,我们都会先进行计算,然后将其缓存起来。

DOM操作

我们想在每次余额发生变化时更新屏幕上的文字。我们将使用一个set操作符/陷阱,在每次改变数值时,我们将更新屏幕上的DOM元素。

const bankAccount = {
  balance: 2020,
  name: "Georgy Glezer",
  get text() {
    return `${this.name} Balance Is: ${this.balance}`;
  }
};

const objectWithDom = (object, domId) => {
  const handler = {
    set: function (obj, prop, value) {
      obj[prop] = value;

      document.getElementById(domId).innerhtml = obj.text;

      return true;
    }
  };

  return new Proxy(object, handler);
};

// create a dom element with id: bank-account
const wrappedBankAccount = objectWithDom(bankAccount, "bank-account");

wrappedBankAccount.balance = 26;
wrappedBankAccount.balance = 100000;

在这里,我们创建了一个辅助函数,这样我们就可以存储DOM元素的ID,并在set operator/trap中添加了简单的行来更新DOM元素。很简单,对吧?


概要

综上所述,我们了解了ECMAScript 6 Proxies,我们如何使用它们,以及用于什么目的。在我看来,Proxies是一个很神奇的工具,你可以用它来做各种各样的选择,你只需要想想什么最适合你:) 。

原文来自:https://levelup.gitconnected.com/the-amazing-power-of-JavaScript-proxies-aa27c6d06bcb


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9810

关闭

什么是在线代理ip网页代理

当我们需要大量IP进行快节奏完成业绩的时候,很多人都会想到去IP代理服务商那里购买IP代理,所以我相信很多人对于IP代理这个词已经有一定的认识了,那么还有一个词叫做:在线代理ip网页代理

Proxy代理

在一个系统中,总要存储一些数据,对于这些数据,可能有一些是希望我们访问的,但是总有一些是中重要的,不希望我们访问的,希望保护起来,因此ES6新增了代理,在目标对象前架设个拦截层

ES6中的代理(Proxy)和反射(Reflection)

调用 new Proxy() 可常见代替其它目标 (target) 对象的代理,它虚拟化了目标,所以二者看起来功能一致。代理可拦截JS引擎内部目标的底层对象操作,这些底层操作被拦截后会触发响应特定操作的陷阱函数。

Nginx反向代理之动静分离

我们已经知道了什么是正向代理与反向代理,这次我们就讲一下Nginx的动静分离的案例,其实质运用的就是反向代理,专门用一台服务器代理服务器上的图片资源。

Nginx 反向代理返回结果为空的问题

现在有一个 Web 项目,前端是使用 Vue.js 开发的,整个前端需要部署到 K8S 上,后端和前端分开,同样也需要部署到 K8S 上,因此二者需要打包为 Docker 镜像。对前端来说,打包 Docker 就遇到了一个问题:跨域访问问题。

vue proxy代理跨域

changeOrigin的属性值为一个布尔值,如果设置为true,那么本地会虚拟一个NODE服务端接收你的请求并代你发送该请求(中间件)。[本质上是本地开了一个服务器dev-server,所有的请求都通过这里转发出去。]

如何使用Proxy 来代理Js中的类?

Proxy 对象(Proxy)是 ES6 的一个非常酷却鲜为人知的特性。虽然这个特性存在已久,但是我还是想在本文中对其稍作解释,并用一个例子说明一下它的用法。

.Net Core/Framework之Nginx反向代理后获取客户端IP等数据探索

公司项目最近出现获取访问域名、端口、IP错误现象,通过排查发现, 之前项目一直通过Nginx自定义Headers信息来获取,但最近运维人员失误操作造成自定义Header信息丢失,造成项目拿不到对应的数据。

反向代理和内网穿透

反向代理看上去看深奥,其实不然,只是因为汉语言文化的差异导致它看上去深奥。一般反派感觉都比较厉害和神秘。要理解反向代理,我们就不得不说一下正向代理。正向代理代理的对象是客户端;反向代理代理的对象是服务端

使用Nginx反向代理google,做谷歌搜索镜像

梯子有点慢。如果用VPS直接转发给谷歌,应该会快一些。实验结果也确实是如此,尽管我用的是同一个服务器。Nginx 需要支持 sub_module ,也就是编译时有 --with-http_sub_module 。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!