JavaScript中的设计模式

设计模式，是针对特定问题，给出简洁而优雅的解决方案。
Javascript中常见的设计模式有很多种：
1.单例模式
2.策略模式
3.代理模式
4.迭代器模式
5.发布-订阅模式
6.命令模式
7.组合模式
8.模板方法模式
9.享元模式
10.职责链模式
11.中介者模式
12.装饰者模式
13.状态模式
14.适配者模式
在初学JavaScript时，先介绍三种设计常见的设计模式：

单例模式

也就是，使用一个构造函数生成的实例化对象。因为在平常的初始化构造函数时，几班是属性方法都完全相同，默认也是生成两个不同的构造函数，如此操作就会占用很多的的内存空间，降低了执行效率。
而单例模式所解决的问题就是：在同一个构造函数，能够生成同一个实例化对象。

单例模式原理：

判断这个构造函数是否使用过，如果使用过，返回之前的对象。如果没有使用过，就执行构造函数生成实例化对象。

代码实现：

	//1.创建一个构造函数，空的function CreatObj(){}//2.创建一个变量，原始数值可有可无（基本类型）let res=null;//3.创建单例模式函数function Singleton(){//	如果res中存储值为null，也就证明没执行过构造函数，可以第一次执行构造函数，将构造函数执行结果存入resif(res==null){res=new CreatObj();}//	存入构造函数的执行结果，也就是实例化对象//	最终返回结果是我们创建的变量return res;}//4.通过单例模式函数来生成实例化对象const obj1=Singleton();const obj2=Singleton();console.log(obj1==obj2)

结果：

组合模式

组合模式，通俗的讲就是通过一个‘遥控器’，来控制所有入口函数的执行。也就是我们能够用相同的方式去处理一个甚至多个对象。

代码实现:

先写三个构造函数，包含多个多个方法，而init（）入口函数控制了构造函数中所有方法的执行。

	class A{constructor(){}// 入口函数init(){this.a1();this.a2();this.a3();this.a4();}// 构造函数方法a1(){console.log('我是a1')}a2(){console.log('我是a2')}a3(){console.log('我是a3')}a4(){console.log('我是a4')}}class B{constructor(){}// 入口函数init(){this.b1();this.b2();}// 构造函数方法b1(){console.log('我是b1')}b2(){console.log('我是b2')}}class C{constructor(){}// 入口函数init(){this.c1();}// 构造函数方法c1(){console.log('我是c1')}}

组合模式

	class Compose{constructor(){this.arr=[];}add(obj){this.arr.push(obj)}execute(){this.arr.forEach(function(item){item.init();})}}const comp=new Compose();comp.add(new A());comp.add(new B());comp.add(new C());comp.execute();

在组合模式的构造函数中，通过add（）这个方法，将所有需要执行的构造函数的实例化对象加进数组，并在execute（）方法中，循环遍历得到每一个实例化对象，并且调用其中的入口函数，从而执行所有的方法。
结果：

发布-订阅模式

发布-订阅模式，又被称作为，观察者模式。

官方定义

的那个一个对象的状态发生改变时，所有依赖于这个对象的相关的对象，都要发送通知，并且根据程序的需求，主动更新数据。

作用

主要是解决主体与相关对象的功能的耦合，也就是主体对象的状态改变，相关个体，数据更新。

核心代码

需要一个观察者，抽象定义为一个对象{}
需要有个属性，也称消息盒子（要执行所有的事件）
需要一个on方法，向消息盒子中添加事件
需要一个emit方法，用于发布事件
需要一个off方法，删除已经添加的方法

观察者模式的构造函数

观察者模式——定义on方法

// on方法// 将需要执行的事件，写入on方法// 参数一：需要执行的事件类型// 参数二：需要执行的事件的内容on(type,fun){//需要执行的操作是函数// 将执行类型与事件写入message消息盒子中// 写入之前要判断，是否有重复的内容写入if(!this.message[type]){//消息盒子中没有这个属性，就进行创建this.message[type]=[fun];}else{// 消息盒子中，存在这个属性，就将这个内容放进去即可// 向事件类型中写入需要执行的内容this.message[type].push(fun)}}

观察者模式——定义emit方法

// emit 执行，可能是全部执行，也可能只执行一个// 参数一：需要执行的类型// 参数二：需要执行的内容（是不确定的）// 所以使用 合并运算符 ...形参emit(type,...arr){if(!this.message[type]){// 先判断这个类型，是否存在，不存在直接returnreturn;}else{// 类型存在，执行内容// 通过双层循环，遍历两个数组，如果里面有相同的就执行这个方法// 第一个数组 arr  第二个数组this.message[type]for(var i=0;i<arr.length;i++){for(var j=0;j<this.message[type].length;j++){if(arr[i]===this.message[type][j]){arr[i]();}}}}}

观察者模式——定义off方法

// off执行，删除这个消息盒子中，这个类型的，符合所有执行内容off(type,fun){if(!this.message[type]){// 先判断有没有这个类型，要是没有，就执行return，终止之后函数的执行return;}else{// 有这个类型，就删除相应的类型// 类型以数组存储，那么循环遍历数组，删除与之相同的for(let i=0;i<this.message[type].length;i++){if(fun===this.message[type][i]){this.message[type].splice(i,1);// 为了防止塌陷的操作i--;}}}}

观察者模式的添加（on）与执行（emit）

// 通过构造函数，生成实例化对象const obj=new Observer();function baba(){console.log('请老爸,下午2点到学校')}function mama(){console.log('请老妈,上午10点到学校')}function yeye(){console.log('请爷爷,下午3点到学校')}function jiancha1(){console.log('写给老师的检查')}function jiancha2(){console.log('写给主任的检查')}function jiancha3(){console.log('写给校长的检查')}obj.on('call',baba);obj.on('call',mama);obj.on('call',yeye);obj.emit('call',baba,mama,yeye);

结果：

在上面执行代码的基础上，进行off方法的执行

        obj.on('call',baba);obj.on('call',mama);obj.on('call',yeye);// obj.emit('call',baba,mama,yeye);obj.off('call',yeye);obj.off('call',mama);obj.emit('call',baba,mama,yeye)

结果：