工厂模式

将创建对象的过程封装成函数

function newObj(name, age) {
  var o = new Object();
  o.name = name;
  o.age = age;
  return o;
}
var obj = newObj('张三', 20);

构造函数模式

属性和方法全部在构造函数里面

function ConstructorFn(name, age) {
  this.name = name;
  this.age = age;
  this.getName = function () {
    return this.name
  }
}
var obj2 = new ConstructorFn('张三', 20);

原型模式

属性在构造函数里面，方法在函数的原型上

function PrototypeFn(name, age) {
  this.name = name;
  this.age = age;

}
PrototypeFn.prototype.getName = function () {
  return this.name
}
var obj3 = new PrototypeFn('张三', 20);

单例模式

只允许实例化一次

使用场景：弹窗（登录，loading，toast等）

var Instance = (function () {
  var obj;
  return function () {
    if (obj === undefined) obj = new PrototypeFn(...arguments);
    return obj;
  }
})();
var zhangsan = Instance('张三', 20);
var lisi = Instance('李四', 18);
console.log(zhangsan === lisi) // true {name: "张三", age: 20}

观察者模式

目标对象的“状态”（某个属性）发生改变后，通知它下面的所有观察者进行“更新”（回调函数处理）

使用场景 js事件监听，promise，vue双向绑定

// 目标对象
function TargetFn () {
  this.state = 0;
  this.obs = [];
}
TargetFn.prototype = {
  // 添加观察者
  addObs: function (ob) {
    this.obs.push(ob)
  },
  // 修改状态 
  setState: function (val) {
    this.state = val;
    this.notify()
  },
  // 通知
  notify: function () {
    this.obs.forEach(ob => {
      ob.update(this.state)
    })
  }
}

// 观察者
function Observal (name) {
  this.name = name;
}
Observal.prototype.update = function (data) {
  console.log(this.name, data)
}

// 创建目标对象
const targetObj = new TargetFn();
// 创建观察者
const ob1 = new Observal('ob1')
const ob2 = new Observal('ob2')
// 添加观察者
targetObj.addObs(ob1)
targetObj.addObs(ob2)
// 修改状态
targetObj.setState(1)
targetObj.setState(2)
targetObj.setState(3)

发布订阅模式

发布者，订阅者，调度者

使用场景：不同模块之间消息通信（通过自定义事件实现一个消息触发器）。比如在用户信息模块监听一个“登录成功”的自定义事件，然后在登录模块登录之后，触发这个“登录成功”的自定义事件。

function PubSub () {
  // 调度者
  this.handle = {}
}
// 发布者
PubSub.prototype.publish = function (eventType) {
  this.handle[eventType].forEach(fn => {
    fn.call(this, ...arguments)
  })
}
// 订阅者 
PubSub.prototype.subscribe = function (eventType, fn) {
  this.handle[eventType] = this.handle[eventType] || []
  this.handle[eventType].push(fn)
}

const pubsub = new PubSub();
// 监听事件
pubsub.subscribe('onlogin', function () {
  console.log('登录成功', [...arguments])
})
// 触发事件
pubsub.publish('onlogin', 1,2,3)
// 监听事件
pubsub.subscribe('onlogout', function () {
  console.log('退出', [...arguments])
})
//  触发事件
pubsub.publish('onlogout', 'abc')