前端开发设计模式——代理模式

前端拾光者

于 2024-10-01 10:00:00 发布

阅读量537

点赞数 16

分类专栏： JavaScript设计模式文章标签：设计模式代理模式前端 javascript

本文链接：https://blog.csdn.net/jxnd123456/article/details/142654752

版权

JavaScript设计模式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、代理模式的定义和概念

代理模式是一种设计模式，它为其他对象提供一种代理以控制对这个对象的访问。在前端中，代理模式可以用于拦截对目标对象的访问，并在访问前后执行一些额外的操作，比如缓存数据、验证权限、记录日志等。

二、代理模式的实现方式

1.ES6 Proxy 实现动态代理：

ES6 引入了Proxy对象，可以方便地创建一个代理对象。Proxy接收两个参数，第一个是目标对象，第二个是一个处理程序对象，其中可以定义各种捕获器方法来拦截对目标对象的操作。

示例：

   const targetObject = {
     name: 'original object',
     value: 42,
   };

   const proxyObject = new Proxy(targetObject, {
     get(target, property) {
       console.log(`Getting property ${property}`);
       return target[property];
     },
     set(target, property, value) {
       console.log(`Setting property ${property} to ${value}`);
       target[property] = value;
       return true;
     },
   });

   console.log(proxyObject.name); // 输出：Getting property name，然后是'original object'
   proxyObject.value = 100; // 输出：Setting property value to 100

2.手动实现静态代理：

创建一个代理对象，该对象具有与目标对象相同的接口，并在代理对象的方法中调用目标对象的方法，并可以添加额外的逻辑。

示例：

   // 目标对象
   class Target {
     doSomething() {
       console.log('Target is doing something.');
     }
   }

   // 代理对象
   class Proxy {
     constructor(target) {
       this.target = target;
     }

     doSomething() {
       console.log('Before calling target.');
       this.target.doSomething();
       console.log('After calling target.');
     }
   }

   const target = new Target();
   const proxy = new Proxy(target);
   proxy.doSomething();

三、代理模式的应用场景

1.图片懒加载：

当页面中有很多图片时，可以使用代理模式来实现图片的懒加载。当图片进入可视区域时，再真正加载图片。

示例：

   class Image {
     constructor(src) {
       this.src = src;
     }

     load() {
       const img = new Image(this.src);
       img.onload = () => {
         console.log(`Image ${this.src} loaded.`);
       };
       img.src = this.src;
     }
   }

   class ImageProxy {
     constructor(src) {
       this.src = src;
       this.image = null;
     }

     load() {
       if (!this.image) {
         this.image = new Image(this.src);
       }
       if (this.isInViewport()) {
         this.image.load();
       }
     }

     isInViewport() {
       // 判断图片是否在可视区域的逻辑
       return true; // 这里简化为始终返回 true
     }
   }

   const proxyImage = new ImageProxy('image.jpg');
   proxyImage.load();

2.数据缓存：

当从服务器获取数据时，可以使用代理模式来缓存数据。如果数据已经被缓存，直接从缓存中获取数据，而不需要再次从服务器获取。

示例：

   class DataFetcher {
     fetchData() {
       console.log('Fetching data from server...');
       return 'data from server';
     }
   }

   class DataFetcherProxy {
     constructor() {
       this.dataFetcher = new DataFetcher();
       this.cache = null;
     }

     fetchData() {
       if (!this.cache) {
         this.cache = this.dataFetcher.fetchData();
       }
       return this.cache;
     }
   }

   const proxy = new DataFetcherProxy();
   console.log(proxy.fetchData()); // 输出：Fetching data from server...，然后是'data from server'
   console.log(proxy.fetchData()); // 直接从缓存中获取数据，不再从服务器获取

3.权限控制：

在前端应用中，可以使用代理模式来控制用户对某些功能的访问权限。如果用户没有权限访问某个功能，代理对象可以阻止对目标对象的调用。

示例：

   class TargetFunction {
     performAction() {
       console.log('Performing sensitive action.');
     }
   }

   class PermissionProxy {
     constructor(target, hasPermission) {
       this.target = target;
       this.hasPermission = hasPermission;
     }

     performAction() {
       if (this.hasPermission) {
         this.target.performAction();
       } else {
         console.log('You do not have permission to perform this action.');
       }
     }
   }

   const target = new TargetFunction();
   const proxyWithPermission = new PermissionProxy(target, true);
   proxyWithPermission.performAction(); // 输出：Performing sensitive action.
   const proxyWithoutPermission = new PermissionProxy(target, false);
   proxyWithoutPermission.performAction(); // 输出：You do not have permission to perform this action.