Memahami Memperkenalkan Modul JavaScript yang Berkesan

Pengaturcaraan modular memecah aplikasi besar ke dalam blok kod yang lebih kecil dan mudah diuruskan. Pengekodan berasaskan modul memudahkan penyelenggaraan dan meningkatkan kebolehgunaan semula kod. Walau bagaimanapun, kebergantungan antara modul pengurusan adalah masalah utama yang dihadapi pemaju sepanjang proses pembangunan aplikasi. MemerlukanJS adalah salah satu rangka kerja yang paling popular untuk menguruskan kebergantungan antara modul. Tutorial ini meneroka keperluan kod modular dan menunjukkan bagaimana memerlukanJS dapat membantu.

mata utama

• memerlukan Rangka Kerja yang popular untuk menguruskan kebergantungan antara modul JavaScript, yang meningkatkan kelajuan dan kualiti kod anda, terutama dalam projek besar.
• Keperluan Gunakan Modul Asynchronous Loading (AMD) untuk memuatkan fail, yang membolehkan skrip memuatkan modul dan kebergantungan mereka dengan cara yang tidak menyekat.
• Dalam keperluan, semua kod dibalut require() atau define() fungsi. Fungsi require() digunakan untuk fungsi yang dilaksanakan dengan serta -merta, manakala fungsi define() digunakan untuk menentukan modul yang boleh digunakan di pelbagai lokasi.
• memerlukanJS meningkatkan kualiti kod dengan mempromosikan modulariti dan pemisahan kebimbangan, mengurangkan risiko penamaan konflik dengan mengekalkan skop global yang kemas dan menyediakan mekanisme pengendalian ralat yang kuat.

Beban fail JavaScript

Aplikasi besar biasanya memerlukan banyak fail JavaScript. Biasanya, mereka menggunakan <p> <code>credits.js

di sini, permulaannya dilakukan sebelum memuatkan

. Ini akan mengakibatkan ralat seperti yang ditunjukkan di bawah. Contoh ini hanya memerlukan tiga fail JavaScript. Dalam projek yang lebih besar, perkara -perkara boleh dengan mudah keluar dari kawalan. Di sinilah keperluan yang dimainkan.

memerlukan pengenalan

memerlukanJS adalah modul JavaScript yang terkenal dan pemuat fail yang disokong oleh versi terkini pelayar popular. Dalam keperluan, kami memisahkan kod ke dalam modul, yang masing -masing mengendalikan satu tanggungjawab. Di samping itu, kebergantungan perlu dikonfigurasikan apabila memuatkan fail. Mari kita mulakan dengan memuat turun memerlukan. Selepas muat turun selesai, salin fail ke folder projek anda. Mari kita anggap bahawa struktur direktori projek kini sama dengan angka berikut:

scripts main.js Semua fail JavaScript (termasuk fail memerlukan) terletak di folder

