likes
comments
collection
share

JS设计模式:敲代码还不会追女孩子?受不了一点!-小白篇

作者站长头像
站长
· 阅读数 125

前言

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

在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)

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

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

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

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

转载自:https://juejin.cn/post/7293471490669641765
评论
请登录