JavaScript Asynch-Loader 선택하기


9

다양한 비동기 리소스 로더를 살펴 봤는데 아직 어떤 것을 사용할지 잘 모르겠습니다. 내가 일하는 곳에서는 클래스 모듈이 다른 버전의 jQuery 등을 사용할 수있는 별도의 그룹 노력이 있습니다. 따라서 중첩 된 종속성도 다를 수 있습니다. 나는 이것을 제어 할 수 없으므로 동일한 라이브러리의 대체 버전을 사용할 수있는 리소스를 동적으로로드해야합니다.

따라서 다음은 내 요구 사항입니다.

  1. JavaScript 및 CSS 리소스 파일을 비동기 적으로로드하십시오.
  2. 여러 버전에서 종속성 순서 및 중첩 된 종속성을 관리합니다.
  3. 리소스가 이미로드되어 있는지 감지합니다.
  4. 도메인 간로드 (CDN)를 허용해야합니다.
  5. (선택 사항) 리소스를 언로드 할 수 있습니다.

나는보고있다 :

이름이 올바르게 지정된 변수에 버전을로드하고 이미로드 된 것을 추적하기 위해 배열을 사용하여 이러한 요구 사항을 위조 할 수 있습니다 ... 그러나 누군가가 이미 이것을 발명했습니다.

그래서 내 질문은 :

  • 어떤 것을 사용하십니까? 그리고 왜?
  • 내 요구 사항을 완전히 충족하는 다른 사람이 있습니까?
  • 가장 웅장하고 가장 쉬운 작업은 무엇입니까? 그리고 왜?

업데이트 :
관심있는 사람들을 위해 위의 모든 AMD 라이브러리를 시도했습니다. 결국, 나는 RequireJS 와 함께 갔다 . 전체적으로 더 깨끗하고 쉬우 며 사용하게되어 기쁩니다.


JavaScript의 경우 5 번도 가능하지 않다고 생각합니다. CSS에서는 이론적으로 가능할 수 있지만 어떤 브라우저에서 지원하는지 확실하지 않습니다.
Mike Baranczak

@Mike 의견을 보내 주셔서 감사합니다! asynch-loader가 object-variables를 사용하여 리소스를 추적하고 채운 경우 ... 완전히 가능합니다.
죄수 제로

그러나 NEW 생성자는 객체를 복제하므로 호출 한 것을 새로 작성해도 여전히 존재합니다. 어쨌든 언로드 하시겠습니까?
시크릿

@ user1525 의견을 보내 주셔서 감사합니다! 리소스를 언로드하면 메모리가 절약됩니다. 귀하의 의견에 대한 몇 가지 생각으로 위의 질문을 편집 할 것입니다. 다시 감사합니다!
죄수 제로

jQuery에는 이미 getScript스크립트 삽입 기능이 있습니다.
zzzzBov

답변:


7

나는 진지한 프로젝트에서 RequireJS를 사용했지만 그것을 좋아하지만 실제로 비동기 로더가 아닙니다. 그것은 실제로 모듈 시스템을 의미합니다. 해당 목표에 따라 서비스에서 비동기 로딩이 제공됩니다. 모든 요구 사항을 충족하도록 푸시 할 수 있지만 로딩 서비스는 임의의 파일이 아닌 모듈을로드하도록 설계되었습니다.

JavaScript 및 CSS 리소스 파일을 비동기 적으로 로드 : Requirejs는 스크립트 태그 삽입을 사용하는 데 필요한 모든 모듈을 비동기 적으로 로드합니다.

버전 간 종속성 순서 및 중첩 종속성 관리 : RequireJS가 빛나는 곳입니다. 모듈은 다른 모듈에 대한 종속성을 선언 할 수 있으며로드 순서는 해당 종속성 선언에서 추정됩니다. 의존성에 따라 순서를 강제 할 수있는 주문 플러그인도 있습니다.

리소스가 이미로드되었는지 감지 : Requirejs는 모듈을 한 번만로드합니다.

크로스 도메인로드 (CDN이야)를 허용해야합니다 : 이 가능하지만, 일부 구성이 필요합니다; 모든 모듈에 대해 특정 URL을 설정하면 기본 위치가 무시되므로 CDN으로 설정할 수 있습니다.

RequireJS는 해당 형식을 사용하여 모듈을 작성하는 경우에 가장 적합하며 원시 Javascript를로드하는 데 사용하는 경우 가장 효과적입니다.

또한 생산을 위해 모듈을 단일 파일로 병합하는 빌드 프로세스를 제공합니다.


3

이론적으로는 이미로드 된 스크립트 목록을 유지하고 아직로드되지 않은 스크립트를로드하는 기능을 만들 수 있습니다.

http://jsfiddle.net/BDG/Dhdu7/2/


2
또는 Curl / RequireJS를 사용하면 더 많은 기능이 있습니다. 그리고 당신은 그것을 스스로 유지할 필요가 없습니다;)
Raynos

명확한 구조와 비 상대적 포함을 언급하는 것을 잊었습니다.
시크릿

2

RequireJS를보고 CSS 파일을 사용하려면 CSSP RequireJS 플러그인을 확인하십시오 .

패딩이 포함 된 CSS. 이 프로젝트 는 모듈이 CSS 파일을 종속성으로 나열 할 수 있는 RequireJS 프로젝트 용 플러그인을 구현합니다 . 이를 통해 RequireJS는 평가할 JavaScript 모듈을 릴리스하기 전에 특정 스타일 규칙이 적용될 때까지 기다릴 수 있습니다. 예를 들어, JavaScript 모듈이 별도의 파일에 정의 된 특정 CSS 규칙을 초기화하기 전에 DOM에 적용해야하는 경우 유용합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.