正常操作，正常分析，大家好，我是D1n910。

今天繼續(xù)來(lái)學(xué)習(xí) 《JavaScript 設(shè)計(jì)模式》的第二篇 創(chuàng)建型設(shè)計(jì)模式 的

第3章 寫(xiě)的都是看到的——面向?qū)ο缶幊獭?/p>

這是一個(gè)連續(xù)的讀書(shū)筆記，所以如果你之前的內(nèi)容沒(méi)有看的話，請(qǐng)務(wù)必一定要去看。

這里再次感謝 《Javascript 設(shè)計(jì)模式》及其作者 張榮銘，專欄內(nèi)容是在它的基礎(chǔ)上生成的。

第二篇 創(chuàng)建型設(shè)計(jì)模式

創(chuàng)建型設(shè)計(jì)模式是一類處理對(duì)象創(chuàng)建的設(shè)計(jì)模式。

通過(guò)某種方式控制對(duì)象的創(chuàng)建來(lái)避免基本對(duì)象創(chuàng)建時(shí)可能導(dǎo)致設(shè)計(jì)上的問(wèn)題或增加設(shè)計(jì)上的復(fù)雜度。

第 3 章 神奇的魔術(shù)師——簡(jiǎn)單工廠模式

3.1、工作中的第一次需求（p34）

作者列舉了一種場(chǎng)景來(lái)說(shuō)明功能相似的不同類可以放到一起。

程序猿A在工作中，陸續(xù)接到下面的需求，并在工程代碼里書(shū)寫(xiě)。

需求一：針對(duì)登錄模塊，如果用戶輸入用戶名不符合規(guī)范，則彈出一個(gè)警告，“用戶名不能多于16個(gè)字母或數(shù)字”。

?var LoginAlert = function (text) {

????????this.content = text

}

LoginAlert.prototype.show = function(){

????// 顯示提示框

}

var userNameAlert = new?LoginAlert('用戶名不能多于16個(gè)字母或數(shù)字')

userNameAlert.show()

需求二：針對(duì)登錄模塊，如果用戶輸入密碼錯(cuò)誤，則彈出一個(gè)警告，“輸入的密碼不正確”。

var?passswordAlert= new?LoginAlert('輸入的密碼不正確')

passswordAlert.show()

需求三：針對(duì)登錄輸入框，如果用戶登錄用戶名不存在，則彈出一個(gè)警告，“用戶名不存在，請(qǐng)重新輸入”?！?但是這時(shí)候的警示框中添加一個(gè)注冊(cè)按鈕。

程序猿A想，之前的沒(méi)辦法復(fù)用了。于是重新創(chuàng)建了一個(gè)類。

?var?LoginConfirm= function (text) {

????????this.content = text

}

LoginConfirm.prototype.show = function(){

????// 顯示提示框

}

var?LoginFailConfirm?= new?LoginConfirm('您的用戶名不存在，請(qǐng)重新輸入')

LoginFailConfirm.show()

需求四：登錄成功以后，彈出一個(gè)自定義提示框，除了有確定取消按鈕，也提示一句：“歡迎回來(lái)，請(qǐng)出入您今天的心情吧?！?/p>

程序猿A想，之前的沒(méi)辦法又復(fù)用了。于是又重新創(chuàng)建了一個(gè)類。

?var?LoginPrompt= function (text) {

????????this.content = text

}

LoginPrompt.prototype.show = function(){

????// 顯示提示框

}

……

這時(shí)候程序猿 B 也在寫(xiě)相關(guān)的內(nèi)容，他在寫(xiě)注冊(cè)模塊，也要用到提示框，當(dāng)他向程序猿 A 要相關(guān)代碼時(shí)，不樂(lè)意了。

他覺(jué)得這里的類太多了，而且都是用 Login 作為前綴的，希望程序猿 A 寫(xiě)一個(gè)【簡(jiǎn)單工廠】給他。

3.2、如果類太多，那么提供一個(gè)（p35）

3.1?里創(chuàng)建了三種基類，每次用的時(shí)候要找到對(duì)應(yīng)的基類，而且這里的類名還是帶 Login 前綴的，在注冊(cè)模塊用起來(lái)，也感覺(jué)很奇怪。

如果把這些基類封裝起來(lái)，放到一個(gè)工廠里，把需要的類型告訴給工廠，工廠自動(dòng)吐出需要的類。用的時(shí)候也只需要記住對(duì)應(yīng)的工廠即可。

比如剛剛的函數(shù)，都是彈窗的，可以放到自定義彈窗工廠里。

var PopFactory = function(name, str) {

????switch(name) {

????????? ? case 'alert':

????????????????retrun new LoginAlert(str);

????????????case 'confirm':

????????????????return new LoginConfirm(str);

????????????case 'prompt':

????????????????? ? return new LoginPrompt(str);

????}

}

var resigerConfirm?= PopFactory('confirm', '該用戶名已注冊(cè)過(guò)')

resigerConfirm.show()

3.3、一個(gè)對(duì)象有時(shí)也可代替許多類（p37）

上面的三個(gè)類其實(shí)有很多地方時(shí)一樣的，可以抽離出來(lái)公用。用簡(jiǎn)單工廠方式實(shí)現(xiàn)他們。

這里的對(duì)象工廠模式是沒(méi)有類的，無(wú)需做任何繼承，只需要?jiǎng)?chuàng)建對(duì)象即可。然后對(duì)這個(gè)對(duì)象進(jìn)行大量拓展方法和屬性，并在最終對(duì)象返回出來(lái)。

比如創(chuàng)建書(shū)，它的屬性有書(shū)名，出版時(shí)間，類型，那么可以用工廠模式實(shí)現(xiàn)。

// 工廠模式

function createBook(name, time, type) {

????var o = new Object();

????o.name = name;

????o.time = time;

????o.type = type;

????o.getName = function() {

console.log(this.name)

????}

return o

}

var book1 = createBook('js book', 2014, 'js')

var book2 = createBook('css book', 2013, 'css')

這里很像寄生式繼承，不過(guò)這里的 o 沒(méi)有繼承任何類或者對(duì)象。

3 個(gè)類改成一個(gè)工廠模式也一樣，只需要把差異部分提取出來(lái)就行。

function createPop(type, text) {

????var o = new Object();

????o.content = text;

????o.show = funtion() {

????????// 顯示方法

????};

????if (type == 'alert') {

????// 警示框差異部分

????}

????// ……

// 將對(duì)象返回

????return 0

}

// 創(chuàng)建警示框

var userNameAlert = createPop('alert', '用戶名只能是26個(gè)字母和數(shù)字')

（其實(shí)上面的內(nèi)容，用類也可以實(shí)現(xiàn)啊，所以感覺(jué)很雞肋的樣子?。?/p>

3.4、你的理解決定你選擇的方式

這兩個(gè)工廠是有區(qū)別的，一個(gè)是通過(guò)類的實(shí)例化對(duì)象創(chuàng)建；一個(gè)是創(chuàng)建一個(gè)新對(duì)象，然后進(jìn)行包裝增加其屬性和功能實(shí)現(xiàn)的。

前者如果有繼承父類的話，那么父類的方法是能共用的。

而后面寄生方式創(chuàng)建的對(duì)象都是一個(gè)新的個(gè)體，所以他們的方法就不能共用了。

要按照具體需求來(lái)決定自己要的方法。

本章End

感覺(jué)簡(jiǎn)單工廠好水的樣子？

確實(shí)很簡(jiǎn)單！

D1n910?

2012.02.13 15：09?寫(xiě)于福永