JavaScript設計模式閱讀
更多文章查看本專欄
設計模式第一篇:創建型設計模式
1、簡單工廠模式
簡單工廠模式:又叫靜態工廠方法,有一個工廠對象決定創建某一種產品對象類的實例。主要用於創建同一類對象。
根據現有的需求選擇不同的東西。
// 簡單的工廠模式
var redBall = function () {
console.log('redBall')
};
var greenBall = function () {
console.log('greenBall')
};
var blackBall = function () {
console.log('blackBall')
};
var blueBall = function () {
console.log('blueBall')
};
//工廠函數
var ballFactory = function (type) {
switch (type) {
case 'red':
return new redBall();
break;
case 'green':
return new greenBall();
break;
case 'black':
return new blackBall();
break;
case 'blue':
return new blueBall();
break;
}
}
通過一個工廠產生多個同類的,或者有相同屬性但是也存在差異的產品。
function createBook(name,time,type) {
var t = new Object();
t.name = name;
t.time = time;
t.type = type;
return t;
}
function createBall(type,text) {
var t = new Object();
t.content = text;
t.show = function () {
// do something
}
switch (type) {
case 'red':
// different Part
break;
case 'green':
// different Part
break;
case 'black':
// different Part
break;
case 'blue':
// different Part
break;
}
}
和類的區別:類是將初始的東西給你,然後你自己去對相應的需求進行添加實例方法。而工廠是根據你需要的方法直接生成好給你。好處,如果有大量相同的含有特殊功能的實例存在,可以通過簡單工廠增加複用性。
核心:根據情況的不同選擇不同的情況進行處理,像是一個封裝型的'if else'。
2、工廠方法模式
工廠方法模式:又稱爲工廠模式,也叫虛擬構造器模式或者多態工廠模式。
它屬於類創建型模式。通過對產品類的抽象使其創建業務,只要負責用於創建多類的實例。
將實際創建對象的工作推遲到了子類當中。
// 類的安全模式
var Factory = function (type, content) {
if(this instanceof Factory){
return new this[type](content);
}else{
return new Factory(type, content);
}
};
// 創建不同類型基類的實現
Factory.prototype={
Java:function (content) {
this.content = content;
},
PHP:function (content) {
this.content = content;
},
Python:function (content) {
this.content = content;
},
JavaScript:function (content) {
this.content = content;
},
}
3、抽象工廠模式
通過對類的工廠抽象使其業務用於對產品類簇的創建,而不負責創建某一類產品的實例。
用於產生類簇。
創建一個類,類裏面擁有許多抽象的類,抽象的類定義了同類的類的結構。在使用的時候將抽象的類進行繼承。
/**
* 實現subType類對工廠類中的superType類型的抽象類的繼承
* @param subType 要繼承的類
* @param superType 工廠類中的抽象類type
*/
const VehicleFactory = function(subType, superType) {
if (typeof VehicleFactory[superType] === 'function') {
function F() {
this.type = '車輛'
}
F.prototype = new VehicleFactory[superType]()
subType.constructor = subType
subType.prototype = new F() // 因爲子類subType不僅需要繼承superType對應的類的原型方法,還要繼承其對象屬性
} else throw new Error('不存在該抽象類')
}
VehicleFactory.Car = function() {
this.type = 'car'
}
VehicleFactory.Car.prototype = {
getPrice: function() {
return new Error('抽象方法不可使用')
},
getSpeed: function() {
return new Error('抽象方法不可使用')
}
}
const BMW = function(price, speed) {
this.price = price
this.speed = speed
}
VehicleFactory(BMW, 'Car') // 繼承Car抽象類
BMW.prototype.getPrice = function() { // 覆寫getPrice方法
console.log(`BWM price is ${this.price}`)
}
BMW.prototype.getSpeed = function() {
console.log(`BWM speed is ${this.speed}`)
}
const baomai5 = new BMW(30, 99)
// baomai5.getPrice() // BWM price is 30
// baomai5 instanceof VehicleFactory.Car // true
4、建造者模式
將一個複雜對象的構建層與其表示層相互分離,同樣的構造過程可採用不同的表示。
關注產生過程,將對象的創建分爲模塊化創建,自定義度變高。
建造一個電腦:
// 構建基本主體
const basicComputer = function () {
}
basicComputer.prototype = {
// 自定義的一些原型方法
}
// 構建CPU模塊
const cpu = function (type) {
this.type = type;
}
cpu.prototype = {
// 自定義的一些原型方法
}
// 構建顯卡模塊
const graphicsCard = function (type) {
this.type = type;
}
graphicsCard.prototype = {
// 自定義的一些原型方法
}
// 構建屏幕模塊
const screen = function (type) {
this.type = type;
}
screen.prototype = {
// 自定義的一些原型方法
}
const computer = function () {
const t = new basicComputer();
t.cpu = new cpu();
t.graphicsCard = new graphicsCard();
t.screen = new screen();
return t;
}
5、原型模式
用原型實例指向創建對象的類,使用與創建新的對象的類共享原型對象的類型以及方法。
基於繼承,將複雜的放置在函數中,簡單的共同的放置到一個構造函數中。
在使用的時候可以對原型進行拓展。
代碼與繼承類似,但是核心就是將簡單的共有的放置到構造函數中,與類的思想類似。
6、單例模式
只允許實例化一次的類。在使用的時候可以用於創建代碼庫,創建命名空間。
單例模式實現代碼庫,產生命名空間,一次只能實例化一個。
// 一個命名空間
const A = {
fun_1: {
fun_1_1:function () {
// do something
},
},
fun_2: {
// do something
},
fun_3:function () {
// do something
}
}
// 空間類可爲一個代碼塊,也可以爲更多一層次的代碼庫(命名空間)