Cách hoạt động của các module loader? (ok) một ví dụ kinh điển :)

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="loader.js"></script>
</head>
<body>
	Loader
</body>
</html>

loader.js

(function() {
  var libs = new Array;
  var styles = new Array;
  //Xác định URL của thư viện cần dùng, ở đây tôi dùng WOWjs, sử dụng WOWjs yêu cầu 2 dependencies là jQuery và animate.css
  libs[0] = 'https://code.jquery.com/jquery-1.12.4.js';
  libs[1] = 'https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js';
  styles[0] = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css';
  core = 'main.js';
  //Vòng lặp để gửi request thư viện
  for (let i = 0; i < libs.length; i++) {
    //Sử dụng Promise để xử lý khi có kết quả trả về
    libs[i] = new Promise((resolve, reject) => {
      let xhttp = new XMLHttpRequest();
      xhttp.open("GET", libs[i], true);
      xhttp.onload = function() {
        //Nếu request tài nguyên thành công, tạo 1 thẻ script và append code vào
        if (this.readyState == 4 && this.status == 200) {
          let script = document.createElement('script');
          script.innerHTML = this.responseText;
          let body = document.getElementsByTagName('body')[0];
          body.appendChild(script);
          resolve();
        }
      }
      xhttp.send();
    });
  }
  for (let i = 0; i < styles.length; i++) {
    styles[i] = new Promise((resolve, reject) => {
      let xhttp = new XMLHttpRequest();
      xhttp.open("GET", styles[i], true);
      xhttp.onload = function() {
        if (this.readyState == 4 && this.status == 200) {
          let style = document.createElement('style');
          style.innerHTML = this.responseText;
          let body = document.getElementsByTagName('body')[0];
          body.appendChild(style);
          resolve();
        }
      }
      xhttp.send();
    });
  }
  //Khi tất cả các dependencies đã load xong, thực thi code chương trình
  Promise.all(libs.concat(styles)).then(() => {
    console.log('Initialized !!!');
    let xhttp = new XMLHttpRequest();
    xhttp.open("GET", 'main.js', true);
    xhttp.onload = function() {
      if (this.readyState == 4 && this.status == 200) {
        let style = document.createElement('script');
        style.innerHTML = this.responseText;
        let body = document.getElementsByTagName('body')[0];
        body.appendChild(style);
      }
    }
    xhttp.send();
  })
})();

main.js

new WOW().init();
var element = $('body').append('<h1 class="wow bounceInUp" style="text-align: center">Welcome to Module Loader</h1>');
PreviousUncaught ReferenceError: exports is not defined in filed generated by Typescript (ok)NextRequireJS Cho Người Mới Bắt Đầu (ok) quá tuyệt

Last updated