02 常见设计模式

不知道怎么封装代码？看看这几种设计模式吧！

工厂模式

面向对象

function popup(type, content, color) {
  // 如果是通过 new 调用的，返回对应类型的弹窗
  if (this instanceof popup) {
    return new this[type](content, color);
  } else {
    // 如果不是 new 调用的，使用 new 调用，会走到上面那行代码
    return new popup(type, content, color);
  }
}

// 各种类型的弹窗全部挂载在原型上成为实例方法
popup.prototype.infoPopup = function (content, color) {};
popup.prototype.confirmPopup = function (content, color) {};
popup.prototype.cancelPopup = function (content, color) {};

封装成模块

(function () {
  function popup(type, content, color) {
    if (this instanceof popup) {
      return new this[type](content, color);
    } else {
      return new popup(type, content, color);
    }
  }

  popup.prototype.infoPopup = function (content, color) {};
  popup.prototype.confirmPopup = function (content, color) {};
  popup.prototype.cancelPopup = function (content, color) {};

  window.popup = popup;
})();

// 外面就直接可以使用 popup 模块了
let infoPopup1 = popup('infoPopup', content, color);

单例模式

function store() {
  // 检测 this 是不是当前实例，不是就用 new 调用
  if (!(this instanceof store)) {
    return new store();
  }

  // 用静态变量 instance 来记录是否进行过实例化
  if (store.instance) {
    return store.instance;
  }

  store.instance = this;
}

测试一下

var a = new store();
var b = store();
a === b; // true