Javascript 如何模組化程式設計

模組化程式設計可以讓業務的邏輯更加清楚。與其他傳統程式語言不同，Javascript並沒有提供原生的、有組織的引入模組方式。這裡主要探討下：基於物件的Javascript模組化程式設計。 即javascript 模組化（package.類別.方法）。

傳統的寫法：

在一個Javascript檔案中將不同的函數雜糅在一起，例如：

function m1(arg1, arg2){
	//…
}
function m2(){
	//…
}

這種方式“污染”了全域變量，且不能保證不發生衝突，最重要的是模組與成員間的關係不明顯。

物件的寫法：

將不同的模組寫成不同的對象，所有模組成員放在物件裡面。

var module1 = new Object({
	_appId : 0,
	URL:{
		process1:function(){
			return ‘/data/process1’;
		}，
		process2:function(){
			return ‘/data/process2’;
		}
},
	m1: function(){
		//…
},
m2:function(params){
	var appId = params[‘appId’];
	var package = params[‘package’];
	//…
},
m3:{
	init:function(){
		//initial something
	},
	process:function(appId, package){
		//
	}
}
});

分析：

下面的寫法：

var module1 = new Object({
	//…
})

可以簡寫為：

var module1 = {
	//…
}

常數相關的設置：

_appId: 0,

可以將設定某些常數值，這個常數還可以用來傳遞el表達式的值，在jsp檔案中，加上

<script type=”text/javascript”>
	module1._appId = ${appId}; //这样可以将服务端的appId的值设置到js中
</script>

注意：

EL表達式${appId}只能在jsp檔案中使用，不能在js檔案中使用。

另一種設定常數組的方式為：

URL:{
		process1:function(){
			return ‘/data/process1’;
		}，
		process2:function(){
			return ‘/data/process2’;
		}
},

函數中變數的傳遞方式有兩種方式：

#1)比較簡單的是：

process:function(appId, package)

這裡appId和package即為傳遞的單層值。

2)陣列傳遞：

m2:function(params){
	var appId = params[‘appId’];
	var package = params[‘package’];
	//…
},

呼叫的時候格式如下：

module1.m2({appId:10, package:’hello’})

多層物件封裝：

#

m3:{
	init:function(){
		//initial something
	},
	process:function(appId, package){
		//
	}
}

以上是Javascript 如何模組化程式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！