JavaScript設計模式之工廠模式
工廠模式是一種最常用的實例化對象模式,是用工廠方法代替new操作的一種模式。在工廠模式中,我們在創建對象時不會對客戶端暴露創建邏輯,並且是通過使用一個共同的接口來指向新創建的對象。因為工廠模式就相當於創建實例對象的new,在JavaScript中通常會使用new關鍵字來實例化對象,如A: a=new A(), 工廠模式也是用來創建實例對象的,所以以後new時就要多個心眼,是否可以考慮使用工廠模式,雖然這樣做,可能多做一些工作,但會給你系統帶來更大的可擴展性和盡量少的修改量。
設計意圖:定義一個創建對象的接口,讓其子類自己決定實例化哪一個工廠類,工廠模式使其創建過程延遲到子類進行。
主要解決的問題:
使用場景:我們明確地計劃不同條件下創建不同實例時。
舉個現實中的例子來理解工廠模式:現在有一個生成車輛的公司,生產的產品有自行車、摩托車、電動車三種。市場的需求在不斷的變化,工廠是無法準確的確定當下市場需要多少的自行車、摩托車、電動車。如果某種車輛生產的太多,就會因為銷售不出去而造成庫存積壓嚴重的問題。所以工廠的領導會議決定:往後自由在接收到車輛的具體訂單時再生產具體的車輛,也就是說,如果接到的是自行車的訂單就生產自行車,接到摩托車訂單就生產摩托車,接到電動車訂單就生產電動車。
最簡單的工廠模式程序實例:
var Car = (function(){var Car = function(model, year, miles){ this.model = model; this.year = year; this.miles = miles; }; return function(model, year, miles){ return new Car(model, year, miles); }; })(); var dika = new Car(‘Dika‘, 2008, 20000);
這是最簡單的工廠模式,只用於創建一種實例對象。
再來看看復雜點的實例:
//工廠對象 var Factory = (function(){ //工廠生產管理對象 var productManager = {}; //生產自行車 productManager.createBicycle = function(){ this.model = "Bicycle"; console.log("product Bicycle!"); }; //生產摩托車 productManager.createMoto = function(){ this.model = "Moto"; console.log("product Moto!"); }; //生產電動車 productManager.createElectrocar= function(){ this.model = "Electrocar"; console.log("product Electrocar!"); }; //生產函數 productManager.create = function(type){ return new productManager[type]; }; return { productManager: productManager } })(); var tom = Factory.productManager.create("createMoto");
接下來我們再看一個在網頁中使用的一個實例:假如我們想在網頁面裏插入一些元素,而這些元素類型不固定,可能是圖片,也有可能是連接,甚至可能是文本,根據工廠模式的定義,我們需要定義工廠類和相應的子類:
var page = (function(){ var dom = {}; //子類1:處理文本 dom.Text = function(){ this.insert = function(where, text){ var txt = document.createTextNode(text); where.appendChild(txt); } }; //子類2:處理鏈接 dom.Link = function(){ this.insert = function(where, url){ var link = document.createElement("a"); link.href = url; link.appendChild(document.createTextNode(url)); where.appendChild(link); } }; //子類3:處理圖片 dom.Image = function () { this.insert = function (where, url) { var img = document.createElement(‘img‘); img.src = url; where.appendChild(img); }; }; //創建函數 dom.create = function(type){ return new dom[type]; }; return { dom: dom } })(); var t = page.dom.create(‘Text‘); t.insert(document.body, "新建文本節點");
工廠模式的優缺點:
優點: 1、一個調用者想創建一個對象,只要知道其名稱就可以了。 2、擴展性高,如果想增加一個產品,只要擴展一個工廠類就可以。 3、屏蔽產品的具體實現,調用者只關心產品的接口。
缺點:每次增加一個產品時,都需要增加一個具體類和對象實現工廠,使得系統中類的個數成倍增加,在一定程度上增加了系統的復雜度,同時也增加了系統具體類的依賴。這並不是什麽好事。
JavaScript設計模式之工廠模式