什么叫做设计模式?

188 阅读1分钟

设计模式:一种编程思想或者是代码管理的思想,基于不同的设计模式,可以解决一些编程中的问题

单例设计模式:(模块化)防止全局变量污染&&实现模块之间私有方法的相互调用

工厂设计模式:把一个函数当作普通函数执行,但是基于这中设计模式,可以实现创造这个类的一个实例

......等等设计模式,说说常用的发布订阅设计模式吧

发布订阅设计模式:(观察者模式的升级版)类似于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);