JS中常见的几种设计模式

JS设计模式

JS设计模式：是一种思想，更规范更合理地去管理代码【方便维护、升级、扩展、开发】

• 单例模式 && 命令模式
  1、 最早期的模块化编程思想【同样的还有：AMD、CMD、CommonJS、ES6Module】
  2、 避免全局变量的污染
  3、 实现模块化之间的相互调用【提供了模块导出的方案】
  4、在实际开发中，还可以基于命令模式管控方法的执行顺序，从而有效的实现出对应的功能【命令模式：只导出一个方法，这是在该方法中将其余方法按照一定顺序去执行】

// 单例设计模式
  // 例如：
  let obj = (function(){
    return {
      // 导出多个方法，外面自己调用
      fn(){},
      go(){}
    }
  })();
  obj.go();
  obj.fn();

  // 命令模式
  // 例如：
  let mingling = (function(){
    function fn1(){}
    function fn2(){}
    function fn3(){}
    return {
      init(){
        // 在这里控制 fn1、fn2、fn3的执行顺序
        fn2();
        fn1();
        fn3();
      }
    }
  })();
  mingling.init();

• Constructor构造器模式【new 模式】
  1、 自定义类和实例
  2、 私有&公有属性和方法
  3、 编写公共的类库&写一写插件组件

//  例如：
  class Fn {
    constructor(name){
      this.name = name;
    }
    getName(){

    }
  }
  let p = new Fn;
  let q = new Fn;

• Factory工厂模式
  简单工厂模式：一个方法根据传递的参数不同，做了不同事情的处理

// 例如：
  function factory(){
    if(arguments.length==1) {
      // 只有一个参数时做什么
      return;
    }
    if(arguments.length == 2) {
      // 有两个参数时做什么
    }
    // ...
  }

• 发布订阅机制：基于DOM2事件绑定的事件池机制【可以给同一个元素的同一个行为绑定多个不同的方法，当元素的这一行为触发，则给其绑定的所有方法会被一一执行】
  发布订阅：只有一个类，这个类提供 on、off、fire 三个方法

// 例如
  function Publish() {
    this.fns = [];
  }
  Publish.prototype = {
    constrctor: Publish, // 原型重定向的时候记得手动补上constructor
    // 往事件池中添加方法
    on(fn) {
      // 添加之前去重
      this.fns.indexOf(fn) === -1 ? this.fns.push(fn) : null;
    },
    // 移除事件池中的方法
    off(fn) {
      if (!this.fns.length) return;
      // 不要直接使用splice，会造成数组塌陷
      this.fns = this.fns.filter(item => item !== fn);
    },
    // 通知事件池中的方法执行
    fire(...params) {
      if (!this.fns.length) return;
      this.fns.forEach(item => {
        typeof item === 'function' ? item(...params) : null;
      });
    }
  }

  // 使用
  let p = new Publish;
  p.on(()=>{console.log(1)}); // 添加事件时最好不要使用匿名函数，因为不好移除
  p.on(function fn(){console.log(2)});
  p.fire();