設計模式并非是難以理解, 或是難以應用到實踐中的, 相反的, 設計模式恰恰代表了某些場景下的最佳實踐! 這些設計模式通常被有經驗的開發者們所采用。
設計模式是開發者們在開發過程中面臨的一般問題的解決方案。 這些解決方案是眾多開發者們經過長時間的實驗和錯誤所總結出來的
本文將講解前端 (javascript) 的設計模式概念!
工廠模式是程序中相當常用的一種設計模式, 工廠模式在創建對象時, 無需指定創建對象的具體類, 原因是 工廠模式中定義了一個用于創建對象的接口, 這個接口決定了實例化哪一個子類, 而子類可以重寫接口方法以便創建的時候指定自己的對象類型！
另外工廠模式不使用new來獲取對象, 工廠模式分為2種, 第一種是簡單工廠模式, 第二種是抽象工廠模式
抽象工廠模式
抽象工廠模式相對于簡單工廠更加靈活, 因為它將方法都交給子類來完成, 本身并不提供任何方法
何時使用抽象工廠模式
- 當處理很多共享相同屬性的小型對象和組件時
- 當需要根據所在不同環境來創建不同構造函數的實例時
- 當每個子類方法的內部實現不同時
下面是一個簡單的例子, 可以看出抽象工廠類AbstractFactory并不提供任何有效的方法, 方法都會被子類重寫
// 抽象工廠類
function AbstractFactory() {};
// 虛方法
AbstractFactory.prototype.toName = function() {
throw Error('抽象方法不能被調用！');
};
// 生產函數
AbstractFactory.factory = function(say) {
var Say = AbstractFactory[say];
if (Say) {
return new Say;
}
}
// 子類
AbstractFactory.SayHello = function() {
this.name = 'hello';
}
// 子類的方法
AbstractFactory.SayHello.prototype = {
toName: function() {
return this.name;
}
}
下面是一個適當的例子, 當工廠生產的子類的方法實現都截然不同, 但總體的邏輯是相同的時候, 比較適合抽象工廠模式
// 抽象工廠類
function Input() {};
// 虛方法
Input.prototype.getValue = function() {
throw Error('抽象方法不能被調用！');
};
// 生產函數
Input.factory = function(type, option) {
var input = Input[type];
if (input) {
return new input(option);
}
}
// 子類
Input.Text = function(option) {
if (option) {
this.value = option.value;
}
}
// 子類的方法
Input.Text.prototype = {
getValue: function() {
return 'text類型的value是' + this.value;
}
}
// 子類
Input.Password = function(option) {
if (option) {
this.value = option.value;
}
}
// 子類的方法
Input.Password.prototype = {
getValue: function() {
return 'password類型的value是' + this.value;
}
}
var text = Input.factory('Text', {value: 'hello world!'});
var password = Input.factory('Password', {value: '123456'});
text.getValue(); // text類型的value是hello world!
password.getValue(); // password類型的value是123456
其他設計模式
單例模式: http://www.lxweimin.com/p/4c0604f116ba
構造函數模式: http://www.lxweimin.com/p/cf809d980459
建造者模式: http://www.lxweimin.com/p/70cf4bb80549
簡單工廠模式: http://www.lxweimin.com/p/4293450926c2
裝飾者模式: http://www.lxweimin.com/p/16cf284ab810
外觀模式: http://www.lxweimin.com/p/179ae2a13c59