. <script> 标签逐个加载。此外，每个文件都可能依赖于其他文件。最常见的例子是 jQuery 插件，它们都依赖于核心 jQuery 库。因此，必须在加载任何 jQuery 插件之前加载 jQuery。让我们来看一个在实际应用程序中加载 JavaScript 文件的简单示例。假设我们有以下三个 JavaScript 文件： <p><code>purchase.js &lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class='brush:php;toolbar:false;'&gt;function purchaseProduct(){ console.log(&amp;quot;Function : purchaseProduct&amp;quot;); var credits = getCredits(); if(credits &amp;gt; 0){ reserveProduct(); return true; } return false; }&lt;/pre&gt;&lt;div class=&quot;contentsignin&quot;&gt;Salin selepas log masuk&lt;/div&gt;&lt;/div&gt; &lt;p&gt;&lt;code&gt;products.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function reserveProduct(){ console.log(&quot;Function : reserveProduct&quot;); return true; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p><code>credits.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function getCredits(){ console.log(&quot;Function : getCredits&quot;); var credits = &quot;100&quot;; return credits; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>在这个例子中，我们试图购买一个产品。首先，它检查是否有足够的积分可以购买产品。然后，在验证积分后，它预订产品。另一个脚本 <code>main.js</code> 通过调用 <code>purchaseProduct()</code> 来初始化代码，如下所示：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var result = purchaseProduct();</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p><strong>可能出错的地方？</strong></p> <p>在这个例子中，<code>purchase.js</code> 依赖于 <code>credits.js</code> 和 <code>products.js</code>。因此，在调用 <code>purchaseProduct()</code> 之前需要加载这些文件。那么，如果我们按以下顺序包含 JavaScript 文件会发生什么情况呢？</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script src=&quot;products.js&quot;&gt;&lt;/script&gt; Fail digunakan untuk permulaan, dan fail lain mengandungi logik aplikasi. Mari lihat bagaimana memasukkan skrip dalam fail HTML. &lt;script src=&quot;purchase.js&quot;&gt;&lt;/script&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;🎜&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Ini adalah satu -satunya kod yang anda perlukan untuk memasukkan fail menggunakan memerlukan. Anda mungkin tertanya -tanya apa yang berlaku dengan fail lain dan bagaimana ia disertakan. Atribut <code>data-main</code> mentakrifkan titik permulaan aplikasi. Dalam kes ini, ia adalah <code>main.js</code>. Memerlukan Gunakan <code>main.js</code> untuk mencari skrip dan kebergantungan lain. Dalam kes ini, semua fail berada dalam folder yang sama. Menggunakan logik, anda boleh memindahkan fail ke mana -mana folder yang anda suka. Sekarang, mari kita lihat <code>main.js</code>. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Dalam keperluan, semua kod dibalut <code>require()</code> atau <code>define()</code> fungsi. Hujah pertama fungsi ini menentukan kebergantungan. Dalam contoh terdahulu, inisialisasi bergantung kepada <code>purchase.js</code> kerana ia mentakrifkan <code>purchaseProduct()</code>. Sila ambil perhatian bahawa sambungan fail telah ditinggalkan. Ini kerana memerlukan hanya mempertimbangkan <code>.js</code> fail. Hujah kedua untuk <code>require()</code> adalah fungsi tanpa nama yang menerima objek yang memanggil fungsi yang terkandung dalam fail bergantung. Dalam kes ini, kita hanya mempunyai satu pergantungan. Kebergantungan berganda boleh dimuatkan menggunakan sintaks berikut: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;a&quot;,&quot;b&quot;,&quot;c&quot;],function(a,b,c){ });</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> <strong> Buat aplikasi dengan memerlukan </strong> </p> <p> Dalam bahagian ini, kita akan menukar contoh JavaScript tulen yang dibincangkan dalam bahagian sebelumnya untuk memerlukan. Kami telah meliputi <code>main.js</code>, jadi mari kita bincangkan dokumen lain. <code>purchase.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define([&quot;credits&quot;,&quot;products&quot;], function(credits,products) { console.log(&quot;Function : purchaseProduct&quot;); return { purchaseProduct: function() { var credit = credits.getCredits(); if(credit &gt; 0){ products.reserveProduct(); return true; } return false; } } });</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Pertama sekali, kami mengisytiharkan bahawa fungsi pembelian bergantung pada <code>credits</code> dan <code>products</code>. Dalam pernyataan <code>return</code>, kita boleh menentukan fungsi setiap modul. Di sini kita telah memanggil fungsi <code>getCredits()</code> dan <code>reserveProduct()</code> pada objek yang diluluskan. <code>product.js</code> adalah serupa dengan <code>credits.js</code>, seperti yang ditunjukkan di bawah. <code>products.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define(function(products) { return { reserveProduct: function() { console.log(&quot;Function : reserveProduct&quot;); return true; } } });</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> <code>credits.js</code> <s> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define(function() { console.log(&quot;Function : getCredits&quot;); return { getCredits: function() { var credits = &quot;100&quot;; return credits; } } });</pre><div class="contentsignin">Salin selepas log masuk</div></div> Kedua -dua fail dikonfigurasi sebagai modul mandiri -yang bermaksud mereka tidak bergantung kepada apa -apa. Perkara penting yang perlu diperhatikan ialah <p> digunakan bukannya <code>define()</code>. Memilih <code>require()</code> atau <code>require()</code> bergantung kepada struktur kod dan akan dibincangkan di bahagian seterusnya. <code>define()</code> </p> <p> Gunakan <strong> dengan <code>require()</code> <code>define()</code> </strong> Saya menyebut sebelum ini bahawa kita boleh menggunakan </p> dan <p> untuk memuatkan kebergantungan. Memahami perbezaan antara kedua -dua fungsi ini adalah penting untuk menguruskan kebergantungan. Fungsi <code>require()</code> digunakan untuk menjalankan fungsi yang dilaksanakan dengan serta -merta, manakala fungsi <code>define()</code> digunakan untuk menentukan modul yang boleh digunakan di pelbagai lokasi. Dalam contoh kita, kita perlu menjalankan fungsi <code>require()</code> dengan segera. Oleh itu, <code>define()</code> digunakan dalam <code>purchaseProduct()</code>. Walau bagaimanapun, fail lain adalah modul yang boleh diguna semula, jadi gunakan <code>require()</code>. <code>main.js</code> <code>define()</code> </p> mengapa memerlukan ini sangat penting <p> <strong><p> Dalam contoh JavaScript tulen, ralat dihasilkan kerana urutan pemuatan fail yang salah. Sekarang, padamkan fail <code>credits.js</code> dalam contoh yang diperlukan dan lihat bagaimana ia berfungsi. Angka berikut menunjukkan output alat cek penyemak imbas. </p> <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036404874237.jpg" class="lazy" alt="Understanding RequireJS for Effective JavaScript Module Loading " /> <s> </p> Perbezaan di sini ialah tiada kod dilaksanakan dalam contoh yang diperlukan. Kita boleh mengesahkan ini kerana tiada apa yang dicetak pada konsol. Dalam contoh JavaScript tulen, kami mencetak beberapa output pada konsol sebelum menghasilkan ralat. MemerlukanJS menunggu sebelum memuatkan semua modul bergantung sebelum melaksanakan fungsi. Jika mana -mana modul hilang, ia tidak akan melaksanakan sebarang kod. Ini membantu kami mengekalkan integriti data kami. <p> </p> <p> urutan pengurusan fail ketergantungan <strong> </strong> </p> memerlukanJS menggunakan pemuatan modul asynchronous (AMD) untuk memuatkan fail. Setiap modul bergantung akan mula dimuatkan dengan permintaan tak segerak dalam urutan yang diberikan. Walaupun dengan pesanan fail yang diambil kira, kami tidak dapat menjamin bahawa fail pertama akan dimuatkan sebelum fail kedua disebabkan oleh sifat tak segerak. Oleh itu, memerlukanJS membolehkan kami menggunakan konfigurasi Shim untuk menentukan urutan fail yang perlu dimuatkan dalam urutan yang betul. Mari kita lihat bagaimana untuk membuat pilihan konfigurasi dalam keperluan. <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;🎜&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> memerlukan anda membolehkan kami menyediakan pilihan konfigurasi menggunakan fungsi <p>. Ia menerima parameter yang dinamakan <code>config()</code> yang boleh kita gunakan untuk menentukan urutan kebergantungan mandatori. Anda boleh mencari panduan konfigurasi lengkap dalam dokumentasi API yang memerlukan. <code>shim</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> Di bawah keadaan biasa, empat fail ini akan mula memuatkan dalam urutan yang diberikan. Di sini, <p> bergantung pada <code>source2. Oleh itu, sekali <code>source1 telah selesai memuatkan, <code>source1 akan mempertimbangkan semua kebergantungan untuk dimuatkan. Walau bagaimanapun, <code>source2 dan <code>dependency1 masih boleh dimuatkan. Menggunakan konfigurasi Shim, kebergantungan mesti dimuatkan sebelum <code>dependency2. Oleh itu, tiada kesilapan dijana. <code>source1 <p> Kesimpulan <strong> Saya harap tutorial ini akan membantu anda memulakan dengan memerlukan. Walaupun ia kelihatan mudah, ia benar -benar kuat dalam menguruskan kebergantungan dalam aplikasi JavaScript yang besar. Tutorial ini sahaja tidak mencukupi untuk menampung semua aspek yang memerlukan, jadi saya harap anda dapat mempelajari semua konfigurasi dan teknik lanjutan menggunakan laman web rasmi. <p> <p> (Berikut adalah penciptaan pseudo-asal Soalan Lazim dalam teks asal, mengekalkan makna asal, dan menyesuaikan dan menulis semula ayat) <strong> <sh> FAQs Mengenai Modul JavaScript Memuatkan Menggunakan Keperluan <p> <strong> Apakah penggunaan utama yang memerlukan dalam JavaScript? <p> memerlukanJS adalah fail JavaScript dan loader modul yang dioptimumkan untuk kegunaan penyemak imbas, tetapi juga sesuai untuk persekitaran JavaScript yang lain. Tujuan utama menggunakan keperluan adalah untuk meningkatkan kelajuan dan kualiti kod anda. Ia membantu anda menguruskan kebergantungan antara modul kod dan skrip beban dengan cara yang cekap. Ini amat berguna dalam projek besar di mana skrip tunggal boleh menjadi kompleks. MemerlukanJS juga membantu mengekalkan skop global bersih dengan mengurangkan penggunaan pembolehubah global. <p> <strong> Bagaimana menangani kebergantungan? <p> MemerlukanJS mengendalikan kebergantungan melalui mekanisme yang dipanggil definisi modul asynchronous (AMD). Ini membolehkan skrip memuatkan modul dan kebergantungan mereka dengan cara yang tidak menyekat. Apabila anda mentakrifkan modul, anda menentukan kebergantungannya, memerlukanJS memastikan bahawa kebergantungan ini dimuatkan sebelum modul itu sendiri. Dengan cara ini, anda boleh memastikan bahawa semua kod yang diperlukan tersedia semasa melaksanakan modul. <p> <strong> Bolehkah memerlukan digunakan dengan node.js? <p> Ya, memerlukanJS boleh digunakan dengan node.js, walaupun ia lebih biasa digunakan dalam pelayar. Apabila digunakan dengan node.js, memerlukan anda membolehkan anda mengatur kod JavaScript sisi pelayan ke dalam modul seperti dalam penyemak imbas anda. Walau bagaimanapun, node.js mempunyai sistem modulnya sendiri (Commonjs), jadi menggunakan memerlukan GuesJs kurang biasa. <p> <strong> Bagaimana untuk meningkatkan kualiti kod? <p> memerlukanJS meningkatkan kualiti kod dengan mempromosikan modulariti dan pemisahan kebimbangan. Dengan menganjurkan kod ke dalam modul, masing -masing dengan fungsi khususnya, anda boleh menulis kod yang lebih mudah untuk mengekalkan dan menguji. Ia juga mengurangkan risiko penamaan konflik dengan mengekalkan skop global yang kemas. <p> <strong> Apakah perbezaan antara keperluan dan commonjs? <p> memerlukan dan CommonJs adalah kedua -dua sistem modul JavaScript, tetapi mereka mempunyai beberapa perbezaan utama. MemerlukanJS menggunakan format Definisi Modul Asynchronous (AMD) yang direka untuk memuatkan modul dan kebergantungan mereka secara tidak segerak dalam penyemak imbas. Sebaliknya, Commonjs yang digunakan oleh Node.js menyegerakkan pemuatan modul, yang lebih sesuai untuk persekitaran pelayan. <p> <strong> Bagaimana untuk menentukan modul dalam keperluan? <p> Dalam keperluan, anda boleh menggunakan fungsi <code>define untuk menentukan modul. Fungsi ini mengambil dua parameter: pelbagai pergantungan dan fungsi kilang. Sebaik sahaja semua kebergantungan dimuatkan, fungsi kilang dipanggil dan nilai modul harus dikembalikan. <p> <strong> Bagaimana untuk memuatkan modul dalam keperluan? <p> Untuk memuatkan modul dalam keperluan, anda boleh menggunakan fungsi <code>require. Fungsi ini menerima dua parameter: pelbagai pergantungan dan fungsi panggil balik. Sebaik sahaja semua kebergantungan dimuatkan, fungsi panggil balik dipanggil. <p> <strong> Bolehkah saya menggunakan keperluan dengan perpustakaan JavaScript yang lain? <p> Ya, memerlukanJS boleh digunakan dengan perpustakaan JavaScript lain seperti jQuery, tulang belakang, dan sudut. Ia boleh memuatkan perpustakaan ini sebagai modul dan menguruskan kebergantungan mereka. <p> <strong> Bagaimana menangani ralat? <p> memerlukanJS mempunyai mekanisme pengendalian ralat yang kuat. Jika skrip gagal dimuatkan, memerlukanJS akan mencetuskan peristiwa ralat. Anda boleh mendengar acara ini dan mengendalikan kesilapan dalam kod anda dengan sewajarnya. <p> <strong> Bolehkah saya menggunakan keperluan untuk pengeluaran? <p> Ya, memerlukanJS sesuai untuk persekitaran pembangunan dan pengeluaran. Bagi persekitaran pengeluaran, keperluan ini menyediakan alat pengoptimuman yang menggabungkan dan memampatkan fail JavaScript anda untuk meningkatkan masa pemuatan. </script>

Atas ialah kandungan terperinci Memahami Memperkenalkan Modul JavaScript yang Berkesan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!