javascript 순서대로 js 실행 방법 불 러 오기

우선 JS 동적 로 딩 에 대해 이해 하지 못 하 는 부분 이 있 으 면 참고 할 수 있 습 니 다.
javascript 동적 로드 실현 방법
JS 파일 을 동적 으로 불 러 오 는 세 가지 방법
어떻게 스 크 립 트 에 비동기,차단 등 표시 가 없 습 니까?
브 라 우 저 는 자바 script 파일 을 비동기 로 불 러 오지 만 참조 파일 의 쓰기 순서 에 따라 위 에서 아래로 자바 script 을 해석 합 니 다.
Defer 속성 표시
defer 는 html 4.0 에서 정 의 된 것 입 니 다.이 속성 은 브 라 우 저 로 하여 금 스 크 립 트 의 실행 을 지연 시 킬 수 있 게 합 니 다.문서 의 해석 이 완료 되면 문서 가 나타 나 는 순서에 따라 다운로드 하여 해석 합 니 다.
즉,defer 속성의 script 은 script 을 body 에 넣 는 로 딩 효과 와 일치 합 니 다.
그러나 defer 속성 은 각 브 라 우 저 에서 지원 정도 가 약간 다르다.즉,어떤 브 라 우 저 는 완전히 지원 하지 않 는 다 는 것 이다.
Async 속성 표시
async 는 HTML 5 에 추 가 된 속성 으로 대부분 이 속성 을 지원 합 니 다.
이 속성의 역할 은 스 크 립 트 를 비동기 로 불 러 올 수 있 도록 하 는 것 입 니 다.즉,브 라 우 저가 async 속성의 script 을 만 났 을 때 브 라 우 저 는 css 를 불 러 오 는 것 과 같이 비동기 로 불 러 옵 니 다.
javascript 동적 로드 js 파일
원 리 는 매우 간단 합 니 다.script 노드 를 만 들 고 노드 에 script 의 속성 을 부여 한 다음 에 append 는 dom 의 head 태그 에 있 습 니 다.

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

만약 우리 가 여러 개의 javascript 파일 을 동시에 불 러 오 면

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

위의 효 과 는 a.js 와 b.js 파일 이 비동기 로 동시에 불 러 옵 니 다.b.js 파일 이 a.js 파일 보다 작 으 면 b.js 를 먼저 불 러 올 수 있 습 니 다.쓰기 결과 에 따라 불 러 오지 않 습 니 다.
따라서 b.js 파일 이 a.js 에 의존 하 는 것 이 있다 면 잘못 보고 할 수 있 습 니 다.b.js 를 실행 할 때 a.js 가 불 러 오고 있 기 때 문 입 니 다.
javascript 로드 실행 순서 제어
우 리 는 코드 에 대해 다음 과 같은 개선 을 한다.

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);
    }

script 노드 의 onload 와 onready statechange 속성 을 통 해 노드 src 가 불 러 올 지 여 부 를 감청 합 니 다.
성공 하면 리 셋 함수 success()를 호출 합 니 다.
이 방법 을 호출 할 때 현재 노드 가 불 러 온 것 을 loadJS 리 셋 함 수 를 통 해 알 수 있 습 니 다.그리고 리 셋 함수 에서 다른 script 파일 을 계속 불 러 옵 니 다.

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

위의 방법 으로 불 러 오 는 것 은 동기 화 차단 로 딩 입 니 다.a.js 로 딩 이 완료 되 어야 b.js 파일 을 불 러 옵 니 다.
만약 당신 의 javascript 파일 이 서로 의존 관계 가 없다 면,이런 방법 을 사용 하지 마 세 요.