首頁 > web前端 > js教程 > 主體

JavaScript設計模式經典之簡單工廠模式程式碼實例

黄舟
發布: 2017-03-20 11:08:02
原創
1184 人瀏覽過

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

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

這個庫裡提供了幾種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 
Object
Factory(){
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時傳進去的參數所決定的。

相關文章:

詳解JavaScript設計模式經典之策略模式

JavaScript設計模式經典之單例模式詳解

javascript設計模式之觀察者模式詳細介紹

#

以上是JavaScript設計模式經典之簡單工廠模式程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!