二十、设计模式

所谓的设计模式，就是为了解决特定的问题，进而定义的程序的一种书写方式

目的：就是为了优化代码，减少冗余

一、工厂模式

将重复冗余的定义对象属性和方法的程序封装在一个函数内，调用函数就可以完成对对象的定义

定义一个函数，生成一个对象，添加上方法、属性、再返回这个对象

function createObj(name,sex,age,addr,hobby){
  const obj = {};
  obj.name = name; 
  obj.age = age; 
  obj.sex = sex; 
  obj.addr = addr; 
  obj.hobby = hobby;
  obj.fun1 = function(){}; 
  obj.fun2 = function(){}; 
  return obj;
}

二、单例模式

单例模式：让通过相同的构造函数，生成的实例化对象，不再被重复定义，不再占用多余的内存地址

class SetObj{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  fun1(){}
  fun2(){}
}   

const obj1 = new SetObj('张三',18);
const obj2 = new SetObj('李四',20);

// 同一个构造函数,生成实例化对象
// 因为是多次定义新的对象，占用新的内存空间，生成新的内存地址
// 因此两个对象是不同的内存地址,是不等关系
console.log(obj1 === obj2); // false

核心思想：

• 定义一个构造函数，定义一个变量

• 如果变量没有内容，或者内容是空，证明没有执行过构造函数，没有生成实例化对象，可以执行构造函数

• 如果变量有内容，或者内容不是空，证明已经执行了构造函数，已经生成了实例化对象，不再执行构造函数，直接返回这个对象

class CreateObj{};

// 定义变量
let obj = null;

function isObj(){
  if(obj === null){
    obj = new CreateObj();
  }
  return obj;
}

// 使用函数,调用构造函数,创建实例化对象
const obj1 = isObj();
const obj2 = isObj();

// obj1和obj2中,实际上都存储的是,实例化对象的内存地址，是相等的
console.log(obj1 === obj2); // true

三、组合模式

组合模式：使用一个"遥控器"统一启动关闭所有实例化对象的入口函数

class Fun1 {
  constructor() { }
  init() {
    this.f1();
    this.f2();
  }
  f1() {
    console.log('1111')
  }
  f2() {
    console.log('2222')
  }
}

class Fun2 {
  constructor() { }
  init() {
    this.f1();
    this.f2();
  }
  f1() {
    console.log('1111')
  }
  f2() {
    console.log('2222')
  }
}

// 定义实例化对象
const obj1 = new Fun1();
const obj2 = new Fun2();

// 每一个构造函数的入口函数,都必须叫 init
// 定义一个组合模式的构造函数
class Group {
  constructor() {
    // 在构造器中定义一个空数组,数组中准备存储所有的入口函数
    this.arr = [];
  }

  // 定义一个方法,添加所有的入口函数到数组中
  // 入口函数,是存储在实例化对象中，将实例化对象添加到数组中
  // 等于数组中存储对象,对象中包含入口函数
  add(object) {
    this.arr.push(object);
  }

  // 调用数组arr中，存储的实例化对象中的入口函数
  execute() {
    // 将数组中存储的实例化对象的入口函数都调用
    // item就是arr中存储的实例化对象
    this.arr.forEach((item) => {
      // 调用每一个实例化对象的入口函数
      item.init();
    })
  }
}

// 通过构造函数,生成组合模式的实例化对象
const group = new Group();

// 向组合模式添加需要执行init()实例化对象
group.add(obj1);
group.add(obj2);

// 通过单例模式,一次启动所有添加的实例化对象的入口函数
group.execute();

四、观察者模式

• 观察者模式：

  • 监听某个主体对象，如果主体对象的状态发生改变，记录状态的改变

  • 给相关连的其他个体，执行相关的数据更新操作

• 观察者模式的核心代码

  • 需要一个观察者(一个对象)

  • 观察者需要一个属性，存储记录所有的需要执行的程序(消息盒子)

  • on方法，向消息盒子添加需要执行的函数方法

  • emit方法，发布执行消息盒子中定义的函数方法

  • off方法，删除消息盒子中添加的方法

class CreateObj{
  constructor(){
    this.msg = []; // 消息盒子,存储要执行的函数方法
  }

  on(){} // 向消息盒子添加要执行的函数方法
  emit(){} // 执行消息盒子中函数方法
  off(){} // 删除消息盒子中函数方法
}

1、on方法

向 this.msg 这个消息盒子中，添加需要执行的程序内容

• 判断 新增的方法类型 是否存在

  • 类型不存在，新增type单元的类型

  • 类型存在，在已有的类型方法中，新增方法

• on方法 需要两个参数

  • 参数一：新增函数方法类型

  • 参数二：新增的函数方法

