设计模式

针对特定问题的简单而优雅的解决方案

工厂模式

创建对象。
使用相同的接口，创建不同的实例。

var factory = (function (){
  var cars = {
    'car1': function (){
      this.speed = '380km/h';
      this.type = '豪华版';
    },
    'car2': function (){
      this.speed = '300km/h';
      this.type = '中配版';
    }
  }

  return function (config){
    return new cars[config]();
  }
})();

var car2 = factory('car2');
var car1 = factory('car1');
console.log( car2.type );  // 中配版

单例模式

保证一个类仅有一个实例

// 常见面试题
function Fun() {
  // 在函数中添加代码，使下面的运行结果成立
  if (Fun.instance) {
    return Fun.instance;
  }
  this.attr = 'hello world';
  return Fun.instance = this;
}
// Fun.instance = 123;暴露在外部，可以能被修改，导致程序运行不正常
var obj1 = new Fun();
var obj2 = new Fun();
console.log(obj1 === obj2); //true
console.log(obj1.attr); // 'hello world'

发布/订阅模式

解决的是对象间的一种一对多的依赖关系

• 观察：添加一个缓存列表，将发布、订阅、取消订阅、构造函数添加到原型上。
• 发布：判断是否有type，无则return，有则遍历，回调访问。
• 订阅：判断是否有type，无则创建空数组，有则使用push入订阅数组。
• 取消订阅：
  （1）清空缓存列表
  （2）删除对应的type
  （3）删除对应的type的回调函数

function Observe(){
  this.cacheList = {};// 缓存列表
  // { // 列表的一个格式
  //   'houseTypeA': [fn1,fn2,fn3],
  //   'houseTypeB': [fn1,fn2,fn3,fn4]
  // }
}
Observe.prototype = {
  constructor: Observe,
  // 发布:取出对应的消息类型，执行所有回调函数传入发布的消息
  publish: function (type,message){
    if (!this.cacheList[type]){
      return;
    }
    this.cacheList[type].forEach(function (cb){
      cb(message);
    });
  },
  // 订阅:往某个消息类型中添加回调函数
  subscribe: function (type,callback){
    // 判断对象是否有type此属性
    if (!this.cacheList[type]) {
      this.cacheList[type] = [];
    }
    // 往对应的消息类型插入回调函数
    this.cacheList[type].push(callback);
  },
  // 取消订阅
  unsubscribe: function (type,callback){
    if (!type) {// 直接调用，没有任何参数
      this.cacheList = {};
    } else if (type&&!callback) {// 删除某个消息类型的所有回调函数
      delete this.cacheList[type];
    } else {// 删除某个消息类型中的某个回调函数
      this.cacheList[type] = this.cacheList[type].filter(function (cb){
        return cb !== callback;
      })
    }
  }
}

var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var send1 = document.querySelector('.send1');
var send2 = document.querySelector('.send2');

var obs = new Observe();
btn1.onclick = function (){
  console.log('订阅了houseTypeA。。。');
  obs.subscribe('houseTypeA',function (msg){
    console.log('收到的消息：'+msg);
  });
}

send1.onclick = function (){
  obs.publish('houseTypeA','订阅消息内容');
}

代理模式

为一个对象提供一个代理

var imageModule = (function (){// 本体对象
  var showimg = new Image();
  return {
    setSrc: function (dom,src){
      showimg.src = src;
      dom.appendChild(showimg);
    }
  }
})();

var proxyModule = (function (){// 代理对象
  var loadimg = new Image();
  var showDom;
  loadimg.onload = function (){
    imageModule.setSrc(showDom,this.src);
  }
  return {
    setSrc: function (dom,src){
      showDom = dom;
      loadimg.src = src;
      imageModule.setSrc(dom,'./loading.gif');
    }
  }
})();

var show = document.querySelector('.show');
imageModule.setSrc(show,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597310800388&di=678d9f85fc9f5b2b5ad301df43d32615&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg');

策略模式

定义一系列算法，把它们封装起来，并且使它们可以互相替换。主要分为俩部分：
策略类，封装业务算法，把具体的计算过程封装在策略类中。
环境类（客户直接访问的类），内部把用户的需求委托给策略对象。

var strategy = {// 策略对象
  'performanceA': function (salary){
    return salary * 8;
  },
  'performanceB': function (salary){
    return salary * 5;
  },
  'performanceC': function (salary){
    return salary * 3;
  },
  'performanceD': function (salary){
    return salary * 1.2;
  }
}
var getBonus = function (level,salary){// 环境类
  return strategy[level](salary);
}
console.log( getBonus('performanceB',12000) );