Javascriptでプログラミングをモジュール化する方法

モジュール式プログラミングにより、ビジネス ロジックがより明確になります。他の従来のプログラミング言語とは異なり、JavaScript はモジュールを導入するためのネイティブで組織化された方法を提供しません。ここでは主に、オブジェクトベースの Javascript モジュラー プログラミングについて説明します。 つまり、JavaScriptのモジュール化(package.class.method)です。

従来の記述方法:

次のようなさまざまな関数を 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,

特定の定数値を設定できます、この定数はOKですjsp ファイルに el 式の値を渡すために使用され、

<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’;
		}
},

関数で変数を渡すには 2 つの方法があります:

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 中国語 Web サイトの他の関連記事を参照してください。