Javascriptでプログラミングをモジュール化する方法-jsチュートリアル-php.cn

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

一个新手

リリース： 2017-09-19 10:13:54

オリジナル

1579 人が閲覧しました

モジュール式プログラミングにより、ビジネスロジックがより明確になります。他の従来のプログラミング言語とは異なり、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 サイトの他の関連記事を参照してください。