了解js设计模式
什么是设计模式?
针对 特定问题, 给出的简洁而优化的处理方案
一个设计模式 A
只能解决 A 类型的问题
针对 B 类型的问题, 设计模式 A 解决不了
同一个问题, 再不同的位置, 是不一定能用同一种方案解决
设计模式, 只在特定的情况, 特定的时期, 针对特定的问题使用
市场上常见的设计模式
- 单例模式
- 组合模式
- 观察者模式
- 适配器模式
- 代理模式
- 工厂模式
- 构建模式
单例模式
单: 单一, 一个, 独个
例: 实例(构造函数的实例化对象)
让一个构造函数一辈子只有一个实例对象
当你需要一个构造函数一生只能 new 出一个对象的时候
就可以使用单例模式.
单例模式的简单应用：
- 弹出层 alert() 比较丑, 用户体验极度不好
- 好多网站会使用一个自己写的 div 盒子, 当作弹出层
- 再自己写的过程中, 一个网站不可能只弹出一次
- 创造 div 并显示出来的构造函数
用代码来表示
组合模式
组合模式：
举例：
当你回家的时候， 你一打开门家里的所有东西就启动了, 灯会亮起来, 电视打开了, 空调打开了, 窗帘拉开了, …
组合模式:
把我们若干这启动方式一样的构造函数放在一起准备一个总开关, 总开关一启动, 那么这些个构造函数就都启动了
实现组合模式:
需要一个承载所有构造函数实例的数组
需要一个方法, 向数组里面添加内容
需要一个方法, 能把数组里面的所有内容启动了
应用场景
轮播图:
基础版本的轮播图依靠定时器再左右移动，一旦我切换页面以后, DOM 不动, 定时器在动, 等你再切换回来页面的时候就出问题了。当我离开当前页面的时候, 应该关闭定时器，等我再次回到当前页面的时候, 应该再从新启动定时器，一个页面只有一个轮播图, 那么没有问题，一旦一个页面多个轮播图的时候, 我们就可以整一个组合模式做一个总开关，离开页面的时候, 所有的轮播图都停止定时器，再来一个总开关，回到页面的时候, 所有的轮播图再次启动
观察者模式
又称 发布/订阅 模式
观察者角度：
就像我们小时候的班主任一样
班主任, 年级主任, 教务主任, 都有一个共同的能力叫做 请家长
他们就是暗中观察我们的人, 一旦我们做的事情和他们想的不一样, 就回触发技能
他们就是观察者, 当被观察者一旦出现变化, 立马触发他们的技能
被观察者：
就是一个学生, 你的状态就应该是 好好学习
一旦你的状态改变为 玩手机
立马就会通知正在观察着你的人, 观察着你的人, 就会触发技能
目的:
让 观察者 看着 被观察者, 只要数据改变了
就让 观察者 做一些事情