JS设计模式：敲代码还不会追女孩子？受不了一点！-小白篇

前言

什么？设计模式居然能手把手教我追女孩子？

在JavaScript中，设计模式是为了提高代码的可重用性、可读性和可靠性，以及降低耦合度和复杂度。设计模式可以使代码编写真正工程化，是软件工程的基石脉络。

JavaScript强大的表现力，让我们在面向对象编程时也得心应手。今天我们就从一个有趣的案例出发，手把手教你如果把心爱的女孩追到手，如何学习JavaScript中的设计模式。

总览

1. 对象-JavaScript语言精粹
2. 对象字面量
3. 数据类型
4. 代理模式
5. 补充

正文

首先，我们的男主人公，沸羊羊登场！！！这里我们就拿到沸羊羊这个对象。

在学习的过程中呢，我们也要学习一个概念和思想:

1.对象-JavaScript语言精粹

在JavaScript中，对象（Object）是一种抽象 的概念，它代表了现实世界中的实体 或行为。在面向对象编程中，对象被视为具有状态（属性）和行为（方法）的实体。对象之间可以通过消息进行通信和交互，以实现特定的功能和行为。

对象本质是？=属性+方法 ,在JavaScript中以键值对的形式对对象进行声明。

const Fyy ={
    name:'沸羊羊',
    age:25,
    hometown:'大肥羊村',
    inSingle:true//是否单身
}

这里我们用const声明了一个Fyy的对象，他的名字是叫做沸羊羊，"芳龄"25岁，老家大肥羊村，目前单身!!!

我们获取一下沸羊羊的基本信息：

console.log(Fyy)
输出：{ name: '沸羊羊', age: 20, hometown: '大肥羊村', inSingle: true }

这样我们就获取了沸羊羊的基本信息了

2.对象字面量

在JavaScript中，对象字面量（Object Literal）是一种创建对象的方式，通过在**大括号{}**内定义属性和方法来实现。对象字面量语法包括以下几个部分：

• 属性名：对象的属性名可以是字符串、数字或符号，用于描述对象的特征。
• 属性值：对象的属性值可以是任何数据类型，包括数字、字符串、布尔值、数组、函数、其他对象等。
• 属性分隔符：使用逗号分隔不同的属性。

然而啊，我们的沸羊羊目前很苦恼啊，自己都25了，奔30的人了，还没有对象，这算怎么个事？幸好同村有个村花，人美心善，美羊羊，我们的沸羊羊很是心动啊！于是背地里偷偷了解了一下美羊羊的一些基本信息:

const Myy ={
    name:'美羊羊',
    age:20,
    hometown:'大肥羊村',
    inSingle:true//是否单身
}

这敢情好啊！年轻漂亮又单身，我们的沸羊羊一下子就心脏扑通扑通跳啊，想着自己也不赖啊，心里就琢磨着，怎么把她追到手~

在这里我们再学习一个内容！

3.数据类型

在JavaScript中，数据类型可以分为两类：简单数据类型（基本数据类型）和复杂数据类型（引用数据类型）。

1.简单数据类型（基本数据类型）： 这些是不可更改的数据类型，包括：

• Number：任何数值，包括整数和浮点数。
• String：一系列字符的集合，用于表示文本。
• Boolean：逻辑实体，可以是 true 或 false。
• Null：表示缺乏值或没有值。
• Undefined：在声明后未被初始化的变量的类型是 Undefined。
• BigInt：可以表示任意大的整数。
• Symbol：一个唯一且不可变的数据类型，经常被用作对象的键值。

2.复杂数据类型（引用数据类型）：这些是可以包含多个值的数据类型，包括：

• Object：包含键值对的实例数据类型。
• Array：具有可变长度的有序值列表。
• Function：可调用的功能单元，也称为函数对象。

这些数据类型在JavaScript中非常重要，因为它们决定了如何处理和操作数据。例如，简单数据类型可以被直接进行算术操作，而复杂数据类型则需要通过引用来进行操作。

好了，沸羊羊要怎么样才能把美羊羊追到手呢？聪明的沸羊羊就想到了送花！

那么在JavaScript中，要怎么实现送花这个效果呢？

const Fyy ={
    name:'沸羊羊',
    age:20,
    hometown:'大肥羊村',
    inSingle:true,//是否单身
    SendFlower:function(receiver){
        s
    }
}

没错，就是定义了方法，沸羊羊有了送花的方法之后啊，花要送给谁呢？所以我们在function中加入了一个receiver形参 -收花的人，而这个形参也是个对象，因为沸羊羊要送花的人也是个对象！

那么，我们要如何确保美羊羊收到了花呢？没错，也是定义一个方法:

const Myy ={
    name:'美羊羊',
    age:20,
    hometown:'大肥羊村',
    inSingle:true,//是否单身
    receiveFlower:function(sender){
        console.log(this.name+"收到了"+sender.name+"的花")
    }
}

当然，我们定义一个收花的方法，我们总不能凭空收花吧，所以啊，我们也需要一个形参，来表示谁送的花，也是个对象！

console.log(Fyy.SendFlower(Myy))
输出：
美羊羊收到了沸羊羊的花 
undefined

到这里，我们沸羊羊啊，就能成功把花送到美羊羊手中了。

可是！！！事实真的有那么简单吗？？我们美羊羊酱会那么随随便便就收你的花吗？本人就送花就显得有那么点尴尬 了！而且，我们的沸羊羊可是个内向 boy，这里就不好自己亲自提枪上阵了，这个时候，就轮到我们工具人懒羊羊出场了！

