JavaScript 设计模式

可复用面向对象软件的基础

大分类

• 创建型（5）解决“对象的创建”问题-将创建和使用代码解耦

工厂方法，抽象工厂，单例，建造者，原型。

• 结构型（7）解决“类或对象的组合或组装”问题-将不同功能代码解耦

适配器，装饰器，代理，外观，桥接，组合，享元。

• 行为型（11）解决“类或对象之间的交互”问题-将不同的行为代码解耦

策略，模板，观察者，迭代器，中介者，状态，职责链，命令，访问者，备忘录，解释器。

创建型

工厂方法

在 JS 中，工厂方法是创建对象的一种方式。它像工厂一样，生产出来的函数都是标准件(拥有相同的属性)。它和单例模式有一点像，缓存了对象，避免重复重新结构相同的对象。下面是创建不同角色的工厂类。

function createPeopleFactory(id, name, age) {
  const obj = new Object();
  obj.id = id;
  obj.name = name;
  obj.age = age;
  return obj;
}

const child = createPeopleFactory(1, 'baby', 1);
const father = createPeopleFactory(2, 'peter', 25);

抽象工厂

在工厂方法的基础上再抽象一层，用来管理多个工厂类。平时使用场景很少。

abstract class AbstractFactory {
  public abstract getColor(color: string);
  public abstract getShape(shape: string);
}

// 通过传递形状或颜色信息来获取工厂
class FactoryProducer {
  public static getFactory(choice: string) {
    if (choice === 'SHAPE') {
      return new ShapeFactory();
    } else if (choice === 'COLOR') {
      return new ColorFactory();
    }
    return null;
  }
}

class ColorFactory extends AbstractFactory {
  public getColor(color) {
    // do something
  }

  public getShape() {
    return null;
  }
}

class ShapeFactory extends AbstractFactory {
  public getColor() {
    return null;
  }

  public getShape(shape) {
    // do something
  }
}

const shape = FactoryProducer.getFactory('SHAPE');
shape.getShape('CIRCLE');
const color = FactoryProducer.getFactory('COLOR');
color.getColor('RED');

单例

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

const singleton = function(fn) {
  let result = null;
  return function() {
    return result || (result = fn.apply(this, arguments));
  };
};

const getScript = singleton(function() {
  return document.createElement('script');
});

const script1 = getScript();
const script2 = getScript();
console.log(script1 === script2); // true

结构型

适配器

适配器英文是 Adapter。顾名思义它就是做适配用的，将一个不可用的接口转成可用的接口。适配器模式是一种 “亡羊补牢”的模式，没有人会在程序的设计之初就使用它。最近前端比较典型的应用是跨端框架，mpvue 和 taro，它们都是在应用和各个小程序以及终端之间建立了一层适配器。

下面举一个支付的例子，我们只需要调用 pay 函数，适配器帮我们平台之间的差异

function pay(id, price) {
  const platform = window.platform;
  switch (platform) {
    case 'wechat':
      wx.pay({ id, price });
      break;
    case 'alipay':
      alipay.pay({ id, price });
      break;
    case 'jd':
      jd.pay({ id, price });
      break;
    case 'xxx':
      xxx.toPay({ goodsId: id, price });
      break;
  }
}

pay(101, 1000);

装饰者

写代码的时候，我们总遵循“组合优于继承”，而装饰者模式就是一种用组合关系的来组织代码。而我们平时所说的装饰器就是装饰者的一种应用。

这个人原先普普通通，经过装饰者模式改造，瞬间变成人见人爱的帅哥。

function people(height, weight, character) {
  this.height = 170;
  this.weight = 80;
  this.character = 'normal';
  return this;
}

const xiaowang = people();
console.log(xiaowang.character);

function decorate(ctr) {
  ctr.height = 180;
  ctr.weight = 70;
  ctr.character = 'handsome';
  return ctr;
}

const wang = decorate(people);
console.log(wang.character);

代理

它在不改变原始类代码的情况下，通过引入代理类来给原始类附加功能。前端最常听到的代理就是 nginx 代理，它其实是代理的一个应用，把自身作为代理服务器将资源请求转发到终端服务器。在 JS 中比较典型的代理有图片懒加载，合并 http 请求，以及缓存计算乘积。

下面是一个图片懒加载的例子，我们加先加载默认图片，等真实图片加载完之后再替换默认图片。

const createImage = (function() {
  const img = document.createElement('img');
  document.body.appendChild(img);

  return function(src) {
    img.src = src;
  };
})();

