前言

在学习如何追女孩子之前，我们首先得认识如何利用合适的工具去追，这个工具就是我们接下来要讲的设计模式。

设计模式

JavaScript设计模式是一种在JavaScript编程中常用的重复性解决方案或模板。设计模式是为了解决特定问题而创建的经验丰富的解决方案，它们可以帮助你更有效地编写可维护、可扩展和可复用的代码。设计模式不是一种特定的语法或库，而是一种通用的思考方式，用于解决常见的编程问题。通俗来讲，就是完成某个功能之前，我们是否可以充分发挥情商再加上自己的码商使得代码变得更加合理化，更加优雅。这么说可能还是有点抽象，下面我会用一个简单的例子带领大家在追女孩子的同时搞懂何为设计模式。

在介绍案例之前我们首先得介绍一些基本知识

对象

科班的同学基本都知道Java中的“面向对象设计”，有时还笑谈自己都没有对象，还面向对象设计，哈哈哈。不过此对象可并非现实中的对象哦。在《JavaScript语言精粹》一书中是这样对对象进行描述的。JavaScript的简单类型包括数字、字符串、布尔值(true和false)、null值和undefined值，其他所有的值都是对象。数字、字符串和布尔值“貌似”对象，因为它们拥有方法，但它们是不可变的。JavaScript中的对象是可变的键控集合。在JavaScript中，数组是对象，函数是对象，正则表达式是对象，当然对象自然也是对象。简单来说，对象是用来存储属性的容器，每个属性有自己的名字和值或者方法。键-值-对。三个字就可以简单概括。

对象字面量

对象字面量--创建对象的另一种形式。一个对象字面量就是包围在一对{}中的0个或者多个“键/值”对。如果一个人是一个对象，那么他的年龄:20，性别:男，爱好:足球...就是对象字面量。对象是可以嵌套的，如下:

let Bin ={ 
    name:'Bin',
    age:21,
    friends:{
        name1:'HJW',
        name2:'GHJ',
        name3:'HWC'
    }
}

*OK，下面我们开始今天的主题，手把手教会你追女孩子

故事是这样的，我的好朋友小管暗恋他的女神小美很久，这次终于有了足够勇气向小美告白，他打算在双十一这一天给小美送上一束绚烂的玫瑰花。那么如何实现送花这样一个动作呢？*

在这里我们先定义一个对象XGuan,已知:XGuan年龄20，身高185cm，家乡江西宜春，“多财多亿”。 小美:年龄19，家乡江西南昌，喜欢跳舞。

const XGuan = {
    name:'小管',
    age:20,
    height:'185cm',
    hometown:'江西宜春',
    isSingle:true,
    money:'+∞',
    hobby:'摄影'
}

const XM = {
    name:'小美',
    age:19,
    hometown:'江西南昌',
    isSingle:true,
    hobby:'舞蹈'
}

那么，怎样才能实现送花这个动作呢。在上述在介绍对象的时候，已经知道了对象中可以存放方法。方法可以达到实现对应功能的目的,而实现方法我们通过函数来实现，下面我们在上面的对象中定义一个送花函数。

const XGuan = {
    name:XGuan,
    age:20,
    height:'185cm',
    hometown:'江西宜春',
    isSingle:true,
    money:'+∞',
    hobby:'摄影',
    sendFlowers:function(receiver){
        receiver.receiveFlower(this);
    }
    // 上述sendFlowers可以简写为
    //sendFlowers(){
    //    ....
    //}
}

既然小管可以通过送花函数实现达到送花的目的，那么我们理所当然的能想到小美这个对象内需要写了函数来接收花。如下

const XM = {
    name:'小美',
    age:19,
    hometown:'江西南昌',
    isSingle:true,
    hobby:'舞蹈',
    receiveFlowers(sender){
        // es6
        // es6 代码更优雅
        // 字符串模版
        console.log(`${this.name}收到${sender.name}的花`)

        // es5
        // 命令式代码太low 了
        // console.log(this.name + '收到' + sender.name + '送的花');
    }
}

如此我们便实现了送花和收花的功能。故事到此就结束了。可是，真的就这样结束了吗？如果小管就这样去追他的女神，八成是要泡汤了，充分发挥你的情商，想想怎样才能完美的让我们的小管同学追到心仪的女神而不被女神直接拒绝呢。下面我们引入JavaScript设计模式中一个很重要的模式--代理模式。

代理模式

JavaScript中的代理模式是一种结构型设计模式，它允许你提供一个代理或占位符对象，以控制对另一个对象的访问。代理对象充当另一个对象的接口，可以在不改变原始对象的情况下添加额外的功能，例如缓存、延迟加载、权限控制等。在JavaScript中，代理模式最常用到的两种方法是虚拟代理和缓存代理。

通俗来说就是找另一个帮忙以达到实现某个功能的目的，这就是代理模式。

下面我们引入小美的好闺蜜小红，已知小红能时刻知道小美当时的心情，我们用emotion表示小美的心情，当心情达到80以上，小美就很愿意陪小管去压马路，否则，此时小管告白，小美则会直接说“滚蛋，老娘没心情”。而如果小管通过小红来送花给小美，小美的心情并不会降低，而是每当小管送一次花，小美的心情就+10，当达到80以上，小美也会接受小管的邀请。（例子可能有点扯'蛋'，不过还是很生动形象的哈。哈哈哈）

小美：

const XM = {
    name:'小美',
    age:19,
    hometown:'江西南昌',
    emotion:60, //假设此时小美心情是60
    isSingle:true,
    hobby:'舞蹈',
    receiveFlowers(sender){
        console.log(`${this.name}收到${sender.name}的花`);
        if (this.emotion < 80) {
          console.log('老娘没心情，要他滚蛋');
        } else {
          console.log('万达走一波');
        }
    }
}

小红：

const XH = {
      name: '小红',
      hometown: '江西南昌',

      // 小红类似Java中所讲的接口 Interface ，小管通过小红来达到实现送花功能
      // 所以小红也得先收花，在送花，两个方法她都得有
      receiveFlower(sender) {
        // console.log('收到' +sender.name+'送的花');
        if (XM.emotion >= 80) {
          XM.receiveFlower(sender);
        }else{
          setTimeout(function () {
            console.log('2s后再送一次');
            XM.receiveFlowers(sender);
            XM.emotion = XM.emotion + 10;
            console.log(`此时小美的心情:${XM.emotion}`);
           },2000) // 这里假设过2s再送一次花。
        }
     }
}

那么此时小管送花的对象就应该变为了小红，我们测试一下上述代码：

上述代码还存在些许问题，输出结果undefined并未得到解决，本人萌新初来乍到，写文章当做是温习代码了，还请大佬多多指正错误。0.0

本人Gitee(还望大佬给仓库点个♥(ˆ◡ˆԅ)):codeSpace: 记录coding中的点点滴滴 (gitee.com)

参考文献

《JavaScript语言精粹》