快捷導(dǎo)航

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

更新時(shí)間：2022年08月25日 15:09:16 作者：前端修羅場(chǎng)???????

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

前言

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

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

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

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

// 使用函數(shù)來(lái)模擬一個(gè)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);//實(shí)例化Car

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

缺陷:

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

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

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

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

優(yōu)點(diǎn):

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

2. Module 模塊模式

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

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

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

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

2.1對(duì)象字面量

示例：

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

注意 :

對(duì)象字面量不需要使用 new 實(shí)例化；
不能用在一個(gè)語(yǔ)句的開(kāi)頭，否則可能會(huì)被解釋為一個(gè)塊的開(kāi)始；

2.2 Module（模塊）模式

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

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

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

<script type="text/javascript">
	const basketModule = (function() {
		//私有
		let baskey = [];
		function doSomethingPrivate () {
			//實(shí)現(xiàn)
		}
		function doSomethingElsePrivate() {
			//實(shí)現(xiàn)
		}
		//返回一個(gè)暴露出的公有對(duì)象API
		return {
			//添加item到購(gòu)物車
			addItem: function (values) {
				basket.push(values);
			},
			//獲取購(gòu)物車?yán)锏膇tem數(shù)
			getItemCount: function() {
				return basket.length;
			},
			//私有函數(shù)的公有形式別名
			doSomething: doSomethingPrivate,
			//獲取購(gòu)物車?yán)锼衖tem的價(jià)格總值
			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。因?yàn)閎asket沒(méi)有暴露在公有的API中
</script>

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

您可能感興趣的文章: