曾經(jīng)我做后端的時候，前端不加班，現(xiàn)在我做前端了腔召，后端不加班俗慈。
曾經(jīng)我做后端的時候，被設計模式折磨寇漫，現(xiàn)在我做前端了刊殉，還tm得整這個殉摔。
我們（我）平復下心情，來看看前端常用的設計模式有哪些冗澈，以及在前端怎么還會用到設計模式钦勘。
單例模式
是保證一個類只有一個實例，并且提供一個訪問它的全局訪問點
解決問題：某些方法只允許執(zhí)行一次亚亲，比如記錄本地日志（為提高效率彻采，不關(guān)閉日志文件，一直追加）捌归，因為在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
工廠模式
以抽象類約束其實體類行為，用工廠類選擇要實例化的實體類惜索，產(chǎn)出擁有相同功能的對象（在后端語言中返回類型是抽象類）
解決問題：主要解決接口選擇的問題特笋，如日志記錄，可以使用本地日志或者日志實時上報巾兆，以后還可能有其它猎物，但在記錄時不去關(guān)心日志的具體記錄實現(xiàn)
// 定義接口
var iLog = function () { this.msg = '' }
iLog.prototype = {
logError: function() { return new Error('抽象方法不能調(diào)用'); },
logWarn: function() { return new Error('抽象方法不能調(diào)用'); }
};
// 實現(xiàn)接口
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
抽象工廠
圍繞一個超級工廠創(chuàng)建其他工廠。
解決問題：工廠模式的產(chǎn)品有多個角塑，比如日志功能除了自動上報蔫磨，還要有用戶提交反饋的功能
var iLog = function () { this.msg = '' }
iLog.prototype = {
logError: function() { return new Error('抽象方法不能調(diào)用'); },
logWarn: function() { return new Error('抽象方法不能調(diào)用'); }
};
var iFeedback = function () { this.msg = '' }
iFeedback.prototype = {
logError: function() { return new Error('抽象方法不能調(diào)用'); },
logWarn: function() { return new Error('抽象方法不能調(diào)用'); }
};
// 抽象工廠方法
var VehicleFatory = function(subType, superType) {
switch (superType) {
case 'log': subType.prototype = iLog()
case 'feedback': subType.prototype = iFeedback()
}
};
// 創(chuàng)建產(chǎn)品子類繼承相應的產(chǎn)品簇抽象類
var txtLog = function (msg) { this.type = 'txt'; this.msg = msg }
//抽象工廠實現(xiàn)對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
