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,

특정 상수 값을 설정할 수 있습니다. 이 상수는 괜찮습니다. 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와 패키지는 단일입니다. 레이어 값이 전달되었습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!