JS 设计模式

单例模式

一个类只有一个实例，并提供一个访问它的全局访问点。

class LoginForm {
    constructor() {
        this.state = 'hide'
    }
    show() {
        if (this.state === 'show') {
            alert('已经显示')
            return
        }
        this.state = 'show'
        console.log('登录框显示成功')
    }
    hide() {
        if (this.state === 'hide') {
            alert('已经隐藏')
            return
        }
        this.state = 'hide'
        console.log('登录框隐藏成功')
    }
 }
 
 LoginForm.getInstance = (function () {
     let instance
     return function () {
        if (!instance) {
            instance = new LoginForm()
        }
        return instance
     }
 })()
 
let obj1 = LoginForm.getInstance()
obj1.show()
 
let obj2 = LoginForm.getInstance()
obj2.hide()
 
console.log(obj1 === obj2)

优点：

• 单例模式可以保证内存里只有一个实例，减少了内存的开销。
• 单例模式设置全局访问点，可以优化和共享资源的访问。
• 只会实例化一次。简化了代码的调试和维护

缺点：

• 单例模式一般没有接口，扩展困难
• 有可能导致模块间的强耦合 从而不利于单元测试。

工厂模式

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。统一由工厂类来决定具体实例化哪一个类。

class Product1 {
    product() {
        console.log("生产一线");
    }
}
class Product2 {
    product() {
        console.log("生产二线");
    }
}
class Factory {
    constructor() {
        this.Product1 = Product1;
        this.Product2 = Product2;
    }
    create(name, callBack) {
        const product = new this[name]();
        product.product();
        return callBack("susess");
    }
}
let p = new Factory();
p.create("Product1", (res) => {
    console.log(res);
});

优点：

• 工厂职责单一化易于维护
• 有利于消除对象间的耦合，提供更大的灵活性

缺点：添加新产品时，需要编写新的具体产品类,一定程度上增加了系统的复杂度。

代理模式

主要应用：

• ES6 的 proxy 
• HTML元 素事件代理

eg:

1. 给"ul"标签添加点击事件
2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."
注意：
1. 必须使用DOM0级标准事件（onclick）
 
target表示当前触发事件的元素
currentTarget是绑定处理函数的元素
只有当事件处理函数绑定在自身的时候，target才会和currentTarget一样
 
<ul>
      <li>.</li>
      <li>.</li>
      <li>.</li>
</ul>
 
<script type="text/javascript">
  　　document.querySelector('ul').onclick=event=>{
        event.target.innerText+='.'
     }
</script>

装饰器模式

动态地给某个对象添加一些额外的职责，是一种实现继承的替代方案。

// 首先我们要创建一个基类
function Man(){

  this.def = 2;
  this.atk = 3; 
  this.hp = 3;
}

// 装饰者也需要实现这些方法，遵守 Man 的接口
Man.prototype={
  toString:function(){
    return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
  }
}
// 创建装饰器，接收 Man 对象作为参数。
var Decorator = function(man){
  this.man = man;
}

// 装饰者要实现这些相同的方法
Decorator.prototype.toString = function(){
    return this.man.toString();
}

// 继承自装饰器对象
// 创建具体的装饰器，也是接收 Man 作对参数
var DecorateArmour = function(man){

  var moreDef = 100;
  man.def += moreDef;
  Decorator.call(this,man);

}
DecorateArmour.prototype = new Decorator();

// 接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。
DecorateArmour.prototype.toString = function(){
  return this.man.toString();
} 

// 注意这里的调用方式
// 构造器相当于“过滤器”，面向切面的
var tony = new Man();
tony = new DecorateArmour(tony);
console.log(`当前状态 ===> ${tony}`);
// 输出：当前状态 ===> 防御力:102,攻击力:3,血量:3

优点：

• 方便动态的扩展功能，且提供了比继承更多的灵活性。

缺点：

• 多层装饰比较复杂。

责任链模式

允许你将请求沿着处理者链进行发送。收到请求后，每个处理者均可对请求进行处理，或将其传递给链上的下个处理者。

