本篇将介绍以下几个比较常见的设计模式：

工厂模式
单例模式
代理模式
观察者模式
策略模式
模块模式
构造函数模式
混合模式

详情可以去往我的博客http://hzcann.xyz/ 如果可以点个star⭐ 感谢！！！

一、工厂模式

工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂，工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂，接下来，将对简单工厂和工厂方法在JavaScript中的运用举个简单的例子：

1. 简单工厂

简单工厂模式又叫静态工厂模式，由一个工厂对象决定创建某一种产品对象类的实例，主要用来创建同一类对象

比如说，在实际的项目中，我们常常需要根据用户的权限来渲染不同的页面，高级权限的用户所拥有的页面有些是无法被低级权限的用户所查看，所以我们可以在不同权限等级用户的构造函数中，保存该用户能够看到的页面。

let UserFactory = function(role){
function SuperAdmin(){
this.name ='超级管理员',
this.viewPage =[ '首页','用户管理','订单管理','应用管理'，'权限管理']
}
function Admin(){
this.name ='管理员',
this.viewPage = ['首页','订单管理','应用管理']
}
function Normaluser(){
this .name ='普通用户',
this.viewPage=['首页'，'订单管理']
}
switch (role){
case 'superAdmin':
return new SuperAdmin();
break;
case 'admin':
return new Admin();
break;
case 'user':
return new Normaluser();
break;
default:
throw new Error('参数错误,可选参数:superAdmin、admin、user'}
}//调用
let superAdmin = UserFactory('superAdmin');
let admin = UserFactory('admin')
let normalUser= UserFactory('user')

总结：在上面的例子中，UserFactory就是一个简单工厂，在该函数中有3个构造函数分别对应不同的权限的用户，当我们调用工厂函数时，只需要传递superAdmin, admin, user这三个可选参数中的一个获取对应的实例对象

优点：简单工厂的优点在于，你只需要一个正确的参数，就可以获取到你所需要的对象，而无需知道其创建的具体细节;

缺点：在函数内包含了所有对象的创建逻辑(构造函数)和判断逻辑的代码，每增加新的构造函数还需要修改判断逻辑代码，我们的对象不是上面的3个而是30个或更多时，这个函数会成为一个庞大的超级函数，便得难以维护，简单工厂只能作用于创建的对象数量较少，对象的创建逻辑不复杂时使用。

2. 工厂方法

工厂方法模式的本意是将实际创建对象的工作推迟到子类中，这样核心类就变成了抽象类，但是在JavaScript中很难像传统面向对象那样去实现创建抽象类，所以在JavaScript中我们只需要参考它的核心思想即可，我们可以将工厂方法看作是一个实例化对象的工厂类

比如说上面的例子，我们用工厂方法可以这样写，工厂方法我们只把它看作是一个实例化对象的工厂，它只做实例化对象这一件事情，我们采用安全模式创建对象

总结：在简单工厂中，如果我们新增加一个用户类型，需要修改两个地方的代码，一个是增加新的用户构造函数，一个是在逻辑判断中增加对新的用户的判断，而在抽象工厂方法中，我们只需要在UserFactory.prototype中添加就可以啦。

二、单例模式

定义：是保证一个类只有一个实例，并且提供一个访问它的全局访问点。

需求：一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。

实现：用一个变量标识当前是否已经为某个类创建过对象，如果是，则在下一次获取这个类的实例时，直接返回之前创建的对象。

优点：

可以用来划分命名空间，减少全局变量的数量
可以被实例化，且实例化一次，再次实例化生成的也是第一个实例

下面举个例子，在js中，我们可以使用闭包来创建实现这种模式：

总结：在上面的代码中，我们可以使用single.getInstance来获取到例，并且每次调用均获取到同一个单例。

在我们平时的开发中，我们也经常会用到这种模式，比如当我们单击登录按钮的时候，页面中会出现一个登录框，而这个浮窗是唯一的，无论单击多少次登录按钮，这个浮窗只会被创建一次，因此这个登录浮窗就适合用单例模式。

三、代理模式

代理模式主要是为其他对象提供一种代理以控制对这个对象的访问，主要解决在直接访问对象时带来的问题。

比如说：要访问的对象在远程的机器上，在面向对象系统中，有些对象由于某些原因(比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问)，直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。

代理模式最基本的形式是对访问进行控制，代理对象和另一个对象(本体)实现的是同样的接口。

实际上工作还是本体在做，它才是负责执行所分派的任务的那个对象或类，代理对象所做的不外乎节制对本体的访问，代理对象并不会在另一对象的基础上添加方法或修改其方法，也不会简化那个对象的接口，它实现的接口与本体完全相同，所有对它进行的方法调用都会被传递给本体。

总结：在上面的代码中，Proxy可以控制对真正被代理对象的一个访问。在代理模式中，比较常见的就是虚拟代理，虚拟代理用于控制对那种创建开销很大的本体的访问，它会把本体的实例化推迟到有方法被调用的时候。

比如说，现在我们假设PublicLibrary的实例化很慢，不能在网页加载的时候立即完成，我们可以为其创建一个虚拟代理，让它把PublicLibrary的实例化推迟到必要的时候，比如说我们在前端中经常用到的图片懒加载，就可以用虚拟代理;

四、观察者模式

如果大家学过一些像vue，react这些框架，相信大家对观察者模式一定很熟悉，现在很多mvvm框架都用到了观察者模式这个思想，观察者模式又叫做发布—订阅模式。

它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知和更新，观察者模式提供了一个订阅模型，其中对象订阅事件并在发生时得到通知，这种模式是事件驱动的编程基石，它有利益于良好的面向对象的设计

定义：对象间的一种一对多的依赖关系。

需求：当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知。

优点：时间上的解耦，对象之间的解耦。

实现：

指定好谁充当发布者;
给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者;
发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

下面举个例子，比如我们给页面中的一个dom节点绑定一个事件，其实就可以看做是一种观察者模式：

总结：在上面的例子中，需要监听用户点击 document.body 的动作，但是我们是没办法预知用户将在什么时候点击的，因此我们订阅了 document.body 的 click 事件，当 body 节点被点击时，body 节点便会向订阅者发布 "Hello World" 消息。

五、策略模式

策略模式指的是定义一些列的算法，把他们一个个封装起来，目的就是将算法的使用与算法的实现分离开来，避免多重判断条件，更具有扩展性。

下面也是举个例子，现在超市有活动，vip为5折，老客户3折，普通顾客没折，计算最后需要支付的金额，如果不使用策略模式，我们的代码可能和下面一样：

在上面的代码中，我们需要很多个判断，如果有很多优惠，我们又需要添加很多判断，这里已经违背了刚才说的设计模式的六大原则中的开闭原则了，如果使用策略模式，我们的代码可以这样写：

总结：在上面的代码中，通过策略模式，使得客户的折扣与算法解藕，又使得修改跟扩展能独立的进行，不影到客户端或其他算法的使用。

当我们的代码中有很多个判断分支，每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变，这个时候就可以使用策略模式，可以改进我们代码的质量，也更好的可以进行单元测试。

六、模块模式

模块模式可以指定类想暴露的属性和方法，并且不会污染全局。采用闭包的形式，实现如下：

var Person = (function() {var name = 'xxx'function sayName() {console.log(name)}return{name: name,sayName: sayName}
})()

七、构造函数模式和混合模式

构造函数和混合模式就是js中继承的两种实现方式，前者通过构造函数的形式定义类，通过new新增实例。而后者是将构造函数的引用属性和方法放到其原型上，子类是父类原型的一个实例。

查看个不错的文章

前端常用设计模式 - 简书 (jianshu.com)

前端常用几种设计模式相关推荐

Java常用10种设计模式详解
一.单例模式单例模式属于创建型模式,解决某个类频繁的创建与销毁.该模式保证了其对象在JVM中只有一个实例对象存在.必须保证私有化构造函数,只能有一个实例对象存在. 优点: 减少new关键字的使用,降 ...
php常用几种设计模式的应用场景
1.单例设计模式所谓单例模式,即在应用程序中最多只有该类的一个实例存在,一旦创建,就会一直存在于内存中! 单例设计模式常应用于数据库类设计,采用单例模式,只连接一次数据库,防止打开多个数据库连接. ...
常用八种设计模式，怒肝21000字，常用设计模式看这一篇就够了
文章目录设计模式分类七大原则单一职责原则开闭原则里氏替换原则接口隔离原则依赖倒置原则合成复用原则迪米特法则单例懒汉式: 饿汉式: 线程安全版懒汉式工厂模式简单工厂模式: 工厂 ...
安卓常用6种设计模式总结
转载自https://blog.csdn.net/u012583459/article/details/47079529 和https://blog.csdn.net/u012583459/artic ...
【设计模式】常用9种设计模式详解
单例(Singleton)模式为了节省内存资源.保证数据内容的一致性,对某些类要求只能创建一个实例,这就是所谓的单例模式. 单例模式的定义:一个类只能有一个实例,且该类能自行创建这个实例的一种模式. ...
前端开发中常用的几种设计模式
设计模式概览设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案.设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式.学习设计模式更多的是理解 ...
JS中常用的几种设计模式
js常见的几种设计模式单例模式: 组合模式观察者模式(发布订阅模式) 策略模式模块模式代理模式外观模式单例模式: 概念: 单例模式定义了一个对象的创建过程,此对象只有一个单独的实例,并提供 ...
前端需要了解的9种设计模式
什么是设计模式? 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案.设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式.学习设计模式更多的是 ...
java设计模式中不属于创建型模式_23种设计模式第二篇：java工厂模式定义：工厂模式是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式...
23种设计模式第二篇:java工厂模式定义: 工厂模式是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 工厂模式主要是为创建对象提供过渡接口, ...

前端常用几种设计模式