一、认识单利模式（设计模式）
- 设计模式：为了 实现某一类功能的一个简洁优化的写法
（一）单利模式
- 一个构造函数(类), 一生只能有一个实例化对象
（二）案例需求
- 一个构造函数, 在实例化对象时, 判断是否为第一次实例化
- 是第一次创建一个实例化对象, 然后返回
- 不是第一次想办法拿到第一次的实例化对象, 然后返回
（三）解决方法
- 拿一个变量, 初始值给一个null
- 在实例化对象时, 第一次实例化, 直接将实例化赋值给变量, 然后将变量返回
- 后续再实例化的时候, 直接返回刚才的变量
（四）核心代码
class Dialog {
constructor(title) {
console.log('创建一个弹出框插入到页面中, 类型为: ')
this.title = title
}
}
let instance = null
function newDialog(type) {
if (instance === null) {
instance = new Dialog(type)
}
return instance
}
const n1 = newDialog('警告')
console.log(n1)
const n2 = newDialog('文本')
console.log(n2)
二、单例模式变形
1、代码的问题
1. 全局多了一个变量instance
2. 传递多个参数 ，无法生效
3. 构造函数的类, 和实际使用创建的函数, 不是一个名字
2、通过闭包, 解决问题1
class Dialog {
constructor(title) {
console.log('创建一个弹出框插入到页面中, 类型为: ')
this.title = title
}
}
function fn(type) {
let instance = null
return function newDialog() {
if (instance === null) {
instance = new Dialog(type)
}
return instance
}
}
const n1 = fn('警告')
const res = n1()
console.log(res)
class Dialog {
constructor(title) {
console.log('创建一个弹出框插入到页面中, 类型为: ')
this.title = title
}
}
// 利用自执行函数 进一步优化
const newDialog = (function fn() {
let instance = null
return function inner(type) {
if (instance === null) {
instance = new Dialog(type)
}
return instance
}
})()
const n1 = newDialog('警告')
console.log(n1)
const n2 = newDialog('文本')
console.log(n2)
3、解决问题2：传递多个参数 ，无法生效
class Dialog {
constructor() {
console.log('创建一个弹出框插入到页面中, 类型为: ')
this.title = ''
}
// 每次需要给title赋值, 直接调用这个方法即可
init(title) {
this.title = title
console.log('当前title的值为: ', title)
}
}
const newDialog = (function fn() {
let instance = null
return function inner(type) {
if (instance === null) {
instance = new Dialog()
}
instance.init(type)
return instance
}
})()
const n1 = newDialog('警告')
console.log(n1)
const n2 = newDialog('文本')
console.log(n2)
4、解决 问题3：构造函数的类, 和实际使用创建的函数, 不是一个 名字
const Dialog = (function fn() {
let instance = null
class Dialog {
constructor() {
console.log('创建一个弹出框插入到页面中, 类型为: ')
this.title = ''
}
// 每次需要给title赋值, 直接调用这个方法即可
init(title) {
this.title = title
console.log('当前title的值为: ', title)
}
}
return function inner(type) {
// 1. 自动帮我们创建一个对象, 自动帮我们把函数内部的this指向这个新建对象
// 2. 手动往对象上添加属性
// 3. 自动返回一个对象
// 4. 构造函数内部不要写return, 返回一个基本数据类型, 写了和没写一样,
// 如果返回一个引用数据类型, 写了构造函数就没用了
if (instance === null) {
instance = new Dialog()
}
instance.init(type)
return instance
}
})()
// // 单例模式, 一般不建议写 new
const n1 = Dialog('警告')
const n2 = Dialog('文本')
const n3 = Dialog('红色警告')
console.log(n1)
console.log(n2)
console.log(n3)
console.log(n1 === n2)
console.log(n2 === n3)
console.log(n1 === n3)
三、策略模式
- 核心: 减少过多的 if...else...
- 需求: 去购物, 购物总价1987 折扣: 8折 7折 300-30 500-50
- 策略模式处理: 有一个数据结构，内部存储着各种折扣对应的计算总价方式
// 70% '300-30' '500-50' 60% 75%
let type = '80%';
let total = 1987;
if (type === '80%') {
} else if (type === '70%') {
} else if (type === '300-30') {
} else if (type === '500-50') {
} else if (type === '60%') {
} else if (type === '75%') {
}（一）基础版
const price = (function(){
let PriceList = {
// '80%': (total) =>{}
'80%': total =>total * 0.8,
'70%': total =>total * 0.7,
}
return function inner(type, total){
// console.log('inner函数开始执行，计算商品总价');
// console.log(type);
// console.log(PriceList[type]);
// console.log(PriceList[type](total));
return PriceList[type](total)
}
})()
let newPrice1 = price('80%', 1000);
let newPrice2 = price('70%', 1000);
console.log(newPrice1);
console.log(newPrice2);（二）进阶版
const price = (function(){
let PriceList = {
// '80%': (total) =>{}
'80%': total =>total * 0.8,
'70%': total =>total * 0.7,
}
return function inner(type, total){
// 新增其他折扣时
inner.add = (key, value) =>{
PriceList[key] = value;
}
// 只传递一个参数时
inner.sub = (key) =>{
PriceList[key] = null
}
// 打印PriceList列表时
inner.GetList = () =>{
return PriceList
}
return PriceList[type](total)
}
})()
let newPrice1 = price('80%', 1000);
let newPrice2 = price('70%', 1000);
price.add('60%', total =>total * 0.6);
let list = price.GetList();
console.log(newPrice1);
console.log(newPrice2);
console.dir(price);
四、发布订阅模式
- 这个模式适用于大型项目的封装
- 自行搜索: Vue2 响应式原理
- 除了 发布订阅模式, 还有一种叫观察者模式，这两个开发模式, 特别相似
class observer {
constructor(name) {
// 模拟一个店员(不重要)
this.name = name
// 店员的记录手册
this.message = {}
}
// 原型
add(type, fn) {
if (this.message[type] === undefined) {
this.message[type] = []
}
this.message[type].push(fn)
}
tri(type) {
// 调用这个方法, 通知对应的 人员 来购买
// console.log(type)
// console.log(this.message[type])
this.message[type].forEach(item => {
// console.log(item)
item()
})
}
remove(type, fn) {
// console.log(type, fn)
// console.log(this.message[type], fn)
this.message[type] = this.message[type].filter(item => item !== fn)
}
}
const res = new observer('小方')
console.log('初始数据: ', res)
const fnA = () => {
console.log('我是张三, 我想购买这本书')
}
const fnB = () => {
console.log('我是李四, 我想购买这本书')
}
const fnC = () => {
console.log('我是王五, 我想购买这本书')
}
// 新增(留下联系方式)
res.add('JS从入门到入土', fnA)
res.add('JS从入门到入土', fnB)
res.add('颈椎病的预防', fnC)
// 书本到了, 通知对应的预约者, 前来购买
res.tri('颈椎病的预防')
// 某人, 取消预约一本书
res.remove('JS从入门到入土', fnA)
console.log(res)
