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

Posted on by

前言

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

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

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>

優點：

  • 整潔；
  • 支持私有數據。在 Module 模式中，代碼的公有部分能夠接觸到私有部分，而外部代碼無法接觸到類的私有部分。

缺點：

  • 可見性需要改變時，需要修改每一處使用過該成員的地方；
  • 無法訪問之後在方法中添加的私有成員；
  • 無法為私有成員創建自動化測試單元；

到此這篇關於Javascript  Constructor構造器模式與Module模塊模式的文章就介紹到這瞭,更多相關Javascript  Constructor 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：