DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 深入理解JavaScript系列(28):設計模式之工廠模式詳解
深入理解JavaScript系列(28):設計模式之工廠模式詳解
編輯:JavaScript綜合知識     

 這篇文章主要介紹了深入理解JavaScript系列(28):設計模式之工廠模式詳解,工廠模式定義一個用於創建對象的接口,這個接口由子類決定實例化哪一個類,需要的朋友可以參考下

   

介紹

與創建型模式類似,工廠模式創建對象(視為工廠裡的產品)時無需指定創建對象的具體類。

工廠模式定義一個用於創建對象的接口,這個接口由子類決定實例化哪一個類。該模式使一個類的實例化延遲到了子類。而子類可以重寫接口方法以便創建的時候指定自己的對象類型。

這個模式十分有用,尤其是創建對象的流程賦值的時候,比如依賴於很多設置文件等。並且,你會經常在程序裡看到工廠方法,用於讓子類類定義需要創建的對象類型。

正文

下面這個例子中,是應用了工廠方法對第26章構造函數模式代碼的改進版本:

代碼如下:
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 tom = new Car("Tom", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

 

不好理解的話,我們再給一個例子:

代碼如下:
var productManager = {};

 

productManager.createProductA = function () {
console.log('ProductA');
}

productManager.createProductB = function () {
console.log('ProductB');
}

productManager.factory = function (typeType) {
return new productManager[typeType];
}

productManager.factory("createProductA");

 

如果還不理解的話,那我們就再詳細一點咯,假如我們想在網頁面裡插入一些元素,而這些元素類型不固定,可能是圖片,也有可能是連接,甚至可能是文本,根據工廠模式的定義,我們需要定義工廠類和相應的子類,我們先來定義子類的具體實現(也就是子函數):

代碼如下:
var page = page || {};
page.dom = page.dom || {};
//子函數1:處理文本
page.dom.Text = function () {
this.insert = function (where) {
var txt = document.createTextNode(this.url);
where.appendChild(txt);
};
};

 

//子函數2:處理鏈接
page.dom.Link = function () {
this.insert = function (where) {
var link = document.createElement('a');
link.href = this.url;
link.appendChild(document.createTextNode(this.url));
where.appendChild(link);
};
};

//子函數3:處理圖片
page.dom.Image = function () {
this.insert = function (where) {
var im = document.createElement('img');
im.src = this.url;
where.appendChild(im);
};
};

 

那麼我們如何定義工廠處理函數呢?其實很簡單:

代碼如下:
page.dom.factory = function (type) {
return new page.dom[type];
}
使用方式如下:
代碼如下:
var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);
至此,工廠模式的介紹相信大家都已經了然於心了,我就不再多敘述了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved