快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式

更新時(shí)間：2015年02月11日 09:17:03 投稿：junjie

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式,本文同時(shí)講解了設(shè)計(jì)模式的類(lèi)別如創(chuàng)建型設(shè)計(jì)模式、結(jié)構(gòu)型設(shè)計(jì)模式、行為設(shè)計(jì)模式等內(nèi)容,需要的朋友可以參考下

什么是模式

前陣子準(zhǔn)備期末考試，勞神又傷身的，實(shí)在閑不得空來(lái)更新文章，今天和大家說(shuō)說(shuō)javascript中的設(shè)計(jì)模式。

首先呢，我們需要知道的是：模式是一種可復(fù)用的解決方案，而反模式呢就是針對(duì)某個(gè)問(wèn)題的不良解決方案。

js反模式常見(jiàn)例子

1.向setTimeout和setInterval傳遞字符串，而不是函數(shù)，這會(huì)觸發(fā)eval()的內(nèi)部使用。
2.在全局上下文中定義大量的變量污染全局命名空間
3.修改Object類(lèi)的原型
4.以?xún)?nèi)聯(lián)形式使用js，嵌入在HTML文件中的js代碼是無(wú)法包含在外部單元測(cè)試工具中的。
5.濫用document.write，如果在頁(yè)面加載完成后執(zhí)行docume.write，它會(huì)重寫(xiě)我們所在的頁(yè)面，可以使用document.creatElement代替的話就盡量不用docume.write。

設(shè)計(jì)模式的類(lèi)別

創(chuàng)建型設(shè)計(jì)模式

創(chuàng)建型設(shè)計(jì)模式專(zhuān)注于處理對(duì)象創(chuàng)建機(jī)制，以適合給定情況的方式來(lái)創(chuàng)建對(duì)象。屬于這個(gè)類(lèi)別的屬性包括：

Constructor構(gòu)造器、Factory工廠、Abstract抽象、Prototype原型、Singleton單例和Builder生成器

結(jié)構(gòu)型設(shè)計(jì)模式

結(jié)構(gòu)型模式與對(duì)象組合有關(guān)，通?？梢杂糜谡页鲈诓煌瑢?duì)象之間建立關(guān)系的簡(jiǎn)單方法。
屬于這個(gè)類(lèi)別的模式包括：

Decorator裝飾者、Facade外觀、Flyweight享元、Adapter適配器和Proxy代理

行為設(shè)計(jì)模式

行為模式專(zhuān)注于改善或簡(jiǎn)化系統(tǒng)中不同對(duì)象之間的通信。

行為模式包括：

Iterator迭代器、Mediator中介者、Observer觀察者和Visitor訪問(wèn)者

Factory(工廠)模式

為了解決多個(gè)類(lèi)似對(duì)象聲明的問(wèn)題，我們可以使用一種叫做工廠模式的方法，這種方法就是為了解決實(shí)例化對(duì)象產(chǎn)生大量重復(fù)的問(wèn)題。

復(fù)制代碼代碼如下:

<script type="text/javascript">

    function createObject(name,age,profession){//集中實(shí)例化的函數(shù)

        var obj = new Object();

        obj.name = name;

        obj.age = age;

        obj.profession = profession;

        obj.move = function () {

            return this.name + ' at ' + this.age + ' engaged in ' + this.profession;

        };

        return obj;

    }

    var test1 = createObject('trigkit4',22,'programmer');//第一個(gè)實(shí)例

    var test2 = createObject('mike',25,'engineer');//第二個(gè)實(shí)例

    alert(test1.move());

    alert(test2.move());

</script>

工廠模式的分類(lèi)

工廠模式分為簡(jiǎn)單工廠、抽象工廠和智能工廠，工廠模式不顯示地要求使用一個(gè)構(gòu)造函數(shù)。

簡(jiǎn)單工廠模式：使用一個(gè)類(lèi)（通常為單體）來(lái)生成實(shí)例。
復(fù)雜工廠模式：使用子類(lèi)來(lái)決定一個(gè)成員變量應(yīng)該是哪個(gè)具體的類(lèi)的實(shí)例。

工廠模式之利

