深入理解JavaScript系列(28):設計模式之工廠模式詳解
來源:易賢網(wǎng) 閱讀:3998 次 日期:2015-03-06 11:04:21
溫馨提示:易賢網(wǎng)小編為您整理了“深入理解JavaScript系列(28):設計模式之工廠模式詳解”,方便廣大網(wǎng)友查閱!

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

介紹

與創(chuàng)建型模式類似,工廠模式創(chuàng)建對象(視為工廠里的產(chǎn)品)時無需指定創(chuàng)建對象的具體類。

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

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

正文

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

代碼如下:

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");

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

代碼如下:

var page = page || {};

page.dom = page.dom || {};

//子函數(shù)1:處理文本

page.dom.Text = function () {

this.insert = function (where) {

var txt = document.createTextNode(this.url);

where.appendChild(txt);

};

};

//子函數(shù)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);

};

};

//子函數(shù)3:處理圖片

page.dom.Image = function () {

this.insert = function (where) {

var im = document.createElement('img');

im.src = this.url;

where.appendChild(im);

};

};

那么我們?nèi)绾味x工廠處理函數(shù)呢?其實很簡單:

代碼如下:

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);

至此,工廠模式的介紹相信大家都已經(jīng)了然于心了,我就不再多敘述了。

更多信息請查看IT技術專欄

更多信息請查看腳本欄目

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網(wǎng)