cari

Rumah >hujung hadapan web >tutorial js >Hubungan pertama dengan kemahiran JS require.js tool_javascript modular

Hubungan pertama dengan kemahiran JS require.js tool_javascript modular

WBOY
WBOYasal
2016-05-16 15:04:591629semak imbas

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>

a.js:

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

Mungkin anda lebih suka menulisnya seperti ini

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

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 45a2772a6b6107b401db3c9b82c049c2body54bdf357c58b8a65c66d7c19c8e4d114 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>
a.js:


define(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})
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>
Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk memahami alat modular require.js.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Editor teks kaya ArtEditor menambah kemahiran function_javascript penyerahan borangArtikel seterusnya：Editor teks kaya ArtEditor menambah kemahiran function_javascript penyerahan borang

Artikel berkaitan

Lihat lagi