什麼是模式
前陣子准備期末考試,勞神又傷身的,實在閒不得空來更新文章,今天和大家說說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(工廠)模式
為了解決多個類似對象聲明的問題,我們可以使用一種叫做 工廠模式的方法,這種方法 就是為了解決實例化對象產生大量重復的問題。
復制代碼 代碼如下:
<script type="text/javascript">
function createObject(name,age,profession){//集中實例化的函數
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');//第一個實例
var test2 = createObject('mike',25,'engineer');//第二個實例
alert(test1.move());
alert(test2.move());
</script>
工廠模式的分類
工廠模式分為簡單工廠、抽象工廠和智能工廠,工廠模式不顯示地要求使用一個構造函數。
簡單工廠模式:使用一個類(通常為單體)來生成實例。
復雜工廠模式:使用子類來決定一個成員變量應該是哪個具體的類的實例。
工廠模式之利
主要好處就是可以消除對象間的耦合,通過使用工程方法而不是new關鍵字。將所有實例化的代碼集中在一個位置防止代碼重復。
工廠模式之弊
大多數類最好使用new關鍵字和構造函數,可以讓代碼更加簡單易讀。而不必去查看工廠方法來知道。
工廠模式解決了重復實例化的問題 ,但還有一個問題,那就是識別問題,因為根本無法 搞清楚他們到底是哪個對象的實例。
復制代碼 代碼如下:
alert(typeof test1); //Object
alert(test1 instanceof Object); //true
何時使用工廠模式?
Factory模式主要在以下場景使用:
1.當對象或組件涉及高復雜性時
2.當需要根據所在的不同環境輕松生成對象的不同實例時
3.當處理很多共享相同屬性的小型對象或組件時
Constructor(構造器)模式
ECMAScript 中可以采用構造函數(構造方法)可用來創建特定的對象。 該模式正好可以解決以上的工廠模式無法識別對象實例的問題。
復制代碼 代碼如下:
<script type="text/javascript">
function Car(model,year,miles){//構造函數模式
this.model = model;
this.year = year;
this.miles = miles;
this.run = function () {
return this.model + " has done " + this.miles + "miles";
}
}
var Benz = new Car('Benz',2014,20000);
var BMW = new Car("BMW",2013,12000);
alert(Benz instanceof Car); //很清晰的識別他從屬於 Car,true
console.log(Benz.run());
console.log(BMW.run());
</script>
使用構造函數的方法 ,即解決了重復實例化的問題 ,又解決了對象識別的問題,該模式與工廠模式的不同之處在於:
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對象,並訪問相同的原型。
復制代碼 代碼如下:
<script type="text/javascript">
function Car(model,year,miles) {
this.model = model;
this.year = year;
this.miles = miles;
}
Car.prototype.run = function () {
return this.model + " has done " + this.miles + " miles ";
};
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>
現在run()的單一實例就能夠在所有Car對象之間共享。