Sebagian besar proyek menggunakan pengembangan modular, yang membutuhkan JS adalah model untuk pengembangan modul AMD, sehingga perlu mempelajarinya. Dengan menggunakan NequesJS langkah demi langkah untuk menulis demo, kita dapat mempelajari proses pengembangan keseluruhan kebutuhan dan beberapa perasaan menggunakan kebutuhan sendiri.
AMD: Mekanisme untuk memuat kode JavaScript yang tidak sinkron berdasarkan modul. Ini merekomendasikan pengembang untuk merangkum kode JavaScript ke dalam modul, dan ketergantungan pada objek global menjadi ketergantungan pada modul lain, tanpa menyatakan banyak variabel global. Ikuti dependensi modul individu melalui penundaan dan pemuatan sesuai permintaan. Manfaat kode javascript modular jelas. Kopling longgar dari berbagai komponen fungsional dapat sangat meningkatkan penggunaan kembali dan pemeliharaan kode. Pemuatan Cepat Kode JavaScript yang tidak blokir ini memungkinkan elemen UI lainnya di halaman web yang tidak bergantung pada kode JavaScript, seperti gambar, CSS dan node DOM lainnya, untuk memuat terlebih dahulu, halaman web memuat lebih cepat dan pengguna juga mendapatkan pengalaman yang lebih baik.
1. Unduh Requiejs
Sebelum pengembangan modular dengan requiejs, kita perlu menyiapkan sesuatu. Itu harus mengunduh file kebutuhan.js, hahaha, karena dikembangkan berdasarkan itu.
2. Buat file html
Setelah membuat file HTML, mengimpor Persyaratan harus menggunakan tag <script>, tidak ada keraguan tentang ini. Lalu ada atribut data-data dalam tag ini. Fungsinya adalah bertindak sebagai pintu masuk dan keluar, yaitu, setelah memuat persyaratan, masuk dari atribut data-data.
Misalnya, berikut ini adalah:
<! Doctype html> <head> <title> memerlukan </itement> <meta http-equiv = "konten-tipe" content = "text/html; charset = utf-8"/> </head> <body> <!-Ini persyaratan, data-main digunakan sebagai modul masuk, di sini adalah JS/Main-> <Script-Main = "JS =" JS = "Main" di sini adalah JS/Main-> DATA-MASAIN = "JS-MAIN =" src = "js/need.js"> </script> </body> </html>
Saat saya memuat JS/membutuhkan.js, maka saya pergi untuk mengeksekusi file JS JS/Main. Utama juga merupakan file JS. Kita dapat menghilangkan akhiran .Js dan kebutuhan akan menambahkannya.
3. Data-Main
Setelah program mengeksekusi <skrip data-main = 'js/main' src = 'js/require.js'> </script>, masukkan main.js melalui data-data dan jalankan main.js. Jadi apa yang ada di Main.js?
Silakan lihat kodenya:
/* require.config execute baseUrl as 'js', baseUrl refers to the root directory of the module file, which can be an absolute path or a relative path*/require.config({ baseUrl: 'js', paths: { jquery: 'jquery-1.8.2.min' }});/* Here, monkey.js is introduced through require, and then parameters are assigned to them through the fungsi anonim, seperti monyet-> mk*/membutuhkan (['monyet'], fungsi (mk) {mk.init ();});Dari kode di atas, Anda dapat melihat bahwa main.js berisi dua modul: membutuhkan.config dan membutuhkan.
Fungsi kebutuhan. Config adalah untuk mengonfigurasi beberapa parameter kebutuhan dan kemudian merujuknya secara publik.
Misalnya, fungsi baseUrl di atas adalah menggunakannya sebagai jalur dasar dan mencari file di bawah jalur ini. Saya memasukkan semua file .js di folder JS. Oleh karena itu, setelah mengkonfigurasi properti ini, file selanjutnya akan mencari konten di jalur JS.
sebagai berikut:
membutuhkan (['monyet'], fungsi (monyet) {monkey.init ();});Ketika mengacu pada monyet, itu adalah referensi monyet, bukan js/monyet.
Apa peran jalan setapak? Ini untuk menggantikan beberapa file JS yang umum digunakan dengan nama umum. Misalnya, jQuery-1.8.2.min.js, kami tidak dapat menulis ini setiap kali kami menyebutnya, jadi untuk kenyamanan, kami mengganti jQuery-1.8.2.min.js. Di masa depan, kita dapat menggunakan jQuery secara langsung, yang cepat dan nyaman.
Oke, membutuhkan.config pada dasarnya akrab dengannya. Singkatnya, fungsinya adalah untuk mengkonfigurasi kebutuhan.
Bagaimana dengan yang dibutuhkan?
Fungsi kebutuhan adalah untuk mengeksekusi. Misalnya, di sini saya hanya perlu monkey.js untuk dieksekusi, jadi saya mengimpor monyet dan kemudian memperoleh nilai pengembalian setelah eksekusi monyet melalui parameter MK. Jika ada nilai pengembalian, maka kita dapat melakukan pemrosesan MK yang sesuai.
Hei, apa yang ada di dalam monyet?
Mari kita lihat:
/* Tentukan parameter adalah fungsi anonim, yang mengembalikan objek*/define (['jQuery'], function ($) {var init = function () {console.log ($. browser);}; return {init: init};});mendefinisikan! Fungsinya adalah untuk mendefinisikan modul JS untuk digunakan oleh modul lain atau memerlukan. Metodenya merujuk pada modul JS lainnya mirip dengan yang dibutuhkan. Ini memperkenalkan file JS yang diperlukan dan kemudian sesuai dengan parameter satu per satu. Penting untuk dicatat bahwa modul lain tidak dapat mengakses metode atau variabel yang didefinisikan dalam definisi, jadi jika Anda ingin modul lain dapat mengaksesnya, Anda dapat membuang metode atau fungsi yang sesuai dengan metode atau fungsi. Di sini, yang saya kembalikan adalah objek yang menyediakan init untuk dihubungi modul lain.