require.js를 어떻게 사용하나요? JS 로드 속도 향상-JS 튜토리얼-php.cn

require.js를 어떻게 사용하나요? JS 로드 속도 향상

PHP中文网

풀어 주다： 2017-06-21 10:59:39

원래의

1862명이 탐색했습니다.

웹페이지에 많은 js 파일이 도입되면 웹페이지가 매우 느리게 로드되고 js 파일에 종속성이 생길 수 있습니다. 순서가 바뀌면 실행되지 않는 경우가 있는데, 이는 사용자 경험에 큰 영향을 미칩니다.

require.js는 비동기 로딩을 해결하고 웹페이지 로딩을 향상시키는 동시에 순서에 의존하는 js를 배열별로 정렬할 수 있습니다.

첫 번째 단계는 require.js를 로드하고 이를 디렉토리의 js 하위 디렉토리에 넣는 것입니다:

매개변수를 추가해야 합니다 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!