小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神

简介: 小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神

一年的工程师不怎么学,3年+ 的工程师一定要学的, 大项目宝典。

前言:

  • 设计模式是leetcode之外,顶级大厂代码能力的测试题。JavaScript设计模式为你提供了一种结构化的、可重复的方法来解决JavaScript开发中经常出现的问题。

今天我们来聊聊设计模式中的代理模式。我会使用通俗易懂的语言与生动有趣的例子,附上代码,带大家了解这一种设计模式~

正文:

在讲设计模式之前呢,先带着大家了解一种复杂的数据类型:对象。

对象

Javascript有着强大的表现力,而对象是Javascript的语言精粹。

对象的本质是 属性 + 方法。对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 name:value 对呈现。现在我们举出一个例子,来让大家了解对象。

const xjun = {
            name: '小菌', // key value  姓名
            age: 18,   // 年龄
            hometown: '南昌',   // 住址
            isSingle: true   //是否单身
            }

我们使用对象字面量的方法创建了一个对象实例 junjun,并赋予了几个属性, name, age, hometown,isSingle,而在属性的冒号后面,就是这些属性值了,例如 '小菌', 18。

  • . 对象字面量:JavaScript中创建一个自定义对象有两种方法,一种是使用new,另一种是使用对象字面量形式。对象字面量是一个名值对列表,每个名值对之间用逗号分隔,并用一个大括号括起。 各名值对表示对象的一个属性,名和值这两部分之间用一个冒号分隔。

由上图可知,xjun已经18岁了,但是他还是单身状态啊,有一天,他在校园里对一个女生一见钟情,这个女生是校园里的女神,这里我们叫她xk(小可)

const xk = {
            name: '小可',
            age: 18,
            hometown: '南昌',
            emotion: 50
            }

对象的本质 : 属性 + 方法

小菌十分喜欢他的女神小可,但是怎么样才能跟小可谈恋爱呢?于是,再苦思良久之后,小菌想到了一个办法,那就是送花给她的女神。怎么样小菌才能送花给他的女神呢?这里我们在xjun这个对象里,写入一个送花的方法。

const xjun = {
            name: '小菌', // key value  姓名
            age: 18,   // 年龄
            hometown: '南昌',   // 住址
            isSingle: true,   //是否单身
            sendFlower(receiver){   //送花
                console.log(this);  //对象方法内部this 指向本身 
                //输出{name: '况君豪', age: 18, hometown: '南昌', isSingle: true, sendFlower: ƒ}
                receiver.receiveFlower(this);
            }

receiver作为函数的形参,这里应该传入一个对象进去,因为收花的人是对象,例如:xjun.sendFlower(xk)

小菌这个对象送花的方法写完了,那么女神小可怎么收到花呢?这里我们可以给xk这个对象写一个收花的方法,这样可以确保小可可以收到花,如下

const xk = {
            name: '小可',
            age: 18,
            emotion: 50,
            hometown: '南昌',
            receiveFlower(sender){
                 console.log(`${this.name}收到${sender.name}花`)
                 //这里使用字符串模板输出,使代码更加美观
                 if(this.emotion < 80){
                    console.log('滚');
                }
                else{
                    console.log('我们在一起吧');
                }
            }
            xjun.sendFlower(xk) //输出 小可收到小菌花

但是,大家也知道追女生容易被拒绝,何况还是女神级别的人物。这里我们注意xk.emotion,也就是小可的心情,当xk.emotion >= 80,小可才会收下小菌的花,并与之谈恋爱。但小菌怕被小美直接拒绝,这样很掉面子。这时候,小菌想到了一个办法,先把花交给小可的室友,室友可以观察小可的心情,在心情好的时候转送给下课。在这里的时候我们的思路就打开了,我们可以通过小可的室友间接去访问小可。

代理模式

在JavaScript中,代理模式是一种结构型设计模式,它允许通过代理对象控制对真实对象的访问,即通过代理对象间接访问真实对象。

在本文中,这个例子中的代理对象出现了。

const xh = {
            name: '小红',
            hometown: '南昌',
            // method  接口 Interface
            receiveFlower(sender){
                if(xk.emotion >= 80){
                    xk.receiveFlower(sender)
                }
                else{
                    setTimeout(function(){
                        xk.emotion = 99
                        xk.receiveFlower(sender)
                    },2000) //在2秒后,小可的心情变成99
                }
                xjun.sendFlower(xh) 
             //输出 小可收到小菌花
             //    我们在一起吧

             

这里我们定义xh这个对象,她是小可的室友小红,她跟小可有同样的方法,当小菌将花送给小红时,小红会观察小可的心情,当xk.emotion >= 80 时,将花转交给小可,这样小菌跟小可就可以在一起了!

而小菌先将花给小红,小红在将花转交给小可,我们称之为代理模式,实现了通过代理对象控制对真实对象的访问。

总结

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

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

相关文章
|
3月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
187 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
JavaScript 安全 前端开发
关于Node.js,一定要学这个10+万Star项目 !!
一篇关于Node.js的宝藏项目——Node.js Best Practices。该项目在GitHub上已有102k Star,汇集了100+条最佳实践,涵盖架构、安全、性能等多方面。每条实践不仅有简明说明和详细解释,还附带代码示例及资源链接。文中通过三个实战案例(利用CPU多核、避免阻塞事件循环、使用中间件处理错误)展示了其实际应用价值,并推荐了几条对前端转Node.js开发者特别有用的最佳实践。强烈建议每位Node.js开发者学习此项目,理解“怎么做”与“为什么要这么做”,以提升开发能力。
|
4月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
164 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
4月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
249 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
4月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
181 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
4月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
193 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
4月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
63 8
|
5月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
211 33
|
7月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
7月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
213 4