你能看懂的 JavaScript 设计模式!(1)我看看怎么个事儿?

大家好,这里是 Murlin,一个专注前端开发的老程序员,分享的每篇文章都是为了帮助你更好的理解前端知识。

我们的口号是:没有..哦不对,是拯救头发!

一、系列文章的说明

首先,这是一个系列的文章,大家也知道我们不可能通过短短一篇的推文就能掌握设计模式,当然我倒是希望靠一篇文章就能火起来,哈哈哈哈,所以我会合理的把内容分开到几篇文章中去,希望大家能够循序渐进的学习。

文章的内容主要依赖由腾讯团队出版的《JavaScript 设计模式与开发实践》一书,也穿插有我个人的理解与开发的经验。

知道大家不爱看书,没关系,看我的文章就好,主打一个浅显易懂、老少咸宜。

我会一点点的从基础入手,也包含了面向对象、函数式编程等相关的内容,都是为了更好的学习设计模式,请大家不要心急,一点一点的去看,去感受和理解。

好了,希望能给大家带来更多的帮助,那么就开始正文吧~

二、什么是设计模式?

我们拿追女孩来举例,带大家回到青春期,让我们一起回到那个懵懂的年纪。

夕阳照在窗帘上,透出橘黄色的光,你的同桌小美的马尾辫末梢也闪烁着温暖的色彩,你的心开始有了悸动,少年准备行动起来,去捕捉年少最美好的回忆...

那么,大家都是怎么行动的呢,写纸条?带早餐?那么为什么会这么做呢?是不是因为班级里其他的同学就是这么下手的呢,又或者是看明晓溪的青春小说学的呢🤭

其实诸如写纸条、带早餐等等方式,都算是当年追女孩的标准「套路」,这样的套路其实就是一种模式,我们可以叫它「青少年纯情模式」。

也有一些小伙伴喜欢「喜欢她就欺负她」这一套,揪辫子、放虫子等等,这样的路数当然也是一种追女孩的模式,我们可以叫它「放荡不羁欲情故纵模式」。

大家可能有点感悟了,其实所谓的模式,指的就是解决某种特定的问题的解决方案 。那么回到代码开发中来,所谓的设计模式,指的就是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案

敲黑板咯,大家注意,是简洁而优雅的解决方案,为了追女孩趴人家墙头偷窥可不是什么好的模式,不被人当变态抓起来都算运气好。

简而言之,设计模式就是大家在码代码的时候,会碰到一些相似的高频的问题,最后发现用某种方法解决起来又轻便、性能又好,于是就给这种方法起了个名字而已。

所以我们学习设计模式,其实就是在学习这些前辈们早已实践过千遍万遍证明非常靠谱非常 Nice的编程方法而已

设计模式通常都会有个响亮的名号,相信大家也了解不少:「装饰器模式」、「发布订阅模式」、「观察者模式」等等。

设计模式的名字很重要,更多的是为了沟通起来更方便、效率更高,比如我们在玩 LOL 的时候,如果上单的优势比较大,往往会采用「四一分推」的战斗方式,这个时候只要在对内交流的时候说一下「四一分推」,大家就都知道什么意思了,完全不需要完整的说出来:

我(上单)自己一个人带上路,你们四个抱团推中或下,别被单抓,对面来抓我的时候你们就推塔或者拿龙,不要绕地板。

这样可能还没打完字,仅有的优势就荡然无存了。

三、为什么要学习设计模式?

在上面我们已经知道设计模式是前人经验的集合了,对设计模式做更深入的学习可以让我们站在「巨人」的肩膀上,走的更远。

尤其是当我们遇到一个问题的时候,我们冥冥中觉得这个问题出现的几率很高,说不定别人也遇到过这样的问题,并且已经整理好并且取了名字叫 XXX 模式,那么我们再回看一下设计模式也许问题就会迎刃而解了。

设计模式往往会被一些人认为有些华而不实,并且明明用普通方法就能解决问题,反而使用设计模式后会增加额外代码,其实从某些角度来看虽然在实现的时候,设计模式确实有可能会多写一些代码,但是大家知道,我们在码代码的时候还要考虑代码的可复用性和可维护性的。

就像我们要把一些杂物放入空房间的时候,最简单的办法当然是直接一股脑的扔进去,但是随着东西越来越多,我们要找到某一个物品的时候往往会很麻烦。

那么我们在开始的时候如果选择去放一些柜子或者架子,其实可能是个更好的选择,那么柜子虽然会带来成本,但是可以在维护阶段带来更多的好处,那么使用柜子存放东西的规则,或许就是一种模式。

四、告一段落

好了,那么我们已经了解了什么是设计模式以及为什么学习设计模式是必要的,请大家关注下一篇系列文章,感谢大家观看,比心ღ( ´・ᴗ・` )比心。

哦,对了,今天刚学了个单词,比心 -> fingerheart分享给大家,哈哈哈哈。

相关推荐
Vincent(朱志强)9 分钟前
设计模式详解(十二):单例模式——Singleton
android·单例模式·设计模式
GDAL9 分钟前
vue3入门教程:ref函数
前端·vue.js·elementui
GISer_Jing17 分钟前
Vue3状态管理——Pinia
前端·javascript·vue.js
好开心3332 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo42 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工2 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
诸葛悠闲2 小时前
设计模式——桥接模式
设计模式·桥接模式
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员