2012-09-21 6 views
1

내 사이트에서 js의 비동기 스타일 로딩을 구현하는 데 매우 흥미로운이 기사를 읽었습니다 http://css-tricks.com/thinking-async/.장단점 javascript 비동기 로딩 대 jquery ajax (또는 getscript) 비동기 로딩

내 요구 사항은 비동기 방식으로 javascript 파일을로드 한 다음 성공적으로로드 한 후 파일에서 초기화 메소드를 호출하는 기능입니다. 위의 기사에서 설명한대로 고전적인 비동기 방식을 사용하거나 jQuery의 getscript 메서드를 사용하는 것이 좋습니다. 다른 하나를 사용하는 데 따른 장점이나 단점은 무엇입니까?

EDIT : 필자는 js를로드하고 js 파일을 성공적으로로드 한 후 초기화 함수를 다시 호출한다고 가정 해 보겠습니다. 전체 모듈을 파싱해야하므로 가능한 빨리 처리해야합니다. document.ready 또는 window.onload를 기다리지 않고 페이지로드 중에 실행됩니다. 고전적인 비동기 방식으로이 작업을 시도하면 크로스 브라우저 문제 및 엄격한 테스트를 처리 할 수 ​​있지만 jquery ajax (또는 getscript 메서드)를 사용하면 번거 로움을 피할 수 있습니다.

또한 라이브러리를 사용하지 않고 비동기 적으로 단일 js 파일을로드하는이 솔루션을 찾고 있습니다.

답변

2

편집 :이 답변은 오래, 그리고 분명히 현대 jQuery를 스크립트 주입을 (난 당신이 스크립트 삽입 또는 HTML 5의 비동기 특성으로 의미 있으리라 믿고있어) 고전 비동기 방식을 사용하여 자바 스크립트

로드를 사용 매우 잘 받아 들여지고 대부분의 비동기 로더 (RequireJS와 같은 AMD 포함)가이를 구현하는 방법입니다.

JQuery의 getScript 메소드는 하루가 끝날 때 eval을 호출합니다. 대부분의 점잖은 JS 개발자는 그만 두려워하는 경향이 있습니다.

발췌문 jQuery를에서 소스, 현재 라인 (613) :

(window.execScript || function(data) { 
    window[ "eval" ].call(window, data); 
})(data); 

jQuery를이 평가의 이상한 취급과 같은 몇 가지 번거 로움과 사물과 (가능성이 안된) 고정 문제를 저장, 문맥으로 창 개체를 전달 않습니다 쓰레기 수거 또한 도구 선택에 따라 디버깅 중 추적 줄에 문제가있을 수 있습니다.

저는 (스크립트 삽입을 사용하는) AMD 방법의 큰 지지자입니다. 의존성이로드 된 직후에 비동기 적으로 스크립트를 호출 할 수 있으며 전역 네임 스페이스에 의존하지 않고 스크립트 사이에서 모듈을 전달할 수 있습니다. RequireJS site에서 AMD 로딩 및 비동기 또는 동기화 로딩에 대한 자세한 내용을 보거나 relatively simple gist을 확인하십시오.

+1

RequireJS 사이트에 대한 좋은 참조. – neelmeg

+1

이 답변은 꽤 오래되어서 jQuery가 잘못되었다고 생각하는 사람들을 혼동스럽게합니다. 그것은 jQuery의 버전이 (old)를 가리키는 지에 대한 해답에서 결코 언급되지 않았다. Promises 및 jQuery를 사용하여 많은 작업을 수행 할 수 있습니다. 아래 업데이트를 고려하십시오. 또한 [this] (https://github.com/jquery/jquery/blob/master/src/core/DOMEval.js)를 참조하십시오. – vsync

+0

RequireJS는'ajax'를 통해 스크립트를로드하지 않습니다. 동적'link' 요소 생성으로 작업을 수행합니다. –