const Lyy = {
    name:'懒羊羊',
    age:21,
    hometown:'大肥羊村',
    inSingle:true,//是否单身
    //method  接口 Interface 
    //代理模式
    receiveFlower(sender){
        // 对代码进行重写
        myy.receiveFlower(sender)    
    }
}

懒羊羊是我们美羊羊的好朋友啊，由他拿着我们沸羊羊的花去送给美羊羊，自然不就水到渠成了！

这里，我们又可以学到两个新东西!

4.代理模式(面试题考)

在JavaScript中，代理模式 是一种设计模式 ，它允许你在不直接访问 对象的情况下，对一个对象执行操作。代理模式涉及到一个单独的对象（即代理）来控制对另一个对象的访问。

代理模式的主要目标是将对象的行为和状态封装在代理对象中，从而实现对原始对象的间接控制。这种模式允许我们在不修改原始对象的行为和状态的情况下，增强或修改对象的行为。

代理模式可以有多种实现方式，包括静态代理和动态代理。静态代理是通过创建代理对象和被代理对象的实例来实现的，而动态代理则是通过在运行时动态创建代理对象来实现的。

接口：

在 JavaScript 中，接口的概念并非语言本身的一部分，但它是面向对象编程中的重要概念。

实现同样方法的对象(实现了同样的接口)，就可以互换使用,代理模式。方法重写！！

面向对象编程->面向接口编程

好了，我们实现一下，让"中间人"给我们的沸羊羊送花！

console.log(Lyy.receiveFlower(Fyy))
输出：
美羊羊收到了沸羊羊的花
undefined

到这里，还没完！！美羊羊小姐有时候这个心情郁闷啊，这个时候，你给她送花，她肯定就拒之门外，这个时候，送花就得找一个好时机，当我们美羊羊小姐心情好的时候，再送花！这不就欣然接受吗！直接拿下！，当然，作为我们首席助攻懒羊羊，他当然知道我们的美羊羊桑啥时候心情好，找准时机，精准出击！！！这样我们就可以这样设计一下我们的代码了：

const Myy ={
    name:'美羊羊',
    emotion:50,//心情
    age:20,
    hometown:'大肥羊村',
    inSingle:true,//是否单身
    receiveFlower:function(sender){
        console.log(this.name+"收到了"+sender.name+"的花")
        if(this.emotion<80)
                {
                    console.log("本宫没心情,打出去")
                }else{
                    console.log('万达走一波')
                }
    }
}

我们给美羊羊桑添加一个心情属性，初始值为：50

心情大于80的时候：欸，我们接受送花，心情小于80的时候：本宫不想鸟你！

这个时候，美羊羊的心情不好！我们直接出手的话会造成什么后果呢？

console.log(Lyy.receiveFlower(Fyy))
输出:
美羊羊收到了沸羊羊的花
本宫没心情,打出去
undefined

没错啊，就是打出去！！这个时候，我们懒羊羊就得适当改变一下策略了！当美羊羊心情好的时候，我们再出手！

我们可以这样设计代码：

const Lyy = {
    name:'懒羊羊',
    age:21,
    hometown:'大肥羊村',
    inSingle:true,//是否单身
    //method  接口 Interface 
    receiveFlower(sender){
        // 对代码进行重写
        if(Myy.emotion>=80){
            Myy.receiveFlower(sender)
            }else{
                setTimeout(function(){
                    Myy.emotion=99
                    Myy.receiveFlower(sender)
                },2000)//定时器
            }   
    }
}

这里，我们就设计了一下，当美羊羊心情不好的时候，我们不送，当美羊羊心情好的时候我们再去给她送花，这不手到擒来嘛！

5.补充

在这些代码当中：

面向对象2.0 设计对象，完成接口设计，复杂流程 UML。

this 在对象体内，this代表的就是该对象名！所以我们能够直接调用 方法setTimeout()是JavaScript中的一个定时器方法。

我们也能利用es6中推出模板字符串，命令式代码对我们的代码进行优化

字符串模板(先编译再执行)${}表示一个变量的占位符,命令式代码变为表达式代码!!!，可读性更好。

我们可以这样这样设计美羊羊对象：

const Myy ={
    name:'美羊羊',
    emotion:50,//心情
    age:20,
    hometown:'大肥羊村',
    inSingle:true,//是否单身
    receiveFlower:function(sender){
        // console.log(this.name+"收到了"+sender.name+"的花")
        //这里用字符串模板进行优化
        console.log(`${this.name}收到${sender.name}的花`)
        if(this.emotion<80)
                {
                    console.log("本宫没心情,打出去")
                }else{
                    console.log('万达走一波')
                }
    }
}

 console.log(this.name+"收到了"+sender.name+"的花")
 在es6中可以用如此的字符串模板进行优化，更加美观
 console.log(`${this.name}收到${sender.name}的花`)

同时：

我们声明方法的时候也可以这样声明
receiveFlower:function(sender)
用这一段代替：
receiveFlower(sender)

面向对象要能搞得定复杂的情况，设置相应模式来应对可能出现的所有特殊情况，与实际结合

好了，今天有关设计模式中的一些知识已经讲完了,我们主要学习的设计模式的这种思维

理解：流程 工作流 代码运行的过程 完整的流程，对代码进行架构

不知道大家学到的是代码知识还是脱单知识呢？如有错误，欢迎指正，也喜欢大家动动发财的小手，点个小小的赞！鼓励支持一下！！！