设计模式
总体来说设计模式分为三大类:
创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式,共十一种:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
介绍下单列模式
class Person {
constructor(name) {
this.name = name;
this.instance = null; //自定义的一个条件
}
showname() {
return this.name;
}
}
Person.getsingle = function(name) { //静态方法。
//如果存在这个实例对象,直接返回,不存在,再实例化对象。
if (!this.instance) {
this.instance = new Person(name)
}
return this.instance;
}
//思路:new Person 产生一个不同的实例。new一次
let p1 = Person.getsingle('zhangsan');
let p2 = Person.getsingle('lisi');
console.log(p1 == p2); //true
console.log(p1 === p2); //true
单列模式中有个特别的叫惰性单例:
et box = (function() {
let cDiv = null;
return function() {
if (!cDiv) { //不存在,创建
cDiv = document.createElement('div');
cDiv.innerHTML = '我是创建出来的盒子';
cDiv.style.display = 'none';
document.body.appendChild(cDiv);
}
return cDiv; //存在,直接返回
}
})();
oBtn.onclick = function() {
let box1 = box(); //执行函数,返回创建的盒子。
box1.style.display = 'block';
}
发布订阅模式:
class Observer {
constructor() {
this.message = [];
}
//this.message = ['买车':[fn(奥迪),fn(宝马),fn(奔驰)],'买房':[fn(100),fn(200)...]]
//添加自定义事件 - 订阅
on(etype, fn) { //etype:自定义的事件 fn:事件处理函数
//如果是第一次发生的事件,创建事件类型和事件处理函数
//如果是第二次发生的事件,追加到对应的事件下面
if (!this.message[etype]) { //第一次发生
this.message[etype] = [fn];
} else { //发生的事件
this.message[etype].push(fn);
}
}
//发布 - 执行订阅的信息
excute(etype) {
if (!this.message[etype]) return; //如果不存在事件,退出。
this.message[etype].forEach(item => {
item();
});
}
//取消事件
off(etype, fn) { //etype:自定义的事件 fn:事件处理函数
if (!this.message[etype]) return; //如果不存在事件,退出。
for (let i = 0; i < this.message[etype].length; i++) {
let eventfn = this.message[etype][i];
if (eventfn === fn) {
this.message[etype].splice(i, 1); //splice会改变原数组。
i--;
}
}
}
}
let buy = new Observer();
//事件绑定
buy.on('buycar', fn1);
buy.on('buycar', fn2);
buy.on('buycar', fn3);
buy.on('buyhouse', fnn1);
buy.on('buyhouse', fnn2);
buy.on('buyhouse', fnn3);
//触发事件
buy.excute('buycar');
buy.excute('buyhouse');
//取消fn2
buy.off('buycar', fn1);
buy.off('buycar', fn2);
buy.off('buycar', fn3);
buy.off('buyhouse', fnn1);
buy.off('buyhouse', fnn2);
buy.excute('buycar');
buy.excute('buyhouse');
function fn1() {
console.log('宝马');
}
function fn2() {
console.log('奥迪');
}
function fn3() {
console.log('奔驰');
}
function fnn1() {
console.log('平层')
}
function fnn2() {
console.log('平排屋层')
}
function fnn3() {
console.log('商城')
}