设计模式:针对 特定问题, 给出的简洁而优化的处理方案
下面主要介绍三种设计模式:
单例模式:让一个构造函数只有一个实例对象
function Person() {
this.name = 'Jack'
}
// 全局
var instance = null
function singleton() {
if (instance === null) {
instance = new Person()
}
return instance
}
var p1 = singleton()
var p1 = singleton()
console.log(p1 === p2) // true
组合模式:
实现组合模式的三个条件: 1. 需要一个承载所有构造函数实例的数组 2. 需要一个方法, 向数组里面添加内容 3.需要一个方法, 能把数组里面的所有内容启动了
// 一个构造函数的启动方式
class Play {
constructor () {}
// 这个构造函数的启动方法
init () {
console.log('开始l')
this.a()
this.b()
this.c()
}
a () {}
b () {}
c () {}
}
// 第二个构造函数
class Eat {
constructor () {}
init () {
console.log('开始2')
}
}
class Sleep {
constructor () {}
init () {
console.log('开始3')
}
}
// 组合模式的代码
class Compose {
constructor () {
// 用来承载每一个实例的数组
this.composeArr = []
}
// 向数组里面添加内容
add (instance) {
this.composeArr.push(instance)
}
// 把数组里面的每一个内容调用了
init () {
console.log('总开关启动了')
this.composeArr.forEach(item => item.init())
}
}
// c 就是一个总开关
var c = new Compose()
// 每一次执行 add 方法就是向总开关上添加内容
c.add(new Play())
c.add(new Eat())
c.add(new Sleep())
// 只要我的总开关一启动
// 里面的每一个构造函数就同时都启动了
c.init()
console.log(c)
观察者模式:又称发布订阅者模式
目的: 1. 让 观察者 看着 被观察者, 只要数据改变了 2. 就让 观察者 做一些事情
// 1. 被观察者
class Student {
constructor () {
// 一个学生本身的状态, 就应该是好好学习
this.state = '好好学习'
// 准备一个数组
// 谁在检时者这个学生, 就放在数组里面
// 将来一旦状态从 好好学习 变成 玩手机的时候, 应该让这个 [] 里面的所有老师触发技能
this.observers = []
}
// 方法
// 1. 可以改变状态的方法
setState (value) {
this.state = value //value 改变自己的状态
this.notify()
}
// 2. 获取自己的状态
getState () {
return this.state
}
// 3. 添加观察着
// 向 this.observers 里面追加一个看着这个同学的人
attach (observer) {
this.observers.push(observer)
}
// 4. 通知 this.observers 数组里面的每一个人, 状态改变了
notify () {
this.observers.forEach(item => item.qingjiazhang( this.state ))
}
}
// 2. 观察者,等待被触发
class Observer {
// constructor 就相当于 es5 的构造函数体 => 构造器
constructor (name) {
// 用它来标明一下我是班主任还是年级主任还是教务主任
this.name = name
}
// 方法, 就是这些老师能触发的技能
qingjiazhang (state) {
console.log(`我是 ${ this.name }, 因为你 ${ state } 了, 我要请你家长来!`)
}
}
var xiaoming = new Student() // 被观察者
var banzhuren = new Observer('班主任') // 观察者
var jiaowuzhuren = new Observer('教务主任') // 观察者
var nianjizhuren = new Observer('年级主任') // 观察者
// 让班主任看着小明
xiaoming.attach(banzhuren)
// 让教务主任看着小明
xiaoming.attach(jiaowuzhuren)
// 让年级主任看着小明
xiaoming.attach(nianjizhuren)
// 当小明状态改变的时候
// xiaoming.setState() 就能改变 小明 现在的状态
// 就会触发 xiaoming.notify()
// 就会把 xiaoming.observers 这个数里里面的每一个对象的 请家长技能调用
xiaoming.setState('玩手机') // 对象调用方式, this -> 点前面是谁就是谁
家中逆战,无畏疫情!