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

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

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

一、系列文章的说明

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

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

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

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

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

二、什么是设计模式?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、告一段落

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

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

相关推荐
JosieBook2 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端1 小时前
claude code 原理分析
前端
GalaxyMeteor1 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮1 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0071 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon1 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible1 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js