class CreateObj {
  constructor() {
    this.msg = {};
  }
  // type:方法的类型
  // fun :添加的函数方法
  on(type, fun) {
    // 判断是否有这个类型,没有类型,调用结果是 undefined
    if (this.msg[type] === undefined) {
      // 调用结果是undefined，证明没有这个类型
      // 直接添加类型和方法
      // type中以数组的形式,存储多个需要执行的函数方法
      this.msg[type] = [fun];
    } else {
      // 调用结果不是undefined,证明有这个类型
      // 向这个类型中,新增新的方法
      this.msg[type].push(fun);
    }
  }
  emit() { }
  off() { }
}
const obj = new CreateObj();

// 添加方法
obj.on('moshou', moshou1);
obj.on('moshou', moshou2);

function moshou1() {
  console.log('没收手机')
}
function moshou2() {
  console.log('没收零食')
}

2、off方法

从 this.msg 消息盒子中，删除方法

• 判断执行的类型是否存在（看结果是否是undefined）

  • 如果存在，再执行

  • 如果不存在，不执行程序

• 判断 执行的 函数方法，是否存在

  • 判断存储的函数名称和传参要执行的函数名称是否相同

• 需要两个参数

  • 参数一：事件类型

  • 参数二：需要执行的函数名称

class CreateObj {
  constructor() {
    this.msg = {};
  }
  // type:方法的类型
  // fun :添加的函数方法
  on(type, fun) {
    // 判断是否有这个类型,没有类型,调用结果是 undefined
    if (this.msg[type] === undefined) {
      // 调用结果是undefined，证明没有这个类型
      // 直接添加类型和方法
      // type中以数组的形式,存储多个需要执行的函数方法
      this.msg[type] = [fun];
    } else {
      // 调用结果不是undefined,证明有这个类型
      // 向这个类型中,新增新的方法
      this.msg[type].push(fun);
    }
  }
  off(type, fun) {
    if (this.msg[type] === undefined) {
      // 证明事件类型不存在,终止程序执行
      return;
    }

    // item 是类型中存储的函数名称
    this.msg[type].forEach((item, key) => {
      // 存储的函数名称和输入的函数名称相同
      if (item === fun) {
        // 执行数组删除单元操作
        // 从当前索引开始,删除一个单元
        this.msg[type].splice(key, 1);
      }
    })
  }
  emit() { }
}
const obj = new CreateObj();

// 添加方法
obj.on('moshou', moshou1);
obj.on('moshou', moshou2);

// 删除方法
obj.off('moshou', moshou2);

function moshou1() {
  console.log('没收手机')
}
function moshou2() {
  console.log('没收零食')
}

3、emit方法

将 msg 消息盒子中的方法,都执行

需要两个参数

• 参数一：执行的事件类型

• 参数二：执行事件的函数名称

class CreateObj {
  constructor() {
    this.msg = {};
  }
  // type:方法的类型
  // fun :添加的函数方法
  on(type, fun) {
    // 判断是否有这个类型,没有类型,调用结果是 undefined
    if (this.msg[type] === undefined) {
      // 调用结果是undefined，证明没有这个类型
      // 直接添加类型和方法
      // type中以数组的形式,存储多个需要执行的函数方法
      this.msg[type] = [fun];
    } else {
      // 调用结果不是undefined,证明有这个类型
      // 向这个类型中,新增新的方法
      this.msg[type].push(fun);
    }
  }
  off(type, fun) {
    if (this.msg[type] === undefined) {
      // 证明事件类型不存在,终止程序执行
      return;
    }

    // item 是类型中存储的函数名称
    this.msg[type].forEach((item, key) => {
      // 存储的函数名称和输入的函数名称相同
      if (item === fun) {
        // 执行数组删除单元操作
        // 从当前索引开始,删除一个单元
        this.msg[type].splice(key, 1);
      }
    })
  }
  // 通过合并运算符,将需要执行的函数名称,以数组的形式存储
  emit(type, ...funArr) {
    // 1,判断类型是否存在,不存在直接终止
    if (this.msg[type] === undefined) {
      return;
    }

    // 2,如果类型存在,比对函数名称,是否存在,如果存在,再执行调用
    // item是存储的函数名称
    this.msg[type].forEach((item) => {
      // funName是输入的函数名称
      funArr.forEach((funName) => {
        // 如果这两个函数名称一致,就可以调用函数
        if (item === funName) {
          item();
        }
      })
    })
  }
}
const obj = new CreateObj();

// 添加方法
obj.on('moshou', moshou1);
obj.on('moshou', moshou2);

// 删除方法
obj.off('moshou', moshou2);

function moshou1() {
  console.log('没收手机')
}
function moshou2() {
  console.log('没收零食')
}