JavaScript設(shè)計(jì)模式之工廠方法模式介紹
1. 簡單工廠模式
說明:就是創(chuàng)建一個(gè)工廠類,里面實(shí)現(xiàn)了所對同一個(gè)接口的實(shí)現(xiàn)類的創(chuàng)建。
但是好像JavaScript 好像沒有 接口 這號東西,所以我們?nèi)サ艚涌谶@個(gè)層; 當(dāng)然,我們這里的 實(shí)現(xiàn)類 下的成員變量,方法應(yīng)該都是一樣的;
例如:這時(shí)舉短信發(fā)送跟郵件發(fā)送的例子;
1>. 郵件發(fā)送[實(shí)現(xiàn)]類
function MailSender() {
this.to = '';
this.title = '';
this.content = '';
}
MailSender.prototype.send = function() {
//send body
}
2>. 短信發(fā)送[實(shí)現(xiàn)]類
function SmsSender() {
this.to = '';
this.title = '';
this.content = '';
}
SmsSender.prototype.send = function() {
//send body
}
3>. 創(chuàng)建一個(gè)工廠類:
function SendFactory() {
this.sender = null;
}
SendFactory.prototype.produce = function(type) {
var me = this;
if (type == 'mail') {
me.sender = new MailSender();
} else if (type == 'sms') {
me.sender = new SmsSender();
}
return me.sender;
}
4>. 使用這個(gè)工廠類:
var factory = new SendFactory();
var sender = factory.produce('mail'); //sms
sender.to = 'toName#mail.com';
sender.title = '郵件測試標(biāo)題!';
sender.content = '發(fā)送內(nèi)容';
sender.send();
2. 多個(gè)工廠方法模式
說明:多個(gè)工廠模式方法,是對普通工廠方法的改進(jìn),因?yàn)榉祷貙?shí)現(xiàn)是依據(jù)傳進(jìn)去的字符返回,當(dāng)字符輸入錯(cuò)誤,可能就無法處理,或是處理成錯(cuò)誤的方式; 而多個(gè)工廠模式方法,就可以避免這樣的錯(cuò)誤;
我們對上面的工廠類進(jìn)行改進(jìn):
function SendFactory() {
this.sender = null;
}
SendFactory.prototype.produceMail = function() {
var me = this;
me.sender = new MailSender();
return me.sender;
}
SendFactory.prototype.produceSms = function() {
var me = this;
me.sender = new SmsSender();
return me.sender;
}
使用方法:
var factory = new SendFactory();
var sender = factory.produceSms(); //produceMail
sender.to = 'toName#xxxxx';
sender.title = '短信發(fā)送方法標(biāo)題';
sender.content = '發(fā)送內(nèi)容';
sender.send();
3. 靜態(tài)工廠方法模式
說明:將上面的 多個(gè)工廠方法模式 的方法改為靜態(tài)標(biāo)識即可,使之不必對 SendFactory 進(jìn)行實(shí)例化;
將工廠類代碼修改如下:
var SendFactory = {
produceMail : function() {
return new MailSender();
},
produceSms : function() {
return new SmsSender();
}
}
使用方法:
var sender = SendFactory.produceMail();
sender.to = 'toName#mail.com';
sender.title = '郵件發(fā)送標(biāo)題';
sender.content = '發(fā)送內(nèi)容';
sender.send();
工廠方法模式說明
在面向?qū)ο笏枷刖幊陶f明,在具有很多產(chǎn)品(現(xiàn)實(shí)世界模型,名稱:類名,成員屬性,及操作方法等)需要初始化,即產(chǎn)品需要?jiǎng)?chuàng)建,并且[實(shí)現(xiàn)同一接口時(shí)],可以使用工廠方法模式; 第一種模式,有輸入類型錯(cuò)誤的可能,第二模式,需要用時(shí)即創(chuàng)建工廠實(shí)例;
- [js高手之路]設(shè)計(jì)模式系列課程-發(fā)布者,訂閱者重構(gòu)購物車的實(shí)例
- JS模式之簡單的訂閱者和發(fā)布者模式完整實(shí)例
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
- JavaScript 設(shè)計(jì)模式 安全沙箱模式
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(鏈?zhǔn)秸{(diào)用)
- javascript設(shè)計(jì)模式之解釋器模式詳解
- javascript 設(shè)計(jì)模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
- NodeJS設(shè)計(jì)模式總結(jié)【單例模式,適配器模式,裝飾模式,觀察者模式】
- 大型JavaScript應(yīng)用程序架構(gòu)設(shè)計(jì)模式
- 原生js實(shí)現(xiàn)的觀察者和訂閱者模式簡單示例
相關(guān)文章
webpack4手動(dòng)搭建Vue開發(fā)環(huán)境實(shí)現(xiàn)todoList項(xiàng)目的方法
這篇文章主要介紹了webpack4手動(dòng)搭建Vue開發(fā)環(huán)境實(shí)現(xiàn)todoList項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
js在數(shù)組中刪除重復(fù)的元素自保留一個(gè)(兩種實(shí)現(xiàn)思路)
遍歷要?jiǎng)h除的數(shù)組arr, 把元素分別放入另一個(gè)數(shù)組tmp中,在判斷該元素在arr中不存在才允許放入tmp中,具體實(shí)現(xiàn)如下,需要的朋友可以看看2014-08-08
javascript axios 實(shí)現(xiàn)進(jìn)度監(jiān)控的示例代碼
在使用axios發(fā)送HTTP請求時(shí),可以通過onUploadProgress和onDownloadProgress來監(jiān)控上傳和下載的進(jìn)度,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部示例代碼
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
js 距離某一時(shí)間點(diǎn)時(shí)間是多少實(shí)現(xiàn)代碼
距離某一時(shí)間點(diǎn)時(shí)間是多少,在本文將為大家介紹下js中是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過2013-10-10
JavaScript tab選項(xiàng)卡插件實(shí)例代碼
這篇文章主要介紹了JavaScript tab選項(xiàng)卡插件實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02