const proxyImage = function(fn) {
  const image = new Image();
  const defaultImg = 'https://rs.vip.miui.com/vip-resource/prod/mio/v136/static/media/lazyLoad.a10ffbd7.png';

  return function(src) {
    fn(defaultImg);

    // 这里加一个延迟，可以更好的看到图片替换的过程。
    setTimeout(function() {
      image.src = src;
      image.onload = function() {
        fn(src);
      };
    }, 2000);
  };
};

const proxy = proxyImage(createImage);
proxy('https://pic1.zhimg.com/80/v2-ec33fcec249a9cabab61b14436432bf0_r.jpg');

享元

应用于大量相似对象的系统。一般是借用工厂模式，新建一个对象，然后其他对象共享这个工厂对象，避免新建对象。享元模式是一种用时间换空间的优化模式，避免性能损耗。

享元模式的代码比较好理解，因为衣服的型号就那么几种，我们可以通过身高判断衣服类型（忽略贾玲和宋一茜），所以衣服类型就可以作为一个共享对象。

const selectClothes = (function() {
  const clothesType = {
    160: 's',
    170: 'l',
    175: 'xl',
    180: 'xxl',
    181: 'xxxl'
  };

  return function(height) {
    if (height < 170) {
      return clothesType[160];
    } else {
      // 后面的代码省略
      return clothesType[175];
    }
  }
})();

class People {
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
    this.clothesType = '';
  }
}

const people1 = new People(160, 100);
const people2 = new People(170, 150);
people1.clothesType = selectClothes(people1.height);
people2.clothesType = selectClothes(people2.height);

行为型

策略

定义一系列的算法，把它们一个个封装起来，并且可以相互替换，这就是策略模式。要使用策略模式，必须了解所有的 strategy，必须了解各个 strategy 之间的不同点， 这样才能选择一个合适的 strategy。比如，我们要选择一种合适的旅游出行路线，必须先了解选择飞机、火车、自行车等方案的细节。此时 strategy 要向客户暴露它的所有实现，这是违反最少知识原则的。

我直接使用《JavaScript 设计模式和开发实战》中的一个例子。这是一个计算不同绩效的人对应不同的奖金（奖金 = 工资 * 对应的绩效算法）。

const strategies = {
  S: function(salary) {
    return salary * 4;
  },
  A: function(salary) {
    return salary * 3;
  },
  B: function(salary) {
    return salary * 2
  }
}

const calculateBonus = function(level, salary) {
  return strategies[level](salary);
}

const staff1 = calculateBonus('S', 10000);
const staff2 = calculateBonus('A', 20000);

观察者

又称发布-订阅模式，它定义对象间的一种一对多的依赖关系。主要用于异步编程。JavaScript 本身也是一门基于事件驱动的语言，也利用了发布订阅模式。

下面是JS中自定义事件，它就是一个典型的观察者模式。

const msg = new Event('message');
window.addEventListener('message', function() {
  console.log('我接收到了消息');
});
window.dispatchEvent(msg);

我们来手写一个观察者模式，下面这个模式比较简陋，边界处理很粗糙。

class Event {
  constructor() {
    this.events = [];
  }

  on(fn) {
    this.events.push(fn);
  }

  emit(data) {
    this.events.forEach(fn => {
      fn(data);
    })
  }

  // off方法我这里就不实现了，也比较简单
  off () {}
}

const event = new Event();
event.on(function(data) {
  console.log('我是第一个注册事件', data);
});
event.on(function(data) {
  console.log('我是第二个注册事件', data);
});
event.emit('已发送');

迭代器

是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。分为内部迭代器和外部迭代器。

像我们大部分迭代器都是内部迭代器。比如 forEach，map ，filter 等。而外部迭代器，迭代的控制权在外部。

const Iterator = function(obj){
  let current = 0;

  const next = function(){
    console.log(obj[current]);
    current++;
  };

  const isDone = function(){
    return current >= obj.length;
  };

  const getCurItem = function(){
    return obj[current];
  };

  return {
    next: next,
    isDone: isDone,
    getCurItem: getCurItem
  }
};

const iterator = new Iterator([1, 2, 3]);
iterator.next(); // 1
iterator.next(); // 2
iterator.next(); // 3

结束语

摘抄这篇文章内容用做学习，感谢作者大大，链接附上：设计模式之美-前端 - 知乎 (zhihu.com)