eg:

促销时针对支付过定金的用户有一定的优惠政策。在正式购买后，已经支付过 500 元定金的用户会收到 100 元的商城优惠券，200 元定金的用户可以收到 50 元的优惠券，而之前没有支付定金的用户只能进入普通购买模式，也就是没有优惠券，且在库存有限的情况下不一定保证能买到。

接收一下三个参数：

• orderType：表示订单类型(定金用户或者普通购买用户)，code 的值为 1 的时候是 500 元定金用户，为 2 的时候是 200 元定金用户，为 3 的时候是普通购买用户。
• pay：表示用户是否已经支付定金，值为 true 或者 false, 虽然用户已经下过 500 元定金的订单，但如果他一直没有支付定金，现在只能降级进入普通购买模式。
• stock：表示当前用于普通购买的手机库存数量，已经支付过 500 元或者 200 元定金的用户不受此限制。

// 500 元订单
var order500 = function (orderType, pay, stock) {
  if (orderType === 1 && pay === true) {
    console.log('500 元定金预购, 得到 100 优惠券');
  } else {
    order200(orderType, pay, stock); // 将请求传递给 200 元订单 
  }
};
// 200 元订单
var order200 = function (orderType, pay, stock) {
  if (orderType === 2 && pay === true) {
    console.log('200 元定金预购, 得到 50 优惠券');
  } else {
    orderNormal(orderType, pay, stock); // 将请求传递给普通订单 }
  };
}
// 普通购买订单
var orderNormal = function (orderType, pay, stock) {
  if (stock > 0) {
    console.log('普通购买, 无优惠券');
  } else {
    console.log('手机库存不足');
  }
};
// 测试结果:
order500(1, true, 500); // 输出:500 元定金预购, 得到 100 优惠券
order500(1, false, 500); // 输出:普通购买, 无优惠券
order500(2, true, 500); // 输出:200 元定金预购, 得到 500 优惠券
order500(3, false, 500); // 输出:普通购买, 无优惠券
order500(3, false, 0);// 输出:手机库存不足

优点：

　　代码结构比较清晰

缺点：

　　违反开放-封闭原则

应用：

• JS 中的事件冒泡
• 作用域链
• 原型链

观察者模式：

eg: Promise  的执行类似于观察者模式

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('result')
    },
    1000);
}) 
 
p1.then(res => console.log(res), err => console.log(err))

分析Promise的调用流程：

• Promise的构造方法接收一个executor()，在new Promise()时就立刻执行这个executor回调
• executor()内部的异步任务被放入宏/微任务队列，等待执行
• then()被执行，收集成功/失败回调，放入成功/失败队列
• executor()的异步任务被执行，触发resolve/reject，从成功/失败队列中取出回调依次执行

观察者模式：收集依赖 -> 触发通知 -> 取出依赖执行

在Promise里，执行顺序是 then收集依赖 -> 异步触发resolve -> resolve执行依赖。

Promise实现：

class MyPromise {
  // 构造方法接收一个回调
  constructor(executor) {
    this._resolveQueue = []    // then收集的执行成功的回调队列
    this._rejectQueue = []     // then收集的执行失败的回调队列
 
    /*由于resolve/reject是在executor内部被调用, 
    因此需要使用箭头函数固定this指向, 否则找不到this._resolveQueue*/
 
    let _resolve = (val) => {
      // 从成功队列里取出回调依次执行
      while(this._resolveQueue.length) {
        const callback = this._resolveQueue.shift()
        callback(val)
      }
    }
    // 实现同resolve
    let _reject = (val) => {
      while(this._rejectQueue.length) {
        const callback = this._rejectQueue.shift()
        callback(val)
      }
    }
    // new Promise()时立即执行executor,并传入resolve和reject
    executor(_resolve, _reject)
  }
 
  // then方法,接收一个成功的回调和一个失败的回调，并push进对应队列
  then(resolveFn, rejectFn) {
    this._resolveQueue.push(resolveFn)
    this._rejectQueue.push(rejectFn)
  }
}