设计模式
设计模式
设计模式是代码经验的总结，设计模式都是面对对象的！
单例模式
1、js的单例最简单的方案就是字面量创建对象
var gf = {
'name': '刘亦菲'
}
2、用闭包来实现单例
懒汉单例：先是null，调用的时候通过判断去决定是否new 好理解 好用 推荐
<script>
function Girlfriend(name) {
this.name = name
}
var getGf = (function () {
var gf = null;
return function (name) {
if (!gf) {
gf = new Girlfriend(name)
}
return gf
}
})()
var gf1 = getGf('张柏芝')
console.log(gf1)
var gf2 = getGf('苍老师')
console.log(gf2)
console.log(gf1 === gf2) // true
</script>
3、饿汉单例：一上来直接new，内层函数里就不需要判断了
<script>
function Girlfriend(name) {
this.name = name
}
// 饿汉单例：一上来直接new，内层函数里就不需要判断了
var getGf = (function () {
var gf = new Girlfriend("洛天依")
return function (name) {
return gf
}
})()
var gf1 = getGf('张柏芝')
console.log(gf1) //Girlfriend {name: "洛天依"}
var gf2 = getGf('苍老师')
console.log(gf2) // Girlfriend {name: "洛天依"}
console.log(gf1 === gf2) // true
</script>
4、拓展！一样内容是true； 不一样的是false。
<script>
function Person({ name, age }) {
this.name = name;
this.age = age;
}
var single = (function () {
var ins = null;
return {
getInstance(params, Cons) {
if (!ins || ins.name != params.name) {
ins = new Cons(params)
}
return ins;
}
}
}())
var p1 = single.getInstance({ name: "小h", age: 18 }, Person);
var p2 = single.getInstance({ name: "小明", age: 18 }, Person);
console.log(p1);
console.log(p1 === p2); //false
</script>
组合模式
<script>
// 将若干 命令 组合 调用
var compose = {
composes: [],
add: function (func) {
this.composes.push(func);
},
lost: function () {
if (!this.composes.length) return;
this.composes.forEach(el => {
typeof el === "function" && el()
})
}
}
function swiper() {
console.log("轮播写完了");
}
function table() {
console.log("选项卡写完了");
}
compose.add(swiper);
compose.add(table);
// compose.add(table);
compose.lost();
</script>
观察者模式
<body>
<button>按钮</button>
<script>
/*
观察者模式： 订阅模式 观察者：卖书店员 订阅者：你买书的人
*/
/* var btn = document.querySelector("button");
btn = document.addEventListener('click',function(){
alert("触发了")
}) */
class Observer {
msg = {}; //保存订阅的事件类型
//绑定事件
on(type, func) {
if (this.msg[type]) return;
this.msg[type] = func;
}
//调用事件
emit(type) {
// 判断有没有监听
if (!this.msg[type]) return;
this.msg[type]();
}
//移除事件
off(type) {
if (!this.msg[type]) return;
this.msg[type] = null;
}
}
var o = new Observer();
o.on("abc", function () {
console.log("嘿嘿嘿，我观察到你啦")
})
// o.emit("abc")
// o.emit("abc")
//先移除 后面就没有事件可以调用了 若是先调用 那肯定会调用一次
o.off("abc");
o.emit("abc")
</script>
</body>