主要好處就是可以消除對(duì)象間的耦合，通過(guò)使用工程方法而不是new關(guān)鍵字。將所有實(shí)例化的代碼集中在一個(gè)位置防止代碼重復(fù)。
工廠模式之弊

大多數(shù)類(lèi)最好使用new關(guān)鍵字和構(gòu)造函數(shù)，可以讓代碼更加簡(jiǎn)單易讀。而不必去查看工廠方法來(lái)知道。
工廠模式解決了重復(fù)實(shí)例化的問(wèn)題 ,但還有一個(gè)問(wèn)題,那就是識(shí)別問(wèn)題,因?yàn)楦緹o(wú)法搞清楚他們到底是哪個(gè)對(duì)象的實(shí)例。

復(fù)制代碼代碼如下:

alert(typeof test1); //Object 

alert(test1 instanceof Object); //true

何時(shí)使用工廠模式？

Factory模式主要在以下場(chǎng)景使用：

1.當(dāng)對(duì)象或組件涉及高復(fù)雜性時(shí)
2.當(dāng)需要根據(jù)所在的不同環(huán)境輕松生成對(duì)象的不同實(shí)例時(shí)
3.當(dāng)處理很多共享相同屬性的小型對(duì)象或組件時(shí)

Constructor(構(gòu)造器)模式

ECMAScript 中可以采用構(gòu)造函數(shù)(構(gòu)造方法)可用來(lái)創(chuàng)建特定的對(duì)象。該模式正好可以解決以上的工廠模式無(wú)法識(shí)別對(duì)象實(shí)例的問(wèn)題。

復(fù)制代碼代碼如下:

console.log(Benz.run());
console.log(BMW.run());
</script>

使用構(gòu)造函數(shù)的方法，即解決了重復(fù)實(shí)例化的問(wèn)題，又解決了對(duì)象識(shí)別的問(wèn)題，該模式與工廠模式的不同之處在于：

1.構(gòu)造函數(shù)方法沒(méi)有顯示的創(chuàng)建對(duì)象 (new Object());
2.直接將屬性和方法賦值給 this 對(duì)象;
3.沒(méi)有 renturn 語(yǔ)句。

構(gòu)造函數(shù)的方法有一些規(guī)范:

1.函數(shù)名和實(shí)例化構(gòu)造名相同且大寫(xiě), (PS:非強(qiáng)制,但這么寫(xiě)有助于區(qū)分構(gòu)造函數(shù)和普通函數(shù));
2.通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象,必須使用 new 運(yùn)算符。
既然通過(guò)構(gòu)造函數(shù)可以創(chuàng)建對(duì)象，那么這個(gè)對(duì)象是哪里來(lái)的， new Object()在什么地方執(zhí)行了？執(zhí)行的過(guò)程如下:

1.當(dāng)使用了構(gòu)造函數(shù),并且 new 構(gòu)造函數(shù)(),那么就后臺(tái)執(zhí)行了 new Object();
2.將構(gòu)造函數(shù)的作用域給新對(duì)象，(即 new Object()創(chuàng)建出的對(duì)象)，而函數(shù)體內(nèi)的 this 就代表 new Object()出來(lái)的對(duì)象。
3.執(zhí)行構(gòu)造函數(shù)內(nèi)的代碼；
4.返回新對(duì)象(后臺(tái)直接返回)。

帶原型的Constructor(構(gòu)造器)

js中有一個(gè)名為prototype的屬性。調(diào)用js構(gòu)造器創(chuàng)建一個(gè)對(duì)象后，新對(duì)象就會(huì)具有構(gòu)造器原型的所有屬性。通過(guò)這種方式，可以創(chuàng)建多個(gè)Car對(duì)象，并訪問(wèn)相同的原型。

復(fù)制代碼代碼如下:

        };
        var Benz = new Car('S350',2010,20000);
        var Ford = new Car('Ford',2012,12000);

        console.log(Benz.run());//"S350 has done 20000 miles "
        console.log(Ford.run());
    </script>

現(xiàn)在run()的單一實(shí)例就能夠在所有Car對(duì)象之間共享。

您可能感興趣的文章: