jQuery 플러그인을 만들다 보니 다른 오픈소스 플러그인을 사용해서 패키징 하려는 부분에서 좀 망설여지는 부분이 있더군요.
html 문서에 사용한 플러그인을 여러개 다 넣어야 하는게 좀 아쉽네요.
그래서 지금 만들고 있는 하나의 jQuery 플러그인만 <script> 태그에 넣으면 필요한 다른 플러그인도 함께 로드하도록 해보려 합니다!
js 파일을 Include 로 불러오는 것처럼 작동하게 하고 싶은 겁니다!
일단 jQuery 에는 $.getScript() 라는 함수를 제공하고 있습니다만, 이 함수는 비동기식으로 요청되기 때문에 로드한 후에 콜백방식으로 요청해야 합니다. 필요한 플러그인을 먼저 로드한 후에 메인이 되는 플러그인을 실행해야 하므로 동기식으로 요청할 필요가 있네요.
동기식 js 불러오기
$.ajax({async:false,
type:'GET',
dataType:'script',
url:'./jQuery.plugin.min.js' });
$.getScript() 대신 위와같이 async 를 false 로 변경하고 ajax로 스크립트를 호출하면 됩니다.
이제는 또 다른문제가 있습니다. 바로 경로 문제 입니다.
메인이 되는 플러그인으로부터 상대경로를 잡는게 아니라 HTML 문서의 경로를 기준으로 상대경로를 잡기 때문에 서로 다른 위치에 있는 페이지들에서는 경로 오류가 발생할 수 있습니다.
메인 플러그인에서 경로 추출하기
var plugin_path = $('script:last').attr('src').replace(/[^\/]*\.js/,'');
$.ajax({async:false,
type:'GET',
dataType:'script',
url:plugin_path+'jQuery.plugin.min.js' });
plugin_path 에 현재 스크립트의 경로가 저장되기 때문에 이 경로를 기준으로 플러그인을 요청하면 됩니다.
마지막으로 해당 플러그인이 혹시 다른 곳에서 한번 불렸을 수도 있기 때문에 검사하는 과정을 거쳐서 선택적으로 불러올 수 있게만 하면 더 좋을 것 같네요.
최종적으로 사용한 코드
var plugin_path = $('script:last').attr('src').replace(/[^\/]*\.js/,'');
if(!$.isFunction($.fn.plugin_name)) {
$.ajax({async:false,
type:'GET',
dataType:'script',
url:plugin_path+'jQuery.plugin.min.js' });
}
이렇게 하면 상대경로 걱정없이 동기식으로 외부 플러그인 소스를 불러올 수 있을 것 같네요!
위에 $.fn.plugin_name 이라고 적힌 부분은 로드하는 플러그인 종류에 따라 적절하게 변경해 주면 될 것 같습니다.
