강좌 & 팁
글 수 2,412
2014.06.16 19:27:16 (*.134.169.166)
54498
자 이전 강좌에서 모듈을 만드는 방법을 알아 봤습니다.
그런데
최근에 자바스크립트는 외부에 라이브러리를 공개하기도 하고
다른 곳에서 가져오기도 합니다.
자체적인 개발일 경우 모듈만 분리해도 되지만
이렇게 다른 곳에서 있는 것을 가지고 오고
자신것을 다른곳에 쓰기도 하면
모듈명 자체에도 문제가 됩니다.
그래서 네임스페이스 문제를 해결하기 위해서 모듈을 만든것에 추가 적인 조치를 해 주어야 합니다.
최근에 유명한 사이트의 날고 긴다는 곳들은 모듈을 이렇게 씁니다.
var 유틸 = 에프에이리눅스.유틸;
유틸.자주쓰는함수1();
아주 심플합니다.
경우에 따라서는 버전에 따른 것도 고려한다면 이렇게도 할 수 있습니다.
var 유틸 = 에프에이리눅스.v10_0.유틸;
뭐...
아직까지는 많은 곳에서 이렇게 까지 하지 않겠지만
아마도 여러분들은 미래를 대비하신다면 이런식으로 할 것을 고려 하셔야 할 겁니다.
왜?
구글이 하고 있거든요.. ㅋㅋ
그런데 이렇게 하는 것이 사실 별거 아니거든요...
이전 강좌의 모듈 가장 앞 부분에 이렇게 추가 하시면 됩니다.
var 에프에이리눅스;
if( !에프에이리눅스 ) 에프에이리눅스 = {};
if( !(에프에이리눅스.v10_0) ) 에프에이리눅스.v10_0 = {};
그리고 모듈 선언 하는 부분을 다음과 같이 바꾸어 주면 됩니다.
에프에이리눅스.v10_0.유틸 = (function(유틸,$,undefined){
자..
이렇게 만들 경우 모듈 소스를 정리하면 다음과 같습니다.
[C011_module_namespace.html]------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head></head>
<body>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="C011_module_namespace_module1.js"></script>
<script src="C011_module_namespace_main.js"></script>
</html>
--------------------------------------------------------------------------------
[C011_jshintrc]-----------------------------------------------------------------
{
"undef" : true,
"unused" : true,
"browser" : true,
"jquery" : true,
"devel" : true,
"globals" : {
"jQuery" : true,
"에프에이리눅스" : true
}
}
--------------------------------------------------------------------------------
[C011_module_namespace_main.js]-----------------------------------------------------
(function(){
"use strict";
var 유틸 = 에프에이리눅스.v10_0.유틸;
유틸.자주쓰는함수1();
})();
--------------------------------------------------------------------------------
[C011_module_namespace_module1.js]--------------------------------------------------
var 에프에이리눅스;
if( !에프에이리눅스 ) 에프에이리눅스 = {};
if( !(에프에이리눅스.v10_0) ) 에프에이리눅스.v10_0 = {};
에프에이리눅스.v10_0.유틸 = (function(유틸,$,undefined){
"use strict";
유틸.자주쓰는함수1 = function(){
console.log( '유틸 모듈에 있는 자주쓰는함수1()이 호출되었습니다.' );
};
return 유틸;
})(window.에프에이리눅스.v10_0.유틸 || {},jQuery);
--------------------------------------------------------------------------------
오류 검사는 다음과 같이 하면 된다.
> jshint -c C011_jshintrc --verbose C011_module_namespace_main.js C011_module_namespace_module1.js
이번 강좌는 날로 먹었다는 생각이 들 정도죠..
ㅋㅋ