深入理解JavaScript系列(28):設(shè)計模式之工廠模式詳解

字號:


    這篇文章主要介紹了深入理解JavaScript系列(28):設(shè)計模式之工廠模式詳解,工廠模式定義一個用于創(chuàng)建對象的接口,這個接口由子類決定實例化哪一個類,需要的朋友可以參考下
    介紹
    與創(chuàng)建型模式類似,工廠模式創(chuàng)建對象(視為工廠里的產(chǎn)品)時無需指定創(chuàng)建對象的具體類。
    工廠模式定義一個用于創(chuàng)建對象的接口,這個接口由子類決定實例化哪一個類。該模式使一個類的實例化延遲到了子類。而子類可以重寫接口方法以便創(chuàng)建的時候指定自己的對象類型。
    這個模式十分有用,尤其是創(chuàng)建對象的流程賦值的時候,比如依賴于很多設(shè)置文件等。并且,你會經(jīng)常在程序里看到工廠方法,用于讓子類類定義需要創(chuàng)建的對象類型。
    正文
    下面這個例子中,是應(yīng)用了工廠方法對第26章構(gòu)造函數(shù)模式代碼的改進(jìn)版本:
    代碼如下:
    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");
    如果還不理解的話,那我們就再詳細(xì)一點咯,假如我們想在網(wǎng)頁面里插入一些元素,而這些元素類型不固定,可能是圖片,也有可能是連接,甚至可能是文本,根據(jù)工廠模式的定義,我們需要定義工廠類和相應(yīng)的子類,我們先來定義子類的具體實現(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)了然于心了,我就不再多敘述了。