가져오기(로드)해야 하는 스크립트 설치의 세 가지 모드 비교_javascript 기술

안전 로딩이란 무엇입니까?
스크립트 프로그램은 일반적으로 다운로드되어 실행됩니다. 스크립트 라이브러리가 매우 큰 경우 한 번에 모두 다운로드하려면 시간이 많이 걸립니다. 전통적인 솔루션은 스크립트를 기능 모듈에 따라 다른 파일에 작성하고 수동으로 작성하는 것입니다. 페이지에 스크립트 태그를 추가하지만 여기에는 몇 가지 단점이 있습니다. 클래스 라이브러리 사용자는 각 스크립트 간의 관계, 주문 요구 사항 등을 알아야 하며 클래스 라이브러리의 모든 사용자에게 이를 요구하는 것은 불가능합니다. 매우 익숙하고 오류 가능성이 매우 큽니다. 결과적으로 많은 프레임워크에서 가져오기 지침을 지원하기 시작했습니다. 원하는 가져오기 기능을 사용할 수 있으며 스크립트 파일 더미가 필요하지 않으며 해당 종속성에 주의를 기울일 필요도 없습니다.

보안 로딩의 딜레마:
초기 보안 로딩(즉시 동기식 주문형 로딩)에는 브라우저 차단 문제라는 치명적인 약점이 있습니다. 요청 시 특정 클래스 라이브러리를 로드하는 경우 이는 일반적으로 XMLHttpRequest를 통해 스크립트 파일을 동기적으로 로드하여 수행됩니다. 이 경우 브라우저는 리소스 다운로드가 완료되기 전에 사용자 이벤트에 대한 응답을 중지하고 페이지 다시 그리기를 중지합니다. 인터넷 연결이 느린 경우 이 기간은 정지와 같이 매우 짜증스러울 수 있습니다.

이전 솔루션은 공통 클래스 라이브러리 리소스를 프레임워크 파일에 직접 패키징하는 것이었고, 요청 시 가져오기는 실제 가치가 별로 없는 선전 표지가 되었습니다.

주문형 로딩은 다음 세 가지 모드로 나눌 수 있습니다.


l 즉시 동기식 주문형 로딩(차단, JSI, JSVM, dojo).

스크립트 파일의 XMLHttpRequest 동기 로딩을 통해 구현되는 가장 간단한 주문형 로딩 구현입니다. 문제는 브라우저가 이 방법을 사용하여 리소스를 동기적으로 얻을 때 브라우저가 차단되어 사용자 이벤트에 대한 응답을 중지하고 페이지 다시 그리기 작업을 중지한다는 것입니다. 따라서 프로그래밍은 가장 간단하지만 사용자 경험은 최악입니다.



2 비동기식 온디맨드 로딩(비차단, JSI2.0).

비동기 가져오기는 더 이상 설명이 필요 없고 좋은 사용자 경험을 제공하지만 비동기 특성으로 인해 처리하기가 더 까다롭습니다.



3 지연된 동기화 온디맨드 로드(비차단, JSI2.0).

JSI는 동적 프리로딩 기능을 통해 동기적으로 리소스를 얻는 방법을 구현합니다. 비록 동기식이지만 차단하지 않으며 사용 편의성과 사용자 경험을 고려한 솔루션이 될 수 있습니다. 단점은 특정 지연이 있고 현재 스크립트 태그에서는 사용할 수 없다는 것입니다.





사용법(JSI 예)
코드 구문 색칠 프로그램을 예로 들어보세요:

클래스 라이브러리 위치: org/xidea/ example/code/code.js

페이지 위치: example/xxx.html



즉시 동기화 및 주문형 로딩

import("org .xidea .example.code.Code");

var code1 = new Code();

code1.id = "libCode";

code1.design() ;




비동기 주문형 로딩

$import("org.xidea.example.code.Code",function(Code){    

var code1 = new Code();

code1.id = "libCode";

code1.design()




지연된 동기식 온디맨드 로딩(비차단, JSI2.0).















테스트 예시 :
주소:

http://jsintegration.sourceforge.net/example/code.html

http://www.xidea.org/project/jsi/example/code .html

예제는 모두 로컬에서 다운로드하여 실행할 수 있는 기본 예제입니다. 다운로드한 후에는 네트워크 속도에 의해 제한되는 서버에 배치하는 것이 가장 좋습니다. 차단 문제가 보입니다.

참조:
JSI 가져오기 기능: function $import(path, callbackOrLazyLoad, target)



JSI2 미리보기 다운로드: http://groups.google. /그룹/jsier/파일
<script>"../scripts/boot.js"></script>