前端常用的设计模式

设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发过程中面临的一般问题的结局方案。这些解决方案是众多软件开发人员经过相当长的一段时间的经验和错误总结出来的。

这里只总结我们前端常用的几个设计模式的套路。

单例模式

---

实例化对象中包含相同属性 不同属性值和相同的函数方法，通过一个构造函数创建的实例化对象，只是存储的数据不同；不同的实例化对象存储这不同的数据，函数方法调用的数据是不同的数据。如果在调用函数方法时，通过输入实参的方式，给函数输入不同的数据，实例化对象只需要创建一个就可以满足需求，就不需要创建重复的实例化对象存储不同的数据。

核心：通过一个实例化对象满足所有需要执行的程序。

不是所有的构造函数都适用于单例模式。

存在的问题：如果多次调用生成的还是不同的实例化对象，不是一个唯一的实例化对象。

闭包的单例模式，如下所示：

const sim = (function(){
    //构造函数
    class CreateObj{
        //对象中没有属性存储数据
        constructor(){}

        //调用函数时，以形参输入实参的方式输入要执行的数据
        f1(name , age){console.log(name , age)}
    }
    //变量
    let result = '原始数据';
    //返回值是一个匿名函数
    return function(){
        if( result === '原始数据'){
           //调用构造函数创建实例化对象存储在变量中
           result = new CreateObj();
           //函数return变量也就是return实例化对象
           return result; 
        }else{
           //如果不是原始值
           //变量只能存储之前创建的实例化对象
           //直接return返回之前创建的实例化对象
           return result;
        }
    }
})();

函数第一次调用

result存储原始值

result赋值存储创建的实例化对象的内存地址00ff11

return返回值也就是result中存储的实例化对象的内存地址00ff11

之后再调用函数

result存储实例化对象的内存地址00ff11

result直接返回实例化对象的内存地址00ff11

也就是函数调用执行的返回值，永远是一个固定的实例化对象的内存地址。

闭包的单利模式套路，如下所示：

const 变量 = (function(){
   //实际项目中 不同的单利模式 就 只是 构造函数不同
   class 构造函数{ 需要执行成单利模式的构造函数 }

   let 变量 ;

   return function(){
       if( 变量 === 原始值 ){
          变量 = new 构造函数();
          return 变量;
       }else{
          return 变量;
       }
   }
})()

组合模式

---

通过一个构造函数创建实例化对象，添加所有要执行的实例化对象，通过函数方法统一操作所有添加的实例化对象，当前只是调用添加的实例化对象的入口函数。如下所示：

class Group{
    constructor(){
        this.arr = [];
    }

    add(...objArr){
        objArr.forEach(item => {
           if(this.arr.indexOf( item ) === -1){
              this.arr.push( item );
           }
        })
    }

    ext(){
        this.arr.forEach(item => {
           item.init();
        })
    }
}

定义一个构造函数

构造函数有一个属性以数组的形式存储要执行的实例化对象

构造函数有两个函数方法

函数方法1

向数组中添加要执行的实例化对象，不会重复添加

函数方法2

执行数组中添加的实例化对象的入口函数init()

观察者模式

---

主体 个体 相互执行 双向数据绑定，主体 个体 数据状态发生改变，另一个也会做出响应的数据状态改变。观察者模式的基本语法形式，如下所示：

class Observer{
    constructor(){
        this.msg = {};
    }
  
    add(type , ...funArr){
       if( this.msg[type] === underfined ){
           this.msg[type] = funArr;
       }else{
           funArr.forEach(item => {
              if(this.msg[type].indexOf(item) === -1){
                 this.msg[type].push(item);
              }
           })
       }
    }

    delete(type , ...funArr){
        if( this.msg[type] !== undefined){
           funArr.forEach(item => {
             if(this.msg[type].indexOf(item) !== -1){
                this.msg[type].splice(this.msg[type].indexOf( item ) , 1)
             }
           })
        }
    }

    ext(type , ...funArr){
       if(this.msg[type] !== undefined){
          funArr.forEach(item => {
              if( this.msg[type].indexOf( item ) !== -1 ){
                 item()
              }
          })
       }
    }
}

创建一个构造函数

有一个属性存储对象，对象的属性是要执行的函数的事件类型，对象的属性值是数组是要执行的事件类型对应的事件处理函数。

三个函数方法

方法1  添加

向对象中添加事件类型和事件处理函数

方法2  删除

向对象中删除事件类型和事件处理函数

方法3 发布/执行

向对象中执行事件类型和事件处理函数