Javascript??Constructor構造器模式與Module模塊模式怎么實現

這篇“Javascript  Constructor構造器模式與Module模塊模式怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Javascript  Constructor構造器模式與Module模塊模式怎么實現”文章吧。

前言

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

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

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模塊模式怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。