JS设计模式简介

1、什么是设计模式?

设计模式是程序员针对特定问题, 给出的简洁而优化的处理方案。
一个设计模式 A，只能解决 A 类型的问题，针对 B 类型的问题, 设计模式 A 解决不了。同一个问题, 在不同的位置, 是不一定能用同一种方案解决
所以设计模式, 只在特定的情况, 特定的时期, 针对特定的问题使用。

2.常用的设计模式

• 单例模式：只允许存在一个实例的模式
• 组合模式：把若干个启动方式一样的构造函数放在一起，准备一个总开关, 总开关一启动, 那么这些构造函数就都启动了
• 观察者模式：又称发布订阅者模式，经典案例：事件监听，一个元素同时监听多个同类型事件，元素对象即为发布者，每一个事件处理函数即为订阅者
• 代理模式：代理模式（Proxy），为其他对象提供一种代理以控制对这个对象的访问，为了不暴露执行对象的部分代码
• 工厂模式：工厂函数就是做一个对象创建的封装，并将创建的对象return出去
• 策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换，从而避免很多if语句

3.上述的几个模式的具体应用原理及部分核心代码

单例模式

单例模式的简单应用

• 弹出层 alert() 比较丑, 用户体验极度不好
• 好多网站会使用一个自己写的 div 盒子, 当作弹出层
• 再自己写的过程中, 一个网站不可能只弹出一次
  不能每次弹出就创建一个 div
  每次弹出的都是之前创造好的那个 div, 只是文字改变了

// 单例模式 核心代码
function Person() {
   
this.name = 'Jack'
}
var instance = null
function singleton() {
   
if (instance === null) {
   
instance = new Person()
}
return instance
}

组合模式

应用场景

• 轮播图:
  基础版本的轮播图依靠定时器在左右移动
  一旦我切换页面以后, DOM 不动, 定时器在动, 等你再切换回来页面的时候就出问题了
  当我离开当前页面的时候, 应该关闭定时器，等我再次回到当前页面的时候, 应该再从新启动定时器
  一旦一个页面多个轮播图的时候, 我们就可以做一个组合模式
• 做一个总开关,离开页面的时候, 所有的轮播图都停止定时器
• 再做一个总开关, 回到页面的时候, 所有的轮播图再次启动

// 组合模式的代码
class Compose {
   
constructor () {
   
// 用来承载每一个实例的数组
this.composeArr = []
}
// 向数组里面添加内容
add (instance) {
   
this.composeArr.push(instance)
}
// 把数组里面的每一个内容调用了
init (