require.js를 어떻게 사용하나요? JS 로드 속도 향상
- PHP中文网원래의
- 2017-06-21 10:59:391833검색
웹페이지에 많은 js 파일이 도입되면 웹페이지가 매우 느리게 로드되고 js 파일에 종속성이 생길 수 있습니다. 순서가 바뀌면 실행되지 않는 경우가 있는데, 이는 사용자 경험에 큰 영향을 미칩니다.
require.js는 비동기 로딩을 해결하고 웹페이지 로딩을 향상시키는 동시에 순서에 의존하는 js를 배열별로 정렬할 수 있습니다.
첫 번째 단계는 require.js를 로드하고 이를 디렉토리의 js 하위 디렉토리에 넣는 것입니다:
<script src="js/require.js?1.1.10">< /script >
매개변수를 추가해야 합니다 defer async="true" 이 파일을 비동기식으로 로드해야 함을 나타냅니다. defer는 IE 버전과 호환됩니다
데이터를 추가해야 합니다 -main="js/main"은 js 아래의 메인이 메인 로딩 모듈임을 나타냅니다. 일할 때는 엄격해야 합니다.
require() 함수는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 의존하는 모듈을 나타내는 배열이고, 두 번째 매개변수는 이전 모듈이 모두 성공적으로 로드된 후에 호출되는 반환 함수입니다.
//main.js:
define(function (require,exports,module){
exports.add = function (x,y){
return x+y;
};
});//math.html:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>require(['main'], function (math){
alert(math.add(1,1));
});</script></head><body></body></html>2를 반환하면 성공적으로 팝업됩니다.
Call together
//b.js:
define(function (require,exports,module){
exports.add = function (obj,oEv,show){
return obj[addEventListener(oEv,show,false)]
};
});//math.html:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>var btn=document.getElementById('btn');function show(){
alert('弹出')
}
require(['main','main'], function (math){
math.add(btn,'click',show);
alert(math.add(1,1));
});</script></head><body><button id="btn">提交</button></body></html>이 글을 읽어보시고 문제가 있으면 메시지를 남겨주세요.
위 내용은 require.js를 어떻게 사용하나요? JS 로드 속도 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!