FrontendJavascript

Javascript include

JavaScript 외부 소스 코드 삽입

eval()

eval() 는 전역 객체의 함수 프로퍼티 이다.
eval() 함수를 실행하면 자바스크립트 소스 코드를 동적으로 로드하여 실행할 수 있다.
하지만 eval 함수로는 보안상 위험이 존재하기 때문에 안티패턴에 속한다.
그리고 eval 함수 이외에도 동적으로 자바스크립트 소스 코드를 실행 할 수 있는 방법이 많이 존재하기 때문에 권장되지 않는 방법이다.
eval 함수의 파라미터로 넘어온 String 인자는 Javascript Parser에 의해 파싱되고 실행된다.

jax Loading

1
2
3
4
5
6
7
8
9
10
11
12
13
function require(url) {
	$.ajax({
		url: url,
		dataType: 'script',
		async: false,
		success: function() {
			//code...
		},
		error: function() {
			throw new Error('Coild not load script' + url);
		}
	});
}

jQuery Loading

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

1
2
3
$.getscript('myscript.js', function() {
	console.log('myscript.js loading!!');
});

JavaScript

JavaScript 만으로는 createElement, appendChild 등 메소드를 이용하여 동적으로 html 태그를 추가하여 외부소스코드를 삽입할 수 있다.

1
2
3
4
5
6
7
8
9
10
function includeJs(filePath) {
    var js = document.createElement('script');

	js.type = 'text/javascript';
	js.src = filePath;

	document.body.appendChild(js);
}

includeJs('/path/myscript.js');

Require JS

Require JS 모듈을 사용하면 보다 간편하게 인클루드 기능을 사용 할수 있다.

require.js: http://requirejs.org/

ECMA Script 6

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

1
2
3
4
5
6
7
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, { member1, [ , [...]] } from 'module-name';
import 'module-name' as name;

참조

공유하기