代理模式 | 秋雨

简介

代理模式(Proxy) ,为其他对象提供一种代理以控制对这个对象的访问代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象：文件，资源，内存中的对象，或者是一些难以复制的东西

ES6

class Star {
  play() {
    console.log("演戏");
  }
}

class StarProxy {
  constructor() {
    this.superStart = new Star();
  }

  talk(price) {
    if (price >= 10000) {
      this.superStar.play();
    } else {
      throw new Error("价钱不合适");
    }
  }
}

let jr = new StarProxy();

jr.talk(100);

Proxy

var star = {
  name: "tiechui",
  workprice: 10000,
};
let proxy = new Proxy(star, {
  get(target, key) {
    if (key === "workprice") {
      console.log("访问了");
    }
    return target[key];
  },
  set(target, key, value) {
    if (key === "workprice") {
      console.log("设置了");
      if (value > 10000) {
        console.log("可以合作");
      } else {
        throw new Error("价钱不合适");
      }
    }
  },
});

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>代理模式</title>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let vueobj = {};

      let proxy = new Proxy(vueobj, {
        get(target, key) {
          return target[key];
        },
        set(target, key, value) {
          if (key === "data") {
            box.innerHTML = value;
          }
          target[key] = value;
        },
      });
    </script>
  </body>
</html>