Javascript Constructor構造器模式與Module模組模式

2022-08-25 18:01:13

前言

首先我們要知道：什麼是模式？

模式，就是專門為某些常見問題開發的、優秀的解決方案。它通常經過一系列實踐證明、針對某類問題具有可重用性的解決方案。而設計模式，不同於程式設計模式，其與具體的語言無關。

1.Constructor構造器模式

1.1基礎Constructor構造器模式

// 使用函數來模擬一個Car類
function Car(model,year,miles) {
	this.model = model ;
	this.year = year;
	this.miles = miles;

	this.toString = function () {
		return this.model + "已經行駛了" + this.miles + "米";
	}
}

//呼叫
var honda = new Car("東風Honda",2009,20000);//範例化Car

//輸出結果
console.log(honda.toString());

缺陷:

繼承困難;
toString()是為每個使用Car構造器建立的新物件而分別重新定義的。這樣不理想，因為這種函數應該在所有的Car類實力之間共用。

1.2進階帶原型的Constructor構造器模型

function Car(model,year,miles) {
	this.model = model ;
	this.year = year;
	this.miles = miles;

	//每個物件都有構造器原型的所有屬性。
	Car.prototype.toString = function() {
		return this.model + "已經行駛了" + this.miles + "米";
	}
}
//呼叫
var honda = new Car("東風Honda",2009,20000);//範例化Car
console.log(honda.toString());

優點:

toString()的單一範例能夠在所有的Car物件之間共用。

2. Module 模組模式

模組能幫助我們清晰分離和組織專案中的程式碼單元。

在js中有幾種實現模組的方法:

物件字面量表示法;
Module模式
AMD模組
CommonJs模組
ES Harmony模組

本篇中我們主要介紹“物件字面量”表示法。

2.1物件字面量

範例：

<script type="text/javascript">
    const myObjectLiteral = {
        varibaleKey : varibaleValue,
        function: function () {
                //實現
        }
    };
</script>

注意 :

物件字面量不需要使用 new 範例化；
不能用在一個語句的開頭，否則可能會被解釋為一個塊的開始；

2.2 Module（模組）模式

JS中，Module模式用於進一步模擬類的概念。它能夠使一個單獨的物件擁有公有、私有方法和變數，從而遮蔽來自全域性作用域的特殊部分。進而降低了與其他指令碼衝突的可能性。

其中，私有部分，主要利用了“閉包”。由於閉包的存在，宣告的變數和方法只能在該模式內部可用。但在返回物件上定義的變數和方法，外部使用者是能夠呼叫的。

一個關於購物車的例子:

<script type="text/javascript">
	const basketModule = (function() {
		//私有
		let baskey = [];
		function doSomethingPrivate () {
			//實現
		}
		function doSomethingElsePrivate() {
			//實現
		}
		//返回一個暴露出的公有物件API
		return {
			//新增item到購物車
			addItem: function (values) {
				basket.push(values);
			},
			//獲取購物車裡的item數
			getItemCount: function() {
				return basket.length;
			},
			//私有函數的公有形式別名
			doSomething: doSomethingPrivate,
			//獲取購物車裡所有item的價格總值
			getTotal: function() {
				let itemCount = this.getItemCount(),
					total = 0;
				while (itemCount--) {
					total += basket[itemCount].price;

				}
				return total;
			}
		}

	})();
	//互動
	basketModule.addItem({
		item: "bread",
		price: 0.5
	});
	basketModule.addItem({
		item: "醬油",
		price: 1.5
	});
	//輸出結果
	console.log(basketModule.getItemCount());//2
	console.log(basketModule.getTotal());//0.5+1.5 = 2
	//注意
	console.log(basketModule.basket);//underfined。因為basket沒有暴露在公有的API中
</script>

優點：