主题 :JavaScript 中的 代理模式(Proxy Pattern) 实战
🧠 学习目标达成 ✅
- 理解代理模式的核心思想
- 能用 JS 对象实现简单的代理逻辑
- 掌握"通过中间人控制访问"的设计思维
- 顺便学会了如何优雅地帮兄弟追女神 💔

💻 完整代码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proxy Pattern - 恋爱代理系统</title>
</head>
<body>
<script>
// 👨💼 角色A:害羞的帅哥(真实发送者)
let A = {
name: '帅哥wby',
sendFlower: function(target) {
// 把花交给"代理" ------ 军师C
target.receiveFlower(A);
}
};
// 👩🦰 角色B:美女(真实接收者)
let B = {
name: '美女dgx',
receiveFlower: function(sender) {
console.log('美女收到了' + sender.name + '的花 💐');
}
};
// 🧙♂️ 角色C:军师(代理对象)
let C = {
name: "军师",
receiveFlower: function(sender) {
// 代理的职责:转发请求到真实对象
console.log(`军师C收到花,正在转交给美女...`);
B.receiveFlower(sender);
}
};
// 🚀 执行:帅哥A把花交给军师C(而不是直接给美女B)
A.sendFlower(C);
</script>
</body>
</html>
🎯 代码运行结果
在浏览器控制台中输出:
erlang
军师C收到花,正在转交给美女...
美女收到了帅哥的花 💐
✅ 成功实现"间接送花",A 和 B 之间无直接耦合!
🔍 核心逻辑拆解
步骤 | 代码行为 | 设计模式对应 |
---|---|---|
1 | A.sendFlower(C) |
客户端调用代理对象 |
2 | C.receiveFlower(A) |
代理接收请求 |
3 | B.receiveFlower(sender) |
代理转发请求给真实对象 |
4 | console.log(...) |
真实对象执行业务逻辑 |
🧩 代理模式的核心思想

为一个对象提供一个替身,以控制对该对象的访问。
在这个例子中:
- 真实对象 :
B
(美女) - 代理对象 :
C
(军师) - 客户端 :
A
(帅哥)
✅ 优点:
- 解耦:A 不需要知道 B 的细节,只需认识 C
- 可扩展:C 可以加逻辑(比如"看心情再送")
- 安全:B 不直接暴露在 A 面前

🛠️ 可优化建议(进阶版)
1. 加个"心情判断"机制
javascript
let C = {
name: "军师",
receiveFlower: function(sender) {
if (B.isHappy) {
console.log("军师:女神心情不错,送花成功!");
B.receiveFlower(sender);
} else {
console.log("军师:女神今天不开心,花先存着...");
}
}
};
2. 支持延迟送花(懒加载)
javascript
receiveFlower: function(sender) {
console.log("军师:已接收花,3秒后送达...");
setTimeout(() => B.receiveFlower(sender), 3000);
}
3. 更语义化的命名(推荐)
ini
let Lover = { name: "帅哥", ... }
let Target = { name: "美女", ... }
let MatchmakerProxy = { ... } // 代理命名更清晰
🎭 幽默总结
"这哪是学设计模式?
这是《兄弟,花我帮你送,锅我帮你背》编程实战。"
- A:我太帅了,不能轻易出手。
- C:兄弟放心,人我帮你撩,背锅我来扛。
- B:收到了,谢谢,没感觉。
🏆 今日成就 ✅
- 实现了 JavaScript 中最浪漫的代理模式
- 理解了"中间人"的重要性
- 学会了如何用代码规避"当面被拒"的风险
- 掌握了设计模式的"甩锅艺术"
🚀 结语
今天的你,
不只是写了三个人和一束花,
你是用代码,
写了一封不会被拒的情书。
💬 记住:
真正的爱情或许不需要代理,
但健壮的系统,一定需要。