bt365体育投注.主頁欢迎您!!

    <acronym id="zvmrr"></acronym>
    <td id="zvmrr"></td>
  • <tr id="zvmrr"><label id="zvmrr"></label></tr>
  • <acronym id="zvmrr"></acronym>
  • JavaScript代理的惊人威力

    今天我们要学习的是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操作/陷阱。get

    在上面的例子中,我们有一个银行账户对象,里面有我的名字和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元素。很简单,对吧?让我们看看结果:)

    Image for post

    概要

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

    如果您喜欢这篇文章,欢迎关注并拍手??。

    资源简介

    阅读 1.4k

    推荐阅读
    挚爱JavaScript
    用户专栏

    敢作敢为

    134 人关注
    131 篇文章
    专栏主页
    bt365体育投注