一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
设计模式是一套反复使用多数知晓的、经过分类的、代码设计经验总结
任何事情都有套路，设计模式，就是写代码中常见套路，有些写法我们一直在用
##订阅/发布模式(观察者)
pub/sub 这个应该大家⽤用到最⼴的设计模式了，
在这种模式中，并不是一个对象调用另一对象的方法，而是一个对象订阅另一对象特定活动并在状态改变收获得通知，订阅着因此也成为观察者，而被观察者的对象成为发布者或着主题，当发生一个重要事件时候发布者会通知(调用)所有订阅者并且可能经常已事件对象的形式传递消息
class observer {
constructor() {
this.observerCache = {} // 储存
}
$on(name,cb) {
(this.observerCache[name]||(this.observerCache[name] = [])).push(cb)
}
$emit(name,args) {
if (this.observerCache[name]) {
this.observerCache[name].forEach(item=>{
item.call(this,args)
});
} else {
console.warn('observerCache没有相对应的name')
}
}
$off(name) {
if (this.observerCache[name]) {
this.observerCache[name] = null;
} else {
console.warn('observerCache没有相对应的name')
}
}
}
##单例模式
单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建在返回，这就是确保一个类只有一个实例对象
适用场景: 一个单一对象，比如弹窗，无论点击多少次，弹窗只应该被创建一次，实现起来也简单，用一个变量缓存即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.model-alert {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<button id='model-btn'>
一个弹窗
</button>
<button id='model-btn1'>
两个
</button>
</body>
<script>
let instance=null;
function createAlertfn(fn,alertcontent) {
console.log(instance)
if (instance) {
instance.innerHTML = alertcontent
}
return instance || (instance = fn.call(this,alertcontent))
}
function createAlertHtml(alertcontent) {
let div = document.createElement('div');
div.innerHTML = alertcontent||'我是弹窗';
div.className = 'model-alert';
if (instance) return
div.style.display = 'none';
document.body.append(div);
return div
}
document.getElementById('model-btn').addEventListener('click',() => {
let div = createAlertfn(createAlertHtml,'我是1')
console.log(div)
div.style.display = 'block'
},false)
document.getElementById('model-btn1').addEventListener('click',() => {
let div = createAlertfn(createAlertHtml,'我是2')
console.log(div)
div.style.display = 'block'
},false)
</script>
</html>
