동적으로 JS 기능을로드합니다
일반적으로 JS 파일을로드해야 할 때 다음 코드와 유사하게 스크립트 태그를 구현합니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"src = "example.js"> </script>
그러나 스크립트 태그를 사용하여 JS 파일을 직접로드하기 위해 다음과 같은 단점이 있습니다.
1. 엄격한 읽기 순서. 브라우저는 웹 페이지에 <cript>가 나타나는 순서대로 JavaScript 파일을 읽은 다음 즉시 실행되므로 여러 파일이 서로 의존 할 때 종속성이 가장 적은 파일이 전면에 배치되어야하며 가장 많은 종속성이있는 파일이 결국에 배치되어야합니다. 그렇지 않으면 코드가 오류를보고해야합니다.
2. 성능 문제. 브라우저는 "동기 모드"를 사용하여 <Script> 태그를로드합니다. 즉, 페이지가 "차단"되어 JavaScript 파일이로드되기를 기다린 다음 후속 HTML 코드를 실행합니다. 다중 <cript> 태그가 존재하면 브라우저를 동시에 읽을 수 없습니다. 하나는 다른 것을 읽기 전에 읽어야하며, 읽기 시간이 크게 확장되고 페이지 응답이 느립니다.
현재 우리는 동적으로 JS를로드하는 것을 생각할 것입니다. JS를 동적으로로드하는 구현 방법은 다음 코드와 유사합니다.
코드 사본은 다음과 같습니다.
/*
*@desc : 스크립트를 동적으로 추가하십시오
*@param src :로드 된 JS 파일의 주소
*@Param Callback : JS 파일이로드 된 후 호출 해야하는 콜백 함수
*@데모:
addDynamicStyle ( 'http://webresource.c-ctrip.com/code/cquery/labjs/lab.js', function () {
ALERT ( 'CTRIP 서버 로딩의'Lab.js는 완료되었습니다 ')
});
*/
함수 adddynamicjs (src, 콜백) {
var script = document.createElement ( "스크립트");
script.setattribute ( "type", "text/javaScript");
script.src = src [i];
script.charset = 'gb2312';
document.body.appendChild (스크립트);
if (콜백! = 정의되지 않은) {
script.onload = function () {
콜백 ();
}
}
}
이렇게하면 페이지 막힘이 발생하지는 않지만 또 다른 문제가 발생합니다. 이러한 방식으로로드 된 JavaScript 파일은 원래 DOM 구조에 있지 않으므로 DOM- 준비 (DOMContentLoaded) 이벤트에 지정된 콜백 기능과 Window.onload 이벤트가 잘못되었습니다.
현재 일부 외부 기능 라이브러리를 사용하여 JS로드 문제를 효과적으로 관리하는 것을 생각할 것입니다.
주요 주제로 가서 lab.js에 대해 이야기합시다
lab.js
전통적인 메소드를 사용하여 JS를로드하는 경우, 우리가 작성하는 코드는 일반적으로 다음 코드에 표시된 스타일을 갖습니다.
코드 사본은 다음과 같습니다.
<script src = "aaa.js"> </script>
<script src = "bbb-a.js"> </script>
<script src = "bbb-b.js"> </script>
<script type = "text/javaScript">
initaaa ();
initbbb ();
</스크립트>
<script src = "ccc.js"> </script>
<script type = "text/javaScript">
initccc ();
</스크립트>
실험실을 사용하여 위의 코드 함수를 구현하기 위해 다음 방법을 사용합니다.
코드 사본은 다음과 같습니다.
<!-Lab.js 라이브러리를 먼저로드하십시오
<script src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javaScript">
$ 실험실
.Script ( "aaa.js"). Wait () // 매개 변수가없는 .wait () 메소드는 즉시로드 된 JavaScript 파일을 실행한다는 의미입니다.
.script ( "bbb-a.js")
.Script ( "BBB-B.JS") // aaa.js bbb-a.js bbb-b.js를로드 한 다음 initaaa initbbb를 실행합니다
.wait (function () {// 매개 변수가있는 .wait () 메소드는 바로 지금로드 된 JavaScript 파일을 실행하지만 매개 변수에 지정된 기능도 실행합니다.
initaaa ();
initbbb ();
})
.Script ( "CCC.JS") // CCC.JS를로드하고 CCC.JS를로드 한 후 InitCCC 메소드를 실행합니다.
.WAIT (function () {
initccc ();
});
</스크립트>
다중 $ 실험실 체인은 동시에 실행할 수 있지만 완전히 독립적이며 주문 관계가 없습니다. JavaScript 파일이 다른 파일 후에 실행되는지 확인하려면 동일한 체인 작업에서만 작성할 수 있습니다. 특정 스크립트가 완전히 관련이없는 경우에만 다른 $ 실험실 체인으로 분할하는 것을 고려해야합니다. 이는 상관 관계가 없음을 나타냅니다.
일반적인 사용 예
코드 사본은 다음과 같습니다.
$ 실험실
.Script ( "script1.js") // script1, script2 및 script3은 서로 의존하지 않으며 어떤 순서로든 실행할 수 있습니다.
.script ( "script2.js")
.script ( "script3.js")
.WAIT (function () {
경고 ( "스크립트 1-3이로드되었습니다!");
})
.script ( "script4.js") // 실행 전에 실행할 script1.js, script2.js, script3.js를 기다려야합니다.
.wait (function () {script4func ();});
코드 사본은 다음과 같습니다.
$ 실험실
.script ( "script.js")
.Script ({src : "script1.js", type : "text/javaScript"})
.script ([ "script1.js", "script2.js", "script3.js"]))))
.Script (function () {
// 호스트 페이지별로 정의 된`_is_ie`를 즉, IE에서 true로, 다른 브라우저에서 false를 가정합니다.
if (_is_ie) {
"IE.JS"를 반환합니다. // IE에있는 경우에만이 스크립트가로드됩니다.
}
또 다른 {
널 리턴; // IE가 아닌 경우이 스크립트 호출은 효과적으로 무시됩니다.
}
})
콘솔에서 Lab.js 정보를로드합니다
콘솔에서 각 JS로드 정보를 디버그하거나 보려면 $ lab.setglobaldefaults 메소드를 사용할 수 있습니다. 자세한 내용은 코드 예제를 참조하십시오.
코드 사본은 다음과 같습니다.
<!-Ctrip의 실험실 라이브러리 실험실을 먼저로드하고 온라인으로 다운로드하십시오.
<script type = "text/javaScript"src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"charset = "gb2312"> </script>
<script type = "text/javaScript">
$ lab.setglobaldefaults ({debug : true}) // 디버깅 열기
$ 실험실
// 첫 번째 실행 체인입니다
.Script ( 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.Script ( 'http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
// 두 번째 실행 체인
.WAIT (function () {
//console.log(Window.$)
//console.log(Window._)
})
// 세 번째 실행 체인
.Script ( 'http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')))
.Script ( 'http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js'))
// 네 번째 실행 체인
.WAIT (function () {
// console.log (plugin1function)
// console.log (plugin2function)
})
// 다섯 번째 실행 체인
.Script ( 'js/aaa.js')
.script ( 'js/bbb.js')
// 여섯 번째 실행 체인
.WAIT (function () {
// console.log (module1function)
// console.log (module2function)
})
</스크립트>
현재 다음 그림과 같이 콘솔을 열고 정보를 살펴보십시오.
나는 당신이 이것을 볼 때 lab.js의 디버깅 기능에 놀랄 것이라고 믿습니다. 실제로 Lab.js는 실제로 매우 강력하며 간단한 기능 중 일부를 이해합니다. 먼저 그것을 적어 놓고 공유하십시오. 또한 미래에 자신의 편의를위한 것입니다.