前端设计模式及应用

曾经我做后端的时候，前端不加班，现在我做前端了，后端不加班。
曾经我做后端的时候，被设计模式折磨，现在我做前端了，还tm得整这个。
我们（我）平复下心情，来看看前端常用的设计模式有哪些，以及在前端怎么还会用到设计模式。

单例模式

是保证一个类只有一个实例，并且提供一个访问它的全局访问点
解决问题：某些方法只允许执行一次，比如记录本地日志（为提高效率，不关闭日志文件，一直追加），因为在win下只允许一个线程打开文件，所以只能有一个实例去操作

var Single = (function () {
    var instance
    function getLogFile() {
    return fs.openSync('c:\\log.txt', 'w')
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = { fd: getLogFile() } 
      }
      return instance
    }
  }
})()

Single.getInstance().fd

工厂模式

以抽象类约束其实体类行为，用工厂类选择要实例化的实体类，产出拥有相同功能的对象（在后端语言中返回类型是抽象类）
解决问题：主要解决接口选择的问题，如日志记录，可以使用本地日志或者日志实时上报，以后还可能有其它，但在记录时不去关心日志的具体记录实现

// 定义接口
var iLog = function () { this.msg = '' }
iLog.prototype = {
    logError: function() { return new Error('抽象方法不能调用'); },
    logWarn: function() { return new Error('抽象方法不能调用'); }
};

// 实现接口
var txtLog = function (msg) { this.type = 'txt'; this.msg = msg }
txtLog.prototype = new iLog()
txtLog.prototype.logError = function() { return console.info('loged in local txt', this.msg); }
txtLog.prototype.logWarn = function() { return console.info('loged in local txt', this.msg); }

var nwLog = function () { this.type = 'nw' }
nwLog.prototype = new iLog()
nwLog.prototype.logError = function() { return console.info('loged in network', this.msg); }
nwLog.prototype.logWarn = function() { return console.info('loged in network', this.msg); }

// factroy
var logFactroy = function (type, msg) {
  switch (type) {
    case 'txt': return new txtLog(msg);
    case 'net': return new nwLog(msg);
  }
}

var log007 = logFactroy('txt', 'error on P32')
log007 instanceof iLog
> true
log007.logError()
> loged in local txt error on P32

抽象工厂

围绕一个超级工厂创建其他工厂。
解决问题：工厂模式的产品有多个，比如日志功能除了自动上报，还要有用户提交反馈的功能

var iLog = function () { this.msg = '' }
iLog.prototype = {
    logError: function() { return new Error('抽象方法不能调用'); },
    logWarn: function() { return new Error('抽象方法不能调用'); }
};

var iFeedback = function () { this.msg = '' }
iFeedback.prototype = {
    logError: function() { return new Error('抽象方法不能调用'); },
    logWarn: function() { return new Error('抽象方法不能调用'); }
};

// 抽象工厂方法
var VehicleFatory = function(subType, superType) {
  switch (superType) {
    case 'log': subType.prototype = iLog()
    case 'feedback': subType.prototype = iFeedback()
  }
};

// 创建产品子类继承相应的产品簇抽象类
var txtLog = function (msg) { this.type = 'txt'; this.msg = msg }
//抽象工厂实现对Car抽象类的继承
VehicleFactory(txtLog, 'Log');
txtLog.prototype.logError = function() { return console.info('loged in local txt', this.msg); }
txtLog.prototype.logWarn = function() { return console.info('loged in local txt', this.msg); }

new txtLog('error on P32').logError()
> loged in local txt error on P32