设计模式:一种编程思想或者是代码管理的思想,基于不同的设计模式,可以解决一些编程中的问题
单例设计模式:(模块化)防止全局变量污染&&实现模块之间私有方法的相互调用
工厂设计模式:把一个函数当作普通函数执行,但是基于这中设计模式,可以实现创造这个类的一个实例
......等等设计模式,说说常用的发布订阅设计模式吧
发布订阅设计模式:(观察者模式的升级版)类似于DOM2事件绑定,自己有一个事件池,并具备三个方法: on向事件池中加入方法。off从事件池中移出方法,fire/emit通知事件池中的方法执行;好处:我们只需要事先管理好“到达可执行条件后,通知事件池方法执行”这个操作,后期想把什么方法执行,直接添加到事件池子里即可
(function(){
//事件池
let listeners = {};
//向事件池中追加方法
const on = function on(type,func){
let arr = listeners[type];
if(!arr){
listeners[type] = [];
arr = listeners[type];
}
if(arr.includes(func)) return;
arr.push(func);
}
//向事件池中移除方法
const off = function off(type,func){
let arr = listeners[type] || [],
index = arr.indexOf(func);
if(index === -1) return;
//arr.splice(index,1);//会导致数组塌陷问题
arr[index] = null;
}
//向事件池中指定的方法执行
const emit = function emit(type,...params){
let arr = listeners[type] || [],
i=0,
item;
for(;i<arr.length;i++){
item = arr[i];
if(typeof item === 'function'){
item(...params);
continue;
}
arr.splice(i,1);
i--;
}
}
// 暴露api
let $sub = {
on,off,emit
}
if(typeof model === 'object'&& typeof model.exports === 'object') model.exports = $sub;
if(typeof window !== 'undefined') window.$sub = $sub;
})()
//使用事件池
setTimeout(()=>{
$sub.emit('@AA',100,200);
$sub.emit('@BB');
$sub.emit('@CC');
},1000);
const fn = (x,y) =>{
console.log(2,1+2);
}
const fn1 = () =>{console.log(1);}
const fn2 = () =>{console.log(2);}
const fn3 = () =>{
console.log(3);
$sub.off('@AA',fn);
$sub.off('@AA',sum);
}
const fn4 = () =>{console.log(4)};
const fn5 = () =>{console.log(5)};
const fn6 = () =>{console.log(6)};
$sub.off('@AA',fn);
$sub.on('@AA',fn3);
$sub.on('@BB',fn4);
$sub.on('@AA',fn5);
$sub.on('@CC',fn6);
$sub.off('@AA',fn1);
$sub.off('@AA',fn);
$sub.on('@AA',fn1);