首頁 > web前端 > js教程 > JavaScript設計模式之工廠模式與建構器模式_javascript技巧

JavaScript設計模式之工廠模式與建構器模式_javascript技巧

WBOY
發布: 2016-05-16 16:14:37
原創
1296 人瀏覽過

什麼是模式

前陣子準備期末考試,勞神又傷身的,實在閒不得空來更新文章,今天跟大家說說javascript中的設計模式。

首先呢,我們需要知道的是:模式是一種可重複使用的解決方案,而反模式呢就是針對某個問題的不良解決方案。

js反模式常見範例

1.向setTimeout和setInterval傳遞字串,而不是函數,這會觸發eval()的內部使用。
2.在全域上下文中定義大量的變數污染全域命名空間
3.修改Object類別的原型
4.以內聯形式使用js,嵌入在HTML檔案中的js程式碼是無法包含在外部單元測試工具中的。
5.濫用document.write,如果在頁面載入完成後執行docume.write,它會重寫我們所在的頁面,可以使用document.creatElement代替的話就盡量不用docume.write。

設計模式的類別

建立型設計模式

創建型設計模式專注於處理物件創建機制,以適合給定情況的方式來建立物件。屬於這個類別的屬性包括:

Constructor構造器、Factory工廠、Abstract抽象、Prototype原型、Singleton單例和Builder產生器

結構型設計模式

結構型模式與物件組合有關,通常可以用來找出在不同物件之間建立關係的簡單方法。
屬於這個類別的模式包括:

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

行為設計模式

行為模式專注於改善或簡化系統中不同物件之間的溝通。

行為模式包括:

Iterator迭代器、Mediator中介者、Observer觀察者和Visitor訪客

Factory(工廠)模式

為了解決多個類似物件宣告的問題,我們可以使用一種稱為 工廠模式的方法,這種方法 就是為了解決實例化物件產生大量重複的問題。

複製程式碼 程式碼如下:


工廠模式的分類

工廠模式分為簡單工廠、抽象工廠和智慧工廠,工廠模式不顯示地要求使用一個建構函數。

簡單工廠模式:使用一個類別(通常為單體)來產生實例。
複雜工廠模式:使用子類別來決定一個成員變數應該是哪個特定的類別的實例。

工廠模式之利

主要好處就是可以消除物件間的耦合,透過使用工程方法而不是new關鍵字。將所有實例化的程式碼集中在一個位置防止程式碼重複。
工廠模式之弊

大多數類別最好使用new關鍵字和建構函數,可以讓程式碼更簡單易讀。而不必去查看工廠方法來知道。   
工廠模式解決了重複實例化的問題 ,但還有一個問題,那就是識別問題,因為根本無法 搞清楚他們到底是哪個對象的實例。

複製程式碼 程式碼如下:

alert(typeof test1); //Object
alert(test1 instanceof Object); //true

何時使用工廠模式?

Factory模式主要在以下場景使用:

1.當物件或組件涉及高複雜性時
2.當需要根據所在的不同環境輕鬆產生物件的不同實例時
3.處理許多共享相同屬性的小型物件或元件時

Constructor(構造器)模式

ECMAScript 中可以採用建構子(建構方法)可用來建立特定的物件。 此模式正好可以解決以上的工廠模式無法辨識物件實例的問題。

複製程式碼 程式碼如下:


使用建構函式的方法 ,即解決了重複實例化的問題 ,又解決了物件辨識的問題,模式與工廠模式的不同之處在於:

1.建構函式方法沒有顯示的建立物件 (new Object());
2.直接將屬性和方法賦值給 this 物件;
3.沒有 renturn 語句。

建構函式的方法有一些規範:

1.函數名和實例化構造名相同且大寫, (PS:非強制,但這麼寫有助於區分構造函數和 普通函數);
2.透過建構函數建立物件,必須使用 new 運算子。 
既然透過建構函式可以建立對象,那麼這個物件是哪裡來的, new Object()在什麼地方執行了?執行的過程如下:

1.當使用了建構子,並且 new 建構子(),那麼就後台執行了 new Object();
2.將建構函數的作用域給新物件 ,(即 new Object()建立的物件),而函數體內的 this 就代表 new Object()出來的物件。
3.執行建構函式內的程式碼;
4.返回新物件(後台直接返回)。

帶原型的Constructor(構造器)

js中有一個名為prototype的屬性。呼叫js建構器建立一個物件後,新物件就會具有建構器原型的所有屬性。透過這種方式,可以建立多個Car對象,並存取相同的原型。

複製程式碼 程式碼如下:

  

現在run()的單一實例就能夠在所有Car物件之間共用。
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板