Cara menggunakan RequireJS untuk mengoptimumkan kod rujukan JavaScript_Pengetahuan asas

RequireJS ialah cara yang berkesan untuk meningkatkan kelajuan dan kualiti kod javascript anda, di samping menjadikan kod anda lebih mudah dibaca dan diselenggara.

Dalam artikel ini, saya akan memperkenalkan anda kepada RequireJS dan cara anda harus menggunakannya. Kami membincangkan mengimport fail dan menentukan modul, dan juga menyentuh aspek pengoptimuman.

Ringkasnya, require.js ialah pemuat skrip yang membolehkan anda mengasingkan kod JavaScript anda kepada fail dan modul, sambil menguruskan kebergantungan antara setiap modul.

Import fail

Sebelum mula menggunakan RequireJS, kami perlu memuat turun pustaka dan fail Takrifan Modul Asynchronous (AMD). Kemudian paut ke fail require.js di kepala dokumen, seperti:

 
<script src="require.js" data-main="main"></script>

Anda mungkin bertanya apakah atribut data-utama Menggunakan RequireJS bermakna apabila anda memanggil memerlukan di kepala dokumen, anda juga akan memautkan ke fail utama aplikasi javascript anda, yang utama dalam contoh ini. js (sila ambil perhatian bahawa RequireJS secara automatik menambah akhiran .js pada penghujung nama fail)

Dalam fail main.js, anda perlu mengkonfigurasi RequireJS, memuatkan modul dan menentukan laluan asas untuk digunakan semasa mengimport fail.

Memerlukan fungsi

RequireJS menggunakan fungsi memerlukan mudah untuk mengimport skrip Dalam contoh ini, RequireJS mengimport JQuery:

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

Salah satu kelebihan RequireJS ialah ia sangat mudah dibaca. Dalam kod di atas, kita dapat melihat bahawa fungsi memerlukan mula-mula mengambil fail bernama jquery.js, dan kemudian menghantar $ sebagai parameter kepada fungsi tanpa nama Apabila tindakan ini selesai, anda boleh menggunakan kod JQuery.

Kini, kod anda secara amnya tidak termasuk perpustakaan jQuery bagi fail jquery.js Seperti kebanyakan pemalam dan rangka kerja, kami biasanya memilih untuk mengimportnya daripada GitHub atau Google CDN mereka, jadi kami perlu mengkonfigurasinya Laluan sebenar. :

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

Ini bermakna anda boleh mengimport jquery melalui Google (sila ambil perhatian bahawa saya menggunakan nama "jquery" dalam contoh ini, anda boleh menggunakan mana-mana nama yang anda suka)

Takrifkan modul

Menggunakan mod AMD bermakna kod kami boleh distrukturkan ke dalam modul-modul ini melaksanakan fungsi tertentu dalam aplikasi. Anda boleh meletakkan hanya dua baris kod dalam modul atau 100 baris kod, semuanya bergantung pada apa yang anda ingin capai melalui modul.

Untuk menentukan modul, kita boleh menulis:

define(function () {
 function add (x,y) {
  return x + y;
 }
});

Dalam hal ini, saya menentukan fungsi tambah tanpa sebarang kebergantungan, tetapi jika fungsi ini memerlukan jquery untuk berfungsi dengan betul, kod definisi mungkin seperti ini:

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

Menggunakan sintaks ini, kami memberitahu JavaScript untuk mengimport jquery dahulu dan kemudian menjalankan kod, supaya jquery boleh digunakan pada bila-bila masa. Kami juga boleh menggunakan modul yang ditakrifkan dalam fail Javascript, bukan hanya rangka kerja atau pemalam.

Pengoptimuman

Seperti yang anda lihat, RequireJS ialah alat yang berkuasa untuk menyusun fail anda ke dalam modul dan mengimportnya hanya apabila anda memerlukannya. Kelemahannya ialah sejumlah besar fail JavaScript juga memerlukan banyak masa import, jadi RequireJS menyertakan pengoptimum untuk mengumpul data semua fail dan memasukkannya ke dalam fail yang dimampatkan.

Secara keseluruhan, RequireJS ialah alat yang hebat untuk mengatur dan mengoptimumkan Javascript dalam aplikasi web anda.