前端的设计模式系列-总结篇

windliang

发布于 2022-08-20 09:35:17

3320

从 1 月 6 号的第一篇设计模式文章策略模式，截止到 3 月 8 号的最后一篇基本原则，利用两个月的时间把二十三个设计模式都过了一遍，其中在平时开发中用到的都结合实际场景总结了一遍。

之所以开始总结设计模式，还是每篇文章开头所说的：

代码也写了几年了，设计模式处于看了忘，忘了看的状态，最近对设计模式有了点感觉，索性就再学习总结下吧。

大部分讲设计模式的文章都是使用的 Java、C++ 这样的以类为基础的静态类型语言，作为前端开发者，js 这门基于原型的动态语言，函数成为了一等公民，在实现一些设计模式上稍显不同，甚至简单到不像使用了设计模式，有时候也会产生些困惑。

设计模式最初的总结来自于 GoF 书，但书讲的比较晦涩，就不建议看了，GoF 名字的来源是：

★The authors of the DesignPatternsBook (opens new window)came to be known as the "Gang of Four." The name of the book ("Design Patterns: Elements of Reusable Object-Oriented Software") is too long for e-mail, so "book by the gang of four" became a shorthand name for it. After all, it isn't the ONLY book on patterns. That got shortened to "GOF book", which is pretty cryptic the first time you hear it. ”

大意就是本来的书名太长了，然后就简写为 book by the gang of four ，由四个作者共同写的，然后简写为 GoF 了，我们常说的「四人帮」设计模式。

总结过程中除了搜索出来的零星的文章，看的比较多的是下边几个：

Alloy Team 曾探的「JavaScript 设计模式开发与实战」，第一章的基础知识将 js 有别于其他语言的特性讲的很好，其中设计模式的一些例子也是作者业务开发中实际应用的。
张容铭的「JavaScript 设计模式」，虽然每个设计模式都讲了，但很多场景是虚构出来的，只是起到理解设计模式的作用，如果要看的话推荐先看曾探的。

上边两本共同的缺点是作者的时代还是在 jQuery ，举的例子也都还是在操纵 dom ， Vue/React 的时代到来后，平常开发中我们已经不去操纵 dom 了，这也是我为什么又总结了一遍的原因之一。

极客时间王争的设计模式之美，总结的很好，但遗憾的是更适合后端来看，很多场景也都是 java 开发中的场景。 http://gk.link/a/11c3E
一个 Youtube 帅哥总结的设计模式系列，这个比较新了，都是结合 ES6 语法，缺点还是没有开发中的实际场景。 https://www.youtube.com/watch?v=BWprw8UHIzA&list=PLZlA0Gpn_vH_CthENcPCM0Dww6a5XYC7f&index=2
还有一个大而全的网站，各种语言都实现了，很多设计模式总结的也非常棒，配图丰富。 https://refactoringguru.cn/design-patterns

设计模式的话，在平常开发中，其实都会有意无意的用到过，只是没有专门总结出来。通过总结，当遇到类似场景的时候，我们就可以更快的编写，提升编程效率。

但设计模式最忌讳的就是过度设计了，但这个度又很难把握，可以结合 KISS 原则，我们先以简单、快速的方式实现需求，然后当后边需要修改的时候，贯彻「再一再二没有再三」的原则，再对原有的代码进行重构。

我们也没必要完全去套设计模式，而是去理解它们共同的思想，保持初心--提升代码的可读性、可扩展性、可维护性，最终达到「还记着没有，我现在全忘了，忘得干干净净的了」的境界。