JS代理模式

1.代理模式的概念介绍

JS代理模式是一种结构性设计模式，它允许你在访问对象之前或之后添加额外的逻辑或控制。JS代理模式是面向对象编程范式中的一个关键概念，它也是JavaScript中最常见的设计模式之一。本文将探讨JS代理模式的工作原理、使用方法和常见应用场景。

2.代理模式的工作原理

JS代理模式的核心是一个代理对象，它充当了一个虚拟的对象，可以代替真实的对象执行一系列任务。代理对象本身并不提供任何实际的功能，它的任务是将请求转发给真实的对象，然后在请求前后添加一些额外的逻辑或控制。在执行中，代理对象拦截了对真实对象的访问，并对其进行统一的处理。代理模式中的代理对象可以是一个类，也可以是一个函数，其结构灵活多变，但其本质都是通过包装真实对象来实现对其访问的控制和管理。

3.代理模式的使用方法

JS代理模式的使用方法十分灵活，在不同的场景中应用不同。一般来说，代理被分为静态代理和动态代理两种。静态代理是指代理类或对象在编译时已经确定，无法修改或替换，而动态代理是指代理类或对象在运行时动态生成，可以随时替换或添加

静态代理可以通过继承或实现接口来实现代理类，动态代理则使用`Proxy()`函数来实现，该函数接受两个参数：代理目标对象和处理器对象。代理目标对象是真实的目标对象，处理器对象则定义代理逻辑。代理目标对象可以是一个对象、一个函数或一个类，而处理器对象则可以是一个普通的对象或一个函数。

// 静态代理类

class RealSubject {
  request() {
    console.log("RealSubject request.");
  }
}

class ProxySubject {
  constructor() {
    this.realSubject = new RealSubject();
  }

  request() {
    console.log("ProxySubject request.");
    this.realSubject.request();
  }
}

let subject = new ProxySubject();
subject.request(); // ProxySubject request.  RealSubject request.

// 动态代理
let target = {
    name: "target"
};

let handler = {
    get: function (target, propKey) {
        console.log(`getting ${propKey}`);
        return target[propKey];
    }
};

let proxy = new Proxy(target, handler);
proxy.name;  // getting name "target"

4.代理模式的应用场景

代理模式具有很强的适应性，可以应用在各种场景中。下面列举几种常见的应用场景。

4.1. 虚拟代理：即为了延迟对象的创建或加载，而使用一个代理对象来代替真实对象，等到需要使用对象时才会真正地创建或加载。虚拟代理广泛应用在网络请求、大数据处理、图片加载等场景中。

let loadImage = function (url) {
  let img = new Image();
  img.src = url;
  img.onload = function () {
    console.log(`image loaded: ${url}`);
  }
}

let ProxyImage = function (url) {
  let imgProxy = new Image();

  imgProxy.onload = function () {
    imgProxy.onload = null;
    loadImage(url);
  }

  return {
    setSrc: function (src) {
      imgProxy.src = src;
    }
  }
}

let proxyImage = new ProxyImage('https://pic.com/x.jpg');
proxyImage.setSrc('https://pic.com/x.jpg');

4.2.缓存代理：即为了避免重复计算或网络请求，而使用一个代理对象来缓存计算结果或网络请求结果，等到需要时直接调用缓存内容。

let multi = function() {
  let result = 1;
  for (let i = 0; i < arguments.length; i++) {
    result *= arguments[i];
  }
  return result;
}

let proxyMulti = (function(){
  let cache = {};
  return function() {
    let args = Array.prototype.join.call(arguments, ',');
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = multi.apply(this, arguments);
  }
})();

proxyMulti(1,2,3,4); // 24
proxyMulti(1,2,3,4); // 24（从缓存中直接读取结果）

4.3. 权限控制代理：即为了控制用户的访问权限，而使用一个代理对象来做出决策或验证，等到确定用户有足够权限时再执行对真实对象的访问。

let Auth = function (role) {
  this.role = role;
  this.hasAccess = function (component) {
    return component.role == this.role;
  }
}

let Article = function (title, author) {
  this.title = title;
  this.author = author;
  this.role = 'member';
}

let ArticleProxy = function (title, author, role) {
  this.article = new Article(title, author);
  this.auth = new Auth(role);
  this.read = function () {
    if (this.auth.hasAccess(this.article)) {
      console.log(`read article: ${this.article.title}`);
    } else {
      console.log('access denied');
    }
  }
}

let articleProxy = new ArticleProxy('JS Design Patterns', 'John Doe', 'admin');
articleProxy.read(); // access denied

5.总结

总之，JS代理模式是一种十分实用的设计模式，在实际开发中有着广泛的应用场景。通过代理模式，可以更好地控制和管理对象的访问，提高程序的效率和可维护性，使程序更加健壮和安全