JavaScript設計模式經典之簡單工廠模式

alloyteam發表於2014-09-15

簡單工廠模式是由一個方法來決定到底要建立哪個類的例項, 而這些例項經常都擁有相同的介面. 這種模式主要用在所例項化的型別在編譯期並不能確定, 而是在執行期決定的情況。 說的通俗點,就像公司茶水間的飲料機,要咖啡還是牛奶取決於你按哪個按鈕。

簡單工廠模式在建立ajax物件的時候也非常有用.

之前我寫了一個處理ajax非同步巢狀的庫,地址在 https://github.com/AlloyTeam/DanceRequest

這個庫裡提供了幾種ajax請求的方式,包括xhr物件的get, post, 也包括跨域用的jsonp和iframe. 為了方便使用, 這幾種方式都抽象到了同一個介面裡面.

var request1 = Request(‘cgi.xx.com/xxx’ , ”get’ );
request1.start();
request1.done( fn );
var request2 = Request(‘cgi.xx.com/xxx’ , ”jsonp’ );
request2.start();
request2.done( fn );

Request實際上就是一個工廠方法, 至於到底是產生xhr的例項, 還是jsonp的例項. 是由後來的程式碼決定的。

實際上在js裡面,所謂的建構函式也是一個簡單工廠。只是批了一件new的衣服. 我們扒掉這件衣服看看裡面。

通過這段程式碼, 在firefox, chrome等瀏覽器裡,可以完美模擬new.

       function A( name ){
this.name = name;
}
function ObjectFactory(){
var obj = {},
Constructor = Array.prototype.shift.call( arguments );
obj.__proto__ =  typeof Constructor .prototype === ‘number’  ? Object.prototype
:  Constructor .prototype;
var ret = Constructor.apply( obj, arguments );
return typeof ret === ‘object’ ? ret : obj;
}
var a = ObjectFactory( A, ‘svenzeng’ );
alert ( a.name );  //svenzeng

這段程式碼來自es5的new和構造器的相關說明, 可以看到,所謂的new, 本身只是一個物件的複製和改寫過程, 而具體會生成什麼是由呼叫ObjectFactory時傳進去的引數所決定的。

相關文章