Javascript? Constructor構(gòu)造器模式與Module模塊模式

更新時間：2022年08月25日 15:09:16 作者：前端修羅場???????

這篇文章主要介紹了Javascript? Constructor構(gòu)造器模式與Module模塊模式，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

前言

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

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

1.Constructor構(gòu)造器模式

1.1基礎(chǔ)Constructor構(gòu)造器模式

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

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

//調(diào)用
var honda = new Car("東風(fēng)Honda",2009,20000);//實例化Car

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

缺陷:

繼承困難;
toString()是為每個使用Car構(gòu)造器創(chuàng)建的新對象而分別重新定義的。這樣不理想，因為這種函數(shù)應(yīng)該在所有的Car類實力之間共享。

1.2進階帶原型的Constructor構(gòu)造器模型

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

	//每個對象都有構(gòu)造器原型的所有屬性。
	Car.prototype.toString = function() {
		return this.model + "已經(jīng)行駛了" + this.miles + "米";
	}
}
//調(diào)用
var honda = new Car("東風(fēng)Honda",2009,20000);//實例化Car
console.log(honda.toString());

優(yōu)點:

toString()的單一實例能夠在所有的Car對象之間共享。

2. Module 模塊模式

模塊能幫助我們清晰分離和組織項目中的代碼單元。

在js中有幾種實現(xiàn)模塊的方法:

對象字面量表示法;
Module模式
AMD模塊
CommonJs模塊
ES Harmony模塊

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

2.1對象字面量

示例：

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

注意 :

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

2.2 Module（模塊）模式

JS中，Module模式用于進一步模擬類的概念。它能夠使一個單獨的對象擁有公有、私有方法和變量，從而屏蔽來自全局作用域的特殊部分。進而降低了與其他腳本沖突的可能性。

其中，私有部分，主要利用了“閉包”。由于閉包的存在，聲明的變量和方法只能在該模式內(nèi)部可用。但在返回對象上定義的變量和方法，外部使用者是能夠調(diào)用的。

一個關(guān)于購物車的例子:

<script type="text/javascript">
	const basketModule = (function() {
		//私有
		let baskey = [];
		function doSomethingPrivate () {
			//實現(xiàn)
		}
		function doSomethingElsePrivate() {
			//實現(xiàn)
		}
		//返回一個暴露出的公有對象API
		return {
			//添加item到購物車
			addItem: function (values) {
				basket.push(values);
			},
			//獲取購物車里的item數(shù)
			getItemCount: function() {
				return basket.length;
			},
			//私有函數(shù)的公有形式別名
			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
	});
	//輸出結(jié)果
	console.log(basketModule.getItemCount());//2
	console.log(basketModule.getTotal());//0.5+1.5 = 2
	//注意
	console.log(basketModule.basket);//underfined。因為basket沒有暴露在公有的API中
</script>

優(yōu)點：

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

缺點：

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

到此這篇關(guān)于Javascript Constructor構(gòu)造器模式與Module模塊模式的文章就介紹到這了,更多相關(guān)Javascript Constructor 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: