Hubungan pertama dengan kemahiran JS require.js tool_javascript modular-tutorial js-php.cn

Hubungan pertama dengan kemahiran JS require.js tool_javascript modular

WBOY

Lepaskan： 2016-05-16 15:04:59

asal

1616 orang telah melayarinya

Apabila fungsi laman web semakin kaya, js dalam halaman web menjadi lebih kompleks dan kembung Kaedah asal mengimport fail js satu demi satu melalui tag skrip tidak lagi dapat memenuhi model pembangunan Internet semasa. Kami memerlukan pasukan Satu siri keperluan kompleks seperti kerjasama, penggunaan semula modul, ujian unit, dsb.

RequireJS ialah rangka kerja pemuatan modul JavaScript yang sangat kecil dan salah satu pelaksana terbaik spesifikasi AMD. Versi terbaru RequireJS hanya dimampatkan 14K, yang sangat ringan. Ia juga boleh berfungsi dengan rangka kerja lain Menggunakan RequireJS pasti akan meningkatkan kualiti kod bahagian hadapan anda.

Apakah faedah yang dibawa oleh requirejs?

Penerangan rasmi requirejs:

　RequireJS ialah fail JavaScript dan pemuat modul Ia dioptimumkan untuk kegunaan dalam penyemak imbas, tetapi ia boleh digunakan dalam persekitaran JavaScript lain, seperti Rhino dan Node Menggunakan pemuat skrip modular seperti RequireJS akan meningkatkan kelajuan dan kualiti kod anda.

Anggaran makna:

Ia boleh digunakan sebagai pemuat modul untuk fail js dalam penyemak imbas, dan juga boleh digunakan dalam persekitaran Node dan Rhino, balabala... Perenggan ini menerangkan fungsi asas requirejs "pemuatan modular". Kami akan menerangkannya satu persatu dalam bab berikut

Mari kita lihat senario biasa dahulu dan terangkan cara menggunakan requirejs melalui contoh

Kaedah penulisan biasa
index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="a.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

Salin selepas log masuk

a.js:

function fun1(){
 alert("it works");
}
 
fun1();

Salin selepas log masuk

Mungkin anda lebih suka menulisnya seperti ini

(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})()

Salin selepas log masuk

Kaedah kedua menggunakan skop blok untuk mengisytiharkan fungsi untuk mengelakkan pencemaran pembolehubah global Intipatinya masih sama Apabila menjalankan dua contoh di atas, saya tidak tahu jika anda perasan bahawa apabila amaran dilaksanakan, html. kandungan kosong , iaitu body ia hanya muncul selepas mengklik OK.

memerlukan kaedah penulisan

Sudah tentu, anda mesti pergi ke tapak web requirejs untuk memuat turun js -> index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="require.js"></script>
  <script type="text/javascript">
   require(["a"]);
  </script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

Salin selepas log masuk

a.js:

define(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})

Salin selepas log masuk

Pelayar menggesa "ia berfungsi", menunjukkan bahawa ia berjalan dengan betul, tetapi terdapat satu perbezaan kali ini penyemak imbas tidak kosong, dan badan telah muncul dalam halaman itu, kita boleh tahu bahawa requirejs mempunyai kelebihan berikut:

1. Halang pemuatan js daripada menyekat pemaparan halaman

2. Gunakan panggilan atur cara untuk memuatkan js untuk mengelakkan adegan hodoh berikut

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

Salin selepas log masuk

Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk memahami alat modular require.js.