在JavaScript中如何使用代理模式

代理模式是一种设计模式，它通过引入一个新的对象（代理对象）来控制对原有对象的访问。在JavaScript中，使用代理模式可以实现懒加载、权限控制、事件处理等功能。代理对象与原对象实现相同的接口，客户端并不直接与原对象交互而是通过代理对象。这样做可以在不改变原有对象代码的前提下，为原有对象提供额外的操作。例如，一个图片懒加载的场景，通过代理模式可以在不加载图片的情况下先显示一个占位符，只有当用户滚动到图片时，才真正去加载图片资源。

一、代理模式的基本概念

定义与特点

代理模式是为一个对象提供一个替代品或占位符，以便控制对它的访问。其关键点在于引入了一个代理对象来间接访问目标对象，从而可以在不影响目标对象的前提下增添额外的操作。

应用场景

代理模式通常用于延迟处理操作或者在进行实际操作前进行一些额外的处理。典型的应用场景包括：

控制对敏感对象的访问。
在调用一个对象的操作之前进行额外的处理，如权限控制、缓存处理等。
作为智能引用，仅在对象被实际使用时才创建它。

二、在JavaScript中使用代理模式

创建代理对象

在JavaScript ES6之前，通过定义一个新的对象，并在这个对象中重新定义目标对象的同名方法来创建代理。ES6引入了Proxy对象，使得创建代理对象更加直接和便捷。

使用Proxy创建一个代理对象示例代码如下：

let target = {
    message: "Hello, World!"
};
let handler = {
    get: function (target, prop, receiver) {
        return "Proxy: " + target[prop];
    }
};
let proxy = new Proxy(target, handler);
console.log(proxy.message); // 输出: Proxy: Hello, World!

在这个例子中，当我们尝试获取proxy对象属性的值时，handler对象中的get方法会被触发，它能够检测到属性的读取，并返回经过处理的字符串。

懒加载实现

懒加载是一种常见的优化手段，在前端开发中，懒加载通常用于图片或者数据。以下是一个简单的懒加载图片的代码实现：

class PlaceholderImage {
    constructor(url) {
        this.url = url;
    }
}
class ImageProxy {
    constructor(placeholderImage) {
        this.placeholderImage = placeholderImage;
        this.realImage = null;
    }
    display() {
        if (!this.realImage) {
            this.realImage = new Image();
            this.realImage.src = this.placeholderImage.url; // 图片实际上的加载发生在这里
            console.log('Image loaded: ' + this.placeholderImage.url);
        }
        return this.realImage;
    }
}
// 使用示例
let lazyImage = new ImageProxy(new PlaceholderImage('http://example.com/image.png'));
document.body.appendChild(lazyImage.display());

三、代理模式的进阶应用

数据绑定与监听

代理模式可以用来监听对象属性的变化，进而实现数据绑定。这是Vue.js等现代前端框架的核心机制之一。

以下是一个简单的数据绑定和监听的例子：

let data = { price: 5, quantity: 2 };
let target, total, salePrice;
class Dep {
    constructor() {
        this.subscribers = new Set();
    }
    depend() {
        if (target && !this.subscribers.has(target)) {
            this.subscribers.add(target);
        }
    }
    notify() {
        this.subscribers.forEach(sub => sub());
    }
}
let data_with_proxy = new Proxy(data, {
    get(obj, key) {
        dep.depend();
        return obj[key];
    },
    set(obj, key, newVal) {
        obj[key] = newVal;
        dep.notify();
        return true;
    }
});
let dep = new Dep();
function watcher(myFunc) {
    target = myFunc;
    target();
    target = null;
}
watcher(() => {
    total = data_with_proxy.price * data_with_proxy.quantity;
});
watcher(() => {
    salePrice = data_with_proxy.price * 0.9;
});
console.log(total, salePrice); // 输出: 10, 4.5
data_with_proxy.price = 20;
console.log(total, salePrice); // 输出: 40, 18