Bincangkan secara terperinci LABJS pemuatan dinamik fail js atas kemahiran demand_javascript

LABjs ialah alat JavaScript kecil yang digunakan untuk memuatkan fail JavaScript mengikut keperluan Dengan menggunakan alat ini, anda boleh meningkatkan prestasi halaman, mengelakkan memuatkan fail JavaScript yang tidak diperlukan dan merealisasikan pemuatan fail skrip dan pengurusan yang selari. Perintah pelaksanaan memuatkan fail skrip.

Contoh mudah

$LAB
.script("script1.js", "script2.js", "script3.js")
.block(function(){
  // wait for all to load, then do something
  script1Func();
  script2Func();
  script3Func();
});

Memperkenalkan beberapa contoh LABJS:
Contoh 1:

$LAB
  .script("script1.js")
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Contoh 2:

$LAB 
  .script({ src: "script1.js", type: "text/javascript" })
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Contoh 3:

$LAB
  .script("script1.js", "script2.js", "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Contoh 4:

$LAB
  .script( [ "script1.js", "script2.js" ], "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

Contoh 5:

$LAB
  .script("script1.js").wait() // 空的wait()只是确保script1在其他代码之前被执行
  .script("script2.js") // script2 和 script3 依赖于 script1
  .script("script3.js").wait() // 但是script2 和 script3 并不互相依赖,可以并行下载
  .script("script4.js") // script4 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

Contoh 6:

$LAB
  .script("script1.js") // script1, script2, and script3 之间没有依赖关系,
  .script("script2.js") // 所以可以任意顺序执行
  .script("script3.js")
  .wait(function(){ // 如果需要,这里当然可以执行javascript函数
    alert("Scripts 1-3 are loaded!");
  })
  .script("script4.js") // 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

Contoh 7:

$LAB
  .setOptions({AlwaysPreserveOrder:true}) // 设置每个脚本之间等待
  .script("script1.js") // script1, script2, script3, script4 互相依赖
  .script("script2.js") // 并且并行下载后循序执行
  .script("script3.js")
  .script("script4.js")
  .wait(function(){script4Func();});

Contoh 8:

$LAB
  .script(function(){
    // `_is_IE`的值ie为true ,非ie为false
    if (_is_IE) {
      return "ie.js"; // 如果是ie则这个js会被加载
    }
    else {
      return null; //如果不是ie这个代码就会被略过
    }
  })
  .script("script1.js")
  .wait();

Kaedah pemuatan LABjs

Pemuatan dinamik fail skrip dalam LABjs merujuk kepada memuatkan js luaran melalui pelbagai kaedah apabila skrip js halaman dilaksanakan (terutamanya berbeza daripada skrip yang dimuatkan secara statik melalui teg dalam halaman html)

Terdapat banyak cara untuk memuatkan skrip secara dinamik, dengan kelebihan dan kekurangan yang berbeza, saya tidak akan menerangkan secara terperinci di sini. Kanak-kanak yang berminat boleh merujuk pada pautan rujukan di penghujung artikel ini :).

Terdapat tiga teknik utama yang digunakan dalam LABjs, iaitu Elemen Skrip, Suntikan XHR dan Trik Cache

Pertama sekali, kami akan memberikan pengenalan ringkas kepada tiga kaedah pemuatan ini Dalam bahagian keempat, kami akan menganalisis senario penggunaan tiga kaedah dalam pelaksanaan kod sumber LABjs
.

Elemen Skrip (LABjs menggunakan kaedah pemuatan secara lalai)

Kaedah yang paling biasa untuk memuatkan skrip secara dinamik mempunyai banyak kelebihan, termasuk: 1. Pelaksanaan mudah 2. Boleh merentas domain 3. Tidak akan menyekat pemuatan sumber lain, dsb.

Di bawah Opera/Firefox (versi lama): susunan pelaksanaan skrip adalah konsisten dengan susunan nod dimasukkan ke dalam halaman

Di bawah IE/Safari/Chrome: Perintah pelaksanaan tidak boleh dijamin

Nota:

Di bawah versi baharu Firefox, susunan pelaksanaan skrip tidak semestinya sama dengan susunan sisipan ke dalam halaman, tetapi susunan pelaksanaan boleh dijamin dengan menetapkan atribut async tag skrip kepada palsu

Di bawah versi lama Chrome, susunan pelaksanaan skrip tidak semestinya sama dengan susunan sisipan ke dalam halaman, tetapi susunan pelaksanaan boleh dijamin dengan menetapkan atribut async tag skrip kepada palsu

Suntikan XHR
Muatkan fail skrip melalui permintaan ajax dan kemudian laksanakannya melalui:
eval: kaedah biasa
Suntikan XHR: Buat elemen skrip dan masukkan kandungan fail skrip yang dimuatkan ke dalam
Had utama: tidak boleh merentas domain
Helah Cache (sangat bergantung pada pelaksanaan ciri penyemak imbas, tidak disyorkan)
Apabila anda menetapkan atribut jenis elemen skrip kepada nilai yang tidak dikenali oleh penyemak imbas, seperti "teks/cache", "teks/casper", "teks/dunia neraka", dsb., gelagat penyemak imbas yang berbeza adalah seperti berikut:
Dalam IE/Safari/Chrome (versi lama): skrip dimuatkan seperti biasa, tetapi tidak akan dilaksanakan dengan mengandaikan bahawa penyemak imbas tidak melumpuhkan caching, skrip yang dimuatkan akan dicache oleh penyemak imbas apabila ia diperlukan, anda sahaja perlu mencipta semula teg skrip, tetapkan jenis kepada nilai yang betul, dan src menunjuk ke URL fail yang diminta sebelum ini (bersamaan dengan membaca fail daripada cache)
Opera/Firefox: Tidak memuatkan
Nota:
Ia sangat bergantung pada pelaksanaan ciri penyemak imbas dan mungkin menjadi tidak sah apabila pelaksanaan ciri penyemak imbas berubah Tidak disyorkan untuk menggunakan
Versi baharu penyemak imbas Chrome menetapkan jenis elemen skrip kepada sesuatu selain daripada "teks/javascript" dan tidak akan memuatkan fail skrip lagi.

Penghakiman pada pilihan pemuatan skrip dalam LABjs

Abaikan butiran teknikal dan huraikan pelaksanaan dalam LABjs melalui sekeping kod pseudo, iaitu kira-kira:
Mula-mula, tentukan sama ada untuk pramuat skrip yang diminta (lihat ulasan kod pseudo untuk syarat pramuat
). Jika pramuat dilakukan, kemudian tentukan sama ada penyemak imbas menyokong pramuat benar, pramuat ia jika tidak, tentukan sama ada skrip yang diminta berada dalam domain yang sama dengan halaman semasa , , menggunakan Helah Cache; Jika pramuat tidak dilakukan, tentukan sama ada penyemak imbas menyokong atribut async bagi elemen skrip (lihat komen kod pseudo Jika ya, tetapkan atribut async dan minta fail skrip jika tidak, muatkan fail skrip terus melalui elemen skrip). ;

if(ifPreloadScript){  //当请求的脚本文件是否进行预加载：1、需要预加载 2、浏览器支持预加载
  if(supportRealPreloading){  //如果支持真正的预加载
    if(supportPreloadPropNatively){  //支持通过设置script标签的preload属性，实现script的预加载，以及分离加载和执行
                    //Nicholas C. Zakas大神的美好愿望，尚未有浏览器支持：/blog/2011/02/14/separating-javascript-download-and-execution/
      script.onpreload = callback;
      script.newPreload = true;
      script.src = targetUrl;
    }else{
      script.onreadystatechange = callback;  //其实就是指IE浏览器，假设指定了script元素的src属性，IE浏览器里会立即加载
      script.src = targetUrl;  //即使script元素没有被插入页面，callback为预加载后的回调
    }
  }
  else if(inSameDomain){  //非跨域，采用XHR Injection：请求的脚本与当前页面处于同一个域
    xhr = new XMLHttpRequest();  //由于上个判断已经将IE无情地抛弃在这个条件分支之外，所以大胆地用 new XMLHttpRequest()吧
    xhr.onreadystatechange = callback;
    xhr.open("GET",targetUrl);
    xhr.send();
  }
  else{  //最无奈的后招，Cache Trick，新版chromei已经不支持
    script.onload = callback;
    script.type = 'text/cache';  
    script.src = targetUrl;
  }
}else{
  if(canContrlExecutionOrderByAsync){  //如果能够通过script元素的async属性来强制并行加载的脚本顺序执行
                    //kyle大神着力推进的提案，目前已被html5小组接受并放入草案：/Dynamic_Script_Execution_Order#My_Solution
    script.onload = callback;
    script.async = false;  //将script元素的async设为false，可以保证script的执行顺序与请求顺序保持一致
    script.src = targetUrl;
  }
  else{
    script.onload = callback;
    script.src = targetUrl;  
  }
}

Malah, apabila anda mencipta nod img pada halaman dan mengarahkan srcnya ke fail skrip, ia juga boleh memainkan peranan pramuat fail dalam beberapa penyemak imbas Adakah pengarang LABjs tidak memikirkan perkara ini?