何为代理模式
在JavaScript的世界里，编写代码不仅仅是堆砌语法糖，而是一场生动的脱口秀，充满了智慧与幽默，尤其是当我们深入探讨设计模式时，这场秀就变得更加精彩纷呈。今天，我们就来聊聊其中的一位“中介”——代理模式（Proxy Pattern），以及它是如何在JS的舞台上大放异彩的。
开场：张三与李四的“花”样年华
故事的开始很简单，就像一个传统的浪漫桥段：张三，一位程序员界的暖男，决定给心仪的女孩李四送一束花，表达他的爱慕之情。在这个环节中，张三和李四是我们的两个主角，我们要先完成这段自然语言到代码的映射，JS是一门是强大表现力的语言，他们可以简单地用 JSON 对象字面量来表示：
自然语言到代码的映射：
const obj = {
name: '张三',
// string
company: undefined, // 未定义
girlFriend: null, // 为空
// number
age: 18,
sex: '男',
// boolean
isSingle: true,
// function 函数也是对象
sendFlower: function(target) {
target.receiveFlower(this);
}
};
const obj2 = {
name: '李四',
age: 20,
sex: '女',
isSingle: true,
receiveFlower: function(sender) {
console.log(`${this.name}收到了${sender.name}送出的花`);
}
};
// 送花
obj.sendFlower(obj2);
调用张三中的sendFlower()方法后，就可以直接完成对李四的一个送花的动作；
但是有时候，张三送花给李四，张三并不知道李四是否会接受，所以这时候的张三就想了一个办法，找来了李四的室友，王五。
情节升级：王五的闪亮登场
然而，故事不会如此简单。当李四不想接受这份心意时，王五（obj3）——李四的好友兼老乡，带着相同的receiveFlower接口华丽入场，成为了这场爱情传递的关键角色。王五不仅能代收鲜花，还能确保李四在最合适的时机收到这份惊喜：
const obj3 = {
name: '王五',
age: 22,
sex: '女',
isSingle: true,
receiveFlower: function(sender) {
// 判断李四的“心情指数”是否达标，若不达标则稍后重试
if(obj2.xq < 90){
setTimeout(() => {
obj2.xq = 91; // 假设时间能改变一切
obj2.receiveFlower(sender);
}, 2000);
} else {
obj2.receiveFlower(sender);
}
}
};
王五的出现，就像是剧情中的一个巧妙转折，引入了代理模式的核心概念：当直接访问对象有困难或不那么高效时，我们可以使用一个代理对象来控制对真实对象的访问。
完整代码：
<!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>
<script>
// 自然语言 到 代码的映射
// JS 是强大表现力的语言，[] 数组
// {} JSON 对象字面量
// object
const obj = {
// string
company: undefined, // 未定义
girlFriend: null, // 为空
name: '张三',
// number
age: 18,
sex: '男',
// boolean
isSingle: true,
// function 函数也是对象
sayHi: function(){
console.log('hi');
},
// 形参
sendFlower:function(target) {
target.receiveFlower(this)
}
}
const obj2 = {
name: '李四',
xq: 50,
age: 20,
sex: '女',
isSingle: false,
sayHi: function(){
console.log('hi');
},
receiveFlower:function (sender) {
// console.log(this.name + '收到了' + sender.name + '送出的花');
// 提升代码可读性
console.log(`${this.name}收到了${sender.name}送出的花`);
if(this.xq >= 90){
console.log('万达');
}else{
console.log('不约');
}
}
}
// 实参
// obj.sendFlower(obj2);
// 比较复杂
// obj3 proxy 代理对象
obj3 ={
name: '王五',
age: 22,
sex: '女',
isSingle: true,
sayHi: function(){
console.log('hi');
},
receiveFlower:function (sender) {
// 代替obj2收花 实现同样的方法，也就是接口
if(obj2.xq < 90){
console.log('等一等');
setTimeout(function(){
obj2.xq = 91;
obj2.receiveFlower(sender);
},2000)
}else{
obj2.receiveFlower(sender);
}
}
}
// 当obj3 也具有和 obj2 一样的receiveFlower方法，obj3 就可以代替obj2 收花；
// proxy 代理模式
// receiveFlower 也叫接口 面向接口编程
// obj.sendFlower(obj3);
obj.sendFlower(obj2);
</script>
</body>
</html>
代理模式的智慧光芒
在这场送花的“脱口秀”中，代理模式（Proxy Pattern）悄然登台，展示了它的灵活性与实用性。王五作为李四的代理，完美地体现了设计模式的精髓——解耦与扩展。通过代理，张三无需了解李四的具体情况，只需与代理（王五）交互，从而实现了需求的间接满足。
设计模式，特别是这23种经典模式，不仅仅是编程的技术手段，更是解决复杂问题的哲学思考。就像这段HTML页面中的JavaScript代码，不仅展示了如何通过对象和函数构建交互逻辑，更重要的是，它揭示了如何在变化中保持代码的优雅与弹性。
小结：从代码到人生智慧的映射
通过这场“送花记”，我们不仅学习了代理模式的应用，更体会到了“写代码而非写语法”的深意。编程不仅是技术的堆砌，更是情商（“码商”）的体现。正如设计模式在复杂系统中构建的桥梁，连接了功能与效率，我们在生活中也需要这样的智慧，去建立人与人之间的理解与协作。
最终，这场以JavaScript为语言的脱口秀，以一束花的传递，讲述了代理模式的故事，也提醒我们：在不断变化的世界中，保持代码的灵活性，就如同在生活中保持一颗开放和适应变化的心，是通往成功的必经之路。
