자바스크립트에서 js 메소드 순차 로딩 및 실행을 구현하는 방법

이 글에서는 주로 자바스크립트에서 js를 동적으로 로드하고 실행하는 방법과 구현 코드가 필요한 분들은 참고하시면 됩니다.

먼저 JS 동적 로딩을 이해하지 못한다면 다음을 참고하세요:

Javascript 동적 로딩 구현 방법

JS 파일을 동적으로 로드하는 세 가지 방법

비동기, 차단, 오류 없이 스크립트를 만드는 방법 등 주석:

브라우저는 자바스크립트 파일을 비동기적으로 로드하지만 참조된 파일에 작성된 순서대로 위에서 아래로 자바스크립트를 구문 분석합니다.

Defer 속성 태그

defer는 다음에 정의되어 있습니다. html4.0. 이 속성을 사용하면 브라우저는 스크립트가 실행될 때 문서가 구문 분석된 후 문서에 나타나는 순서대로 다운로드되어 구문 분석됩니다.

즉, defer 속성이 있는 스크립트는 본문에 스크립트를 넣은 것과 동일한 로딩 효과가 있습니다.

하지만 각 브라우저마다 defer 속성을 지원하는 정도가 조금씩 다릅니다. 브라우저는 이를 완전히 지원하지 않습니다.

Async 속성 주석

async는 HTML5의 새로운 속성이며 대부분의 고급 기능은 이 속성을 지원합니다.
이 속성의 기능은 스크립트를 비동기적으로 로드할 수 있도록 하는 것입니다. 예를 들어 브라우저가 async 속성이 있는 스크립트를 발견하면 탐색됩니다. 서버에 의해 로드된 CSS도 비동기적으로 로드됩니다

javascript는 js 파일을 동적으로 로드합니다

원칙은 매우 간단합니다. 스크립트 노드를 만들고 할당합니다. script 속성을 노드에 추가한 다음 dom의 헤드 태그에 추가합니다.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

여러 자바스크립트 파일을 동시에 로드하는 경우

loadJS('a.js');
loadJS('b.js');

위 효과는 a.js 및 b.js 파일이 비동기적으로 동시에 로드된다는 것입니다. .b.js 파일이 a.js 파일보다 작으면 b.js가 먼저 로드되어 실행될 가능성이 완전히 서면 결과대로 로드 및 실행되지 않습니다

그래서 b.js 파일이 .js 파일은 a.js에 종속되어 b.js를 해석하고 실행할 때 a.js가 여전히 로딩 중이므로 오류가 보고됩니다.

자바스크립트 로딩 실행 순서를 제어합니다

다음과 같이 개선했습니다. code

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

스크립트 노드의 onload 및 onreadystatechange 속성을 사용하여 노드 src가 성공적으로 로드되었는지 모니터링하세요

성공하면 콜백 함수인 Success()를 호출합니다.

이 메서드를 호출하면 loadJS 콜백을 사용할 수 있습니다. 함수를 사용하여 현재 노드가 로드되었음을 알고 콜백 함수에서 다른 스크립트 파일을 계속 로드합니다

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

위 방법을 통한 로드는 동기식 차단 로드이며 a.js는 로드될 때까지 로드되지 않습니다. b.js 파일이 로드되고 실행됩니다.

자바스크립트 파일에 상호 의존성이 없으면 이 방법을 사용하지 마세요.

위 내용은 나중에 모든 사람에게 도움이 되기를 바랍니다. .

관련 기사:

JavaScript에서 탄력적 효과를 얻는 방법

Axios에서 쿠키 교차 도메인을 구현하는 방법

JavaScript를 사용하여 이진 트리 탐색을 구현하는 방법

위 내용은 자바스크립트에서 js 메소드 순차 로딩 및 실행을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!