JavaScript设计模式详解：01、导学 - 好文

<>学习设计模式的重要性

无论你是前端程序猿、后端程序猿还是客户端程序猿，掌握设计模式都是你所必须要学会的一项技能。如果说你只会在那里呼呼呼的写代码，不懂得设计模式
那么你永远也没有办法成为一个合格的高级工程师，更别说是架构师了。

大家想一下你们心中的大牛，你有见过他们整天坐在这里撸代码吗？没有吧，他们大多数的时间都是在那想，想这个程序应该怎么设计，做好了设计之后才会去动手做架构，然后再交给下面的小弟去实现。他如何能够做到这些？就是因为他对各种设计思路了熟于心。从小程序猿到大牛架构师，从写好代码到做好设计，设计模式都会是你的必经之路。

举个例子，以《Thingking in Java》这本书为例，如果大家学习过java开发的话，那么一定会听说过这本书，《Thingking in Java》
作为Java的一个入门书籍，却能做到全球皆知，被誉为想要学好java的必读课程，凭借的是什么？就是因为《Thingking in Java》
的作者将面向对象的思想巧妙的融合在Java
的具体技术上，潜移默化的让你感觉到了一种新的语言和新的思想方式的诞生。这就是设计的作用，把平庸无奇的代码变成能给你带来新的思想的东西，这就是大神与普通程序员最大的区别，如果你也想成为大神，那么你就必须要学好设计模式。

<>论设计与模式

什么是设计模式啊？设计是设计，模式是模式，我们应该把它分开来看。

首先我们了解一下什么是设计。我们这里所说的设计不单单是指的设计某一款程序的架构，或者设计某个产品，某个UI，更不是你们公司设计师…
设计是一个非常广的概念，那么何为设计呢？

所为设计即为：对人造事物的构想与规划

相对于设计这样一个抽象的概念，对人造事物的构想与规划，这样一个具象的解释就要好理解的多。

小A是个厨师，有一天他需要去做一些包子，如果他按照以前的模具来直接把这个包子做出来，那么这就不是一个设计，这只是一个工作。而如果他希望能够
通过一些方法来解决包包子这么一个问题。这就是一个设计。

即：人造事物（小A包包子）的构想与规划（通过一些方法来解决包包子这么一个问题）
。这就是对一个设计的描述，但是有一点需要谨记，这里的构想与规划不是“天马行空”漫无目的的，他需要遵循一个标准或是规则，小A如果做出来一个月饼，那么它就不是包子了对吧。

这样的标准或规则，放到我们的程序设计之中其实就是的关于设计的四大准则，五大原则了。但是在这里我不打算把这些条条框框的东西都列举出来一个个说哈，我觉的这种方式不好，一个个说大家也都记不住，背下来也不会用。所以在这里我准备了比喻，期望可以使用这一个比喻来把何为设计解释清楚：

1、我们把一个程序想象成一个超市，程序中的设计，就是超市对于商品的摆放，每一个货架只会兜售一种类型的商品，它不会把杀虫剂和洗发水放到一个货架上去卖，就好像我们每个功能只负责处理一个特定的事情，而不会去尝试处理更多。
2、它的每个货架都可以随便移动，就好比我们的每一个模块都需要具有可移植性。

3、超市不会把同种类型的所有商品都摆放出来，它只会拿出来卖得最好的，适合绝大多数人的商品，至于剩下的那百分之一的用户，超市一般不会考虑，从而使超市快速运营，快速盈利，就像我们做程序，我们不可能在一开始就把所有的功能所有的点都想到，我们需要做的是如何满足大部分的需求，从而使我们的程序可以快速上线。

4、超市的所有商品都是面向用户的，所以他所有的商品摆放，所有的活动都是以用户为基础来做的，同理我们的程序是给机器看的，由程序员写的，面向用户来用的，仅从我们程序设计来说，最重要的就是第二步，由程序员来写，所以，你的代码可读性就非常重要，你一个方法名叫
a，谁知道是什么对吧，语义化的程序非常重要，不要忘记我们的程序是给机器看的，由程序员写的，面向用户来用的。

上面的比喻就是关于程序设计的四大准则，虽然内容有点多，但是我觉得这样更方便大家来记住，所谓四大准则就是：

* 让每个模块只做好一件事情
* 可移植性非常重要
* 小即是美，快速建立原型
* 语义化
而所谓五大原则就是：

* 单一职责原则
* 开放封闭原则
* 里式置换原则
* 接口独立原则
* 依赖倒置原则
而至于模式就是常说的那 23 种设计模式，这个我们会在后面跟大家详细说。

<>前端学习设计模式的困惑

对于现在的设计模式来说，网上的资料实在是太多啦。那么为什么还要单独出这么一门课呢？原因有三点：

* 首先是因为现在网上的大多数课程都是以java为基础来讲解的。java
这种强类型的面向对象语言确实是用来讲解设计模式的最合适的语言，但是如果是对于我们前端工程师来说，我们并不是很熟悉java
，那么它的这种方式，未免对我们不太友好。并且因为前端与后端主要负责的工作不同，对于设计模式的侧重点和具体的表现方式，也会很大的不同。
*
然后就是现在网上关于设计模式的资料，大部分都是直接把设计原则，设计模式，给你列出来，一个一个的记住就行了。这种方式，一是你容易忘，二是你就算背下来了你到时候你也不会用。
* 最后就是我们把这些设计模式记住了，但是我们不知道什么时候去用，甚至不知道应不应该用。
就是因为这些原因，才促使我去做了这一个系列的文章。意在让大家能够真正的学会，学懂设计模式。

<>课程设计

关于本次课程我打算分成三个部分来讲：

* 首先是UML类图。这个主要是为了方便我们在后面的目录中进行代码设计的时候能够使用UML
类图为大家进行统一表达。这个篇幅不会太长，会使用一章的内容为大家讲解。
* 然后设计的四大准则和五大原则，这个也会通过一章的内容来为大家讲解，讲解的时候会根据一个具体的问题，通过思路讲解 -> 绘制UML类图 -> 代码实现
这样的步骤来设计。
* 最后就是二十三种设计模式，这也是我们课程最主要的内容。在这里我会把这二十三种设计模式根据在前端的重要程度进行不同程度的讲解，可大致分为三种：
1. 非常重要 – 详细讲解
2. 一般重要 – 小篇幅讲解
3. 很少使用 – 略作了解
详细讲解的部分都会通过事例 -> 分析 -> UML类图 -> 代码实现这样的方式来讲解。
小篇幅讲解的部分会通过代码事例分析这样的方式来讲解。
略作了解的部分则只会了解定义。
<>本课程的作用

本课程精心设计，期望通过本课程的学习，能够给大家带来以下收获

* 掌握UML类图的绘制
* 掌握四大设计准则、五大设计原则、二十三种设计模式
* 提升程序设计能力
* 了解平常使用的开源库中存在的设计模式
<>学习本课程之前的技能

* 面向对象的思想
* JavaScript的基本语法
* ES6的基本语法
* 了解jQuery的基本使用
* 了搭建过npm、nodeJs环境
* 了解webpack的基础配置，至少知道它是干嘛滴
以上的这些知识，希望大家能够在学习本课程之前有所了解，在本课程中也会进行一些讲解，但不会特别多。

<>面向群体

本课程面向初步接触前端开发，或者有一些前端开发经验想要更进一步的工程师。

<>课程目录（已完成部分）

01、导学 <https://blog.csdn.net/u011068996/article/details/83114334>

02、UML类图 <https://blog.csdn.net/u011068996/article/details/83150146>

03、工厂模式 <https://blog.csdn.net/u011068996/article/details/83271751>

04、单例模式 <https://blog.csdn.net/u011068996/article/details/83310727>

05、适配器模式 <https://blog.csdn.net/u011068996/article/details/84105863>

06、装饰器模式 <https://blog.csdn.net/u011068996/article/details/84304768>

07、代理模式 <https://blog.csdn.net/u011068996/article/details/84304852>

08、外观模式 <https://blog.csdn.net/u011068996/article/details/84340992>

09、观察者模式 <https://blog.csdn.net/u011068996/article/details/85047076>

热门工具换一换