前言
大家好呀！(●'◡'●) 今天，我这个被JavaScript折磨得死去活来的大学生要来给你们讲个有趣的故事！如果你曾经暗恋过某人，却不敢直接表白，而是拜托朋友帮忙传递情书...恭喜你，你已经在现实生活中实践了一个设计模式！😂
JavaScript不愧是前后端通吃的万能语言，它不仅能写网页，还能写服务器，甚至能讲述一个爱情故事～让我们开始今天的JS学习吧！💕
💻 JavaScript的基础：弱类型与对象
首先，我们得了解一下JavaScript的特性：
- 弱类型语言：变量类型由值决定，不需要提前声明类型
- 动态语言：运行时才确定数据类型
- 灵活的脚本语言：前后端都能运行
- 面向对象：通过对象来抽象现实世界
// 申明了对象常量
// 内存中开辟了一个空间，里面存放了一个对象
// hxt 取址 & 变量名是地址的标记
// js是弱类型语言 变量的类型由值决定
// = 赋值 Object
// 对象字面量(字面意义上) JSON
// JS 太灵活，不需要new， 通过{}拿到对象 [] 拿到数组
const hxt = {
name: '小黄',
age: 20,
tall: 187,
hometown: '山东临沂',
isSingle: true
};
没错！在JavaScript的世界里，一个人就是一个对象！🤯 而且不需要那些繁琐的new Person()之类的操作，直接用花括号{}就能创造一个人！天呐，要是现实生活中造人这么简单，那岂不是...（打住打住，这个笑话有点危险 🙊）
🌸 代理模式：暗恋的小美
让我们来看看主角彭老板的对象定义：
const pyc = {
name: '小彭', // key value String
age: 21, // Number 数值类型
hometown: '新余',
isSingle: true, // Boolean 布尔类型
// 送花
// 形参
sendFlower: function(girl) {
console.log(pyc.name + '给' + girl.name + '送了99朵玫瑰')
girl.receiveFlower(pyc)
}
}
而他暗恋的对象小美呢？
const xm = {
xq: 30, // 心情值，看来小美心情不太好呀
name: '小美',
room: '408',
receiveFlower: function(sender) {
console.log('收到了' + sender.name + '送的99朵玫瑰')
if (xm.xq > 90) {
console.log('硕果走一波') // 这里应该是撒狗粮的意思吧 🐶
} else {
console.log('gun ~~~') // 直接被轰走，惨兮兮 😭
}
}
}
小彭显然暗恋小美，但问题来了，小美心情不好的时候收到花会直接让送花人gun~~~（翻译：滚！）😱
🦊 聪明的代理：闺蜜小红出场
这时候，彭老板动了歪脑筋，找到了小美的闺蜜小红：
const xh = {
xq: 30, // 心情
name: '小红',
room: '408',
hometown: '新余', // 老乡！老乡！
// 送小美， 送小红，都具有receiveFlower 方法
// 对象互换
// 接口 interface
receiveFlower: function(sender) {
// 小红本来也想接收彭老板的花...（注释掉的代码暴露了真相 👀）
// if (sender.name === '彭奕淳') {
// console.log('彭哥哥，让我们在一起吧');
// return
// }
setTimeout(() => { // 定时器
xm.xq = 99;
xm.receiveFlower(sender)
}, 3000)
}
}
最后，彭老板执行了他的计划：
pyc.sendFlower(xh) // 彭老板给小红送花
🧠 嘿，这是个什么设计模式？
这个故事其实展示了一个经典的设计模式：代理模式(Proxy Pattern) ✨
在这个模式中：
- 小彭是客户端
- 小美是目标对象
- 小红是代理对象
小红和小美都实现了相同的receiveFlower接口，使得她们在小彭眼中是"可互换"的。但小红在内部做了一些额外的工作：等待小美心情好转后再转交礼物！
这就是面向接口的编程，是面向对象思想的高级体现，也是设计模式的精髓所在。小美和小红虽然是不同的对象，但因为都实现了相同的接口方法，所以在彭老板看来是可以互换的！🤓
🤔 为什么要用代理模式？
想象一下现实生活中的场景：
- 💖 暗恋情景：你不敢直接表白，找朋友帮忙试探对方态度
- 🛒 网购行为：你在某宝下单，但实际卖家可能是第三方
- 🔐 网络请求：浏览器向服务器发请求，可能经过各种代理服务器
软件系统的世界复杂得很，其实和现实世界是类似的。代理模式让你可以控制对一个对象的访问，在访问对象之前或之后执行一些额外的操作。
💡 JavaScript中的setTimeout
代码中还有一个有趣的知识点：setTimeout函数！
setTimeout(() => { // 定时器
xm.xq = 99; // 悄悄把小美的心情值改成99
xm.receiveFlower(sender) // 再把花转交给心情很好的小美
}, 3000)
这个函数让我们可以延迟执行某些操作，就像小红等待小美心情好转一样。在JavaScript这个单线程的世界里，这种异步操作简直太重要了！⏰
🔄 JavaScript的运行方式
按照readme.md中的说法，JavaScript有两种运行方式：
- 🖥️ Node.js：命令行中运行
node 1.js，在后端执行 - 🌐 浏览器：
- 通过HTML文档本地运行
- 通过HTTP协议远程访问
<!DOCTYPE html> <!-- 这是一个文档(doc)，type html(浏览器识别标签) -->
<html>
<!-- HTML5标准头 -->
</html>
最后的彩蛋 🎉
如果你仔细看注释掉的代码，你会发现小红其实也对小彭有好感！这段被注释的代码暗示小红本想自己接受彭老板的示爱，但最终还是选择了成全闺蜜...这才是真正的友谊啊！🥺
// if (sender.name === '彭奕淳') {
// console.log('彭哥哥，让我们在一起吧');
// return
// }
结语
通过这个简单的JavaScript故事，我们学习了：
- 对象和方法的基本概念
- 代理模式的实际应用
- 面向接口编程的思想
- 异步编程的基本用法
- JS的弱类型和灵活特性
JavaScript真的是太有趣了，它不仅能让我们写出有用的程序，还能讲述有趣的故事！没准哪天我还能用它来做个电子钢琴呢～🎹
下次再见！(●ˇ∀ˇ●)
