#Javascript 에서의 include ( 외부 소스 코드 삽입하기 )

#JavaScript에서 외부 소스 코드 삽입하기

0. eval

eval 은 전역객체의 함수 프로퍼티이다.

eval 함수를 사용하면 자바스크립트 소스 코드를 동적으로 로드하여 실행할 수 있다.

하지만 eval 함수로는 보안상 위험이 존재하기 때문에 그리고 eval 함수 이외에도 동적으로 자바스크립트 소스 코드를 실행할 수 있는 방법이 많이 존재하기 때문에 권장되지 않는 방법이다. 자바스크립트 컴파일러가 미리 최적화시킬 수 없기 때문에 코드 최적화에 대한 이야기에 단골로 등장하는 함수가 eval 함수이다.

eval 함수의 파라미터로 넘어온 String 인자는 Javascript Parser에 의해 파싱되고 실행된다.

 

1. Ajax Loading

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

2. jQuery Loading

jQuery를 사용하면 한 줄로 외부 자바스크립트 소스를 가져올 수 있다.

$.getscript(‘myscript.js’, function(){
    console.log(‘myscript.js loading!!);
});

3. JavaScript

dynamically generate a JavaScript tag and append it to HTML document from inside other JavaScript code

JavaScript 만으로는 createElement, appendChild 등 메소드를 이용하여

동적으로 html 태그를 추가하여 외부 소스코드를 삽입할 수 있다.

function includeJs(jsFilePath) {
    var js = document.createElement("script");
 
    js.type = "text/javascript";
    js.src = jsFilePath;
 
    document.body.appendChild(js);
}
includeJs("/path/to/some/file.js");

4. Require JS

Require JS 라는 모듈을 사용하면 보다 간편한 삽입을 할 수 있다.

http://programmingsummaries.tistory.com/204

5. ECMA Script 6

ECMA 6에서는 import 라는 문법을 제공한다.

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;

6. 모듈 패턴을 이용한 window 객체의 프로퍼티로 추가

각각의 자바스크립트 파일을 모듈화 하여, 즉시 실행 함수로 실행하고,

실행하여 생성된 생성자 함수를 전역 객체인 window 객체의 프로퍼티로 추가하여 접근하는 방법이다.

export를 통해 프로퍼티를 추가할 수 있다.

(function(exports){
 
})(this);

End