Sablog Models/인터넷·웹

유용한 확장 JavaScript Library (2) importScript()

어­리 2010. 2. 12. 13:47
JavaScript에는 import 기능이 없다.

알다시피 함수를 만들어 모듈화하는 것은 중요하다.
그 과정에서 소스가 길어지면 라이브러리를 몇 조각으로 쪼개게 되며,
한 파일에서 다른 파일을 불러와 함수를 사용할 필요가 있다.
파일 간에 의존성이 생기는 것이다.

C에 #include가 있듯이,
CSS에는 @import, PHP에는 @require나 @require_once, JSP에는 @include file이 있다.
그러나 JS에서는 이런 동적 링크 함수가 없어서,
HTML에서 직접 script 태그를 이용하지 않으면 추가가 안 된다.

그러나 직접 불러오는 것이 불가능하다면 HTML에 script 태그를 집어넣으면 된다.
실행문 중간에 넣으려면, 가장 간단한 형태는 다음과 같다.
document.write('<script type="text/javascript" src="첨부할 파일"></script>');
그러나 script 태그를 head의 하위에 넣을 것이 권고 사항이므로 이렇게 쓰는 것이 가장 나을 것이다.
function importScript(filename)
{
    document.getElementsByTagName('head').item(0).innerHTML
        += '<script type="text/javascript" src="' + filename + '"></script>'
}
정석대로라면 Element를 만들고 Attribute를 부여해서 appendChild를 써야 하지만 귀찮았다.

그리고,
  1. 당연히 이 함수 원본은 라이브러리에 있으면 안 된다.
  2. 다른 언어처럼 함수 밖에 그냥 쓰면 에러 먹는다. document.body.onload에 추가해 줘야 한다.