requireJS의 익명 모듈과 명칭 모듈의 차이와 모범 사례

requirejs는 간단한javascript 프레임워크로 모듈화 인코딩과 모듈의 비동기화 불러오기를 지원합니다.
requireJS에서 모듈은 익명 모듈과 이름 모듈 두 가지로 나눌 수 있습니다.
requireJS 익명 모듈 정의
define(function(){  
	
	return {id:"noName"};
	
}); 

requireJS 명명 모듈 정의
define("constantModule",[],function(){  
	
	return {id:"hasName"};
	
}); 

requireJS 홈페이지에도 It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names라고 적혀 있다.익명 모듈을 추천합니다.
jquery는 1.7 버전부터 AMD(Asynchronous Module Definition)를 지원하고 이름 모듈입니다. 모듈 이름은 jquery입니다. 저는 jquery-1.11.1을 사용합니다.js, 소스 코드는 다음과 같습니다.
if ( typeof define === "function" && define.amd ) {
	define( "jquery", [], function() {
		return jQuery;
	});
}

이제 RequireJS 프레임워크를 사용하여 jquery를 불러옵니다. 경로가 정확하면 다음 코드는 jquery를 정확하게 불러올 수 있습니다.
require.config({
	baseUrl:"./../",
    paths: {
        jquery: 'jquery-1.11.1'
    }
});

//jquery jquery, , 
require(["jquery"], function(jq) {
	
	// , 1.11.1
    alert(jq().jquery);

});

위의 코드가 jquery 프레임워크를 정상적으로 불러올 수 있는 후, 우리는 위의 코드를 약간 수정합니다
require.config({
	baseUrl:"./../",
    paths: {
        jquery_name: 'jquery-1.11.1'
    }
});

//jquery jquery, , 
require(["jquery_name"], function(jq) {
	
	// , 1.11.1
    alert(jq().jquery);

});

이번 jquery 프레임워크가 정상적으로 불러올 수 없음을 발견할 수 있습니다.우리는 단지 모듈 이름을 바꿨을 뿐이다.여기서 결론을 얻을 수 있다.
명명 모듈이라면require를 사용하여 이 모듈을 불러올 때 모듈 이름은 반드시 정확해야 하며 마음대로 수정할 수 없습니다.
다음은 우리가 정의한 익명 모듈과 명명 모듈을 불러와서 우리의 결론을 검증합니다.
require.config({
	baseUrl:"./../",
    paths: {
        jquery: 'jquery-1.11.1',
        hehe: 'require_demo/module_noName',
        constantModule: 'require_demo/module_hasName',
    }
});

//jquery jquery, , 
require(["jquery","hehe","constantModule"], function(jq,noName,hasName) {
	
        alert(jq().jquery);
	alert(noName.id);
	alert(hasName.id);
});
파일 경로를 조정하여 위의 코드가 정상적으로 불러올 수 있도록 합니다.이제 저희가 위의 코드를 수정할 수 있어요.
require.config({
	baseUrl:"./../",
    paths: {
        jquery: 'jquery-1.11.1',
        xx: 'require_demo/module_noName',
        constantModule_hehe: 'require_demo/module_hasName',
    }
});

//jquery jquery, , 
require(["jquery","xx","constantModule_hehe"], function(jq,noName,hasName) {
	
    alert(jq().jquery);
	alert(noName.id);
	alert(hasName.id);
});

확인 가능: xx 모듈이 정상적으로 로드됨, constantModule_hehe가 정상적으로 불러올 수 없습니다.우리는 알 수 있듯이 익명 모듈은 더욱 큰 유연성을 가지고 익명 모듈을 불러올 때 명칭을 마음대로 지정할 수 있다.

좋은 웹페이지 즐겨찾기