Ketika modularisasi front-end, tidak hanya JS membutuhkan manajemen modular, tetapi HTML kadang-kadang juga membutuhkan manajemen modular. Di sini kami memperkenalkan cara mengimplementasikan pengembangan modular kode HTML melalui Persyaratan.
Cara memuat html menggunakan kebutuhan
ReuqireJs memiliki plug-in teks yang dapat membaca konten file yang ditentukan, dan konten yang dibaca adalah teks.
Cara mengunduh plugin teks
Metode pertama dapat diunduh melalui NPM:
NPM Instal NeedJS/Teks
Metode kedua juga dapat diunduh langsung dari github resmi.
Cukup salin konten langsung ke Text.js.
Cara menginstal plugin teks
Anda dapat mengonfigurasi ketergantungan plug-in teks di main.js di Persyaratan, yang mirip dengan jQuery. Pastikan saja dapat dimuat ke dalamnya melalui pemuatan normal.
needjs.config ({baseurl: './',paths: {' text ': path+'/membutuhkan/teks ', ...}, shim: {...}});Itu juga dapat ditempatkan langsung di BaseUrl.
Cara menggunakan teks
Di modul target, ikuti sintaks berikut:
define (fungsi (membutuhkan) {var html = membutuhkan ("Text! html/test.html"); console.log (html);});atau
tentukan (["teks! html/test.html"], function (html) {console.log (html);});Bagaimana cara melakukan pengembangan modular HTML?
Setelah membaca di atas, Anda sudah dapat menggunakan teks, tetapi masih belum tahu cara mengatur kode front-end.
Ambil kastanye:
Halaman situs web taman blog akan melompat ke halaman yang berbeda sesuai dengan navigasi di atas. Jika dalam satu halaman, mudah untuk memikirkan metode asli, tombol navigasi sesuai dengan div yang berbeda. Mengklik tombol itu akan menampilkan div yang sesuai; Divs lain akan disembunyikan.
Kemudian, kode front-end mungkin terlihat seperti ini:
<html> <body> <av> tombol navigasi 1, tombol navigasi 2, tombol navigasi 3 </av> <div style = "display: block"> halaman yang sesuai dengan tombol 1 </div> <div style = "Display: none"> Halaman yang sesuai dengan tombol 2 </div> <div style = "Tampilan: Tidak Ada"> Halaman yang sesuai dengan tombol 3 </Div> </body> </body> ht ht> tidak ada "none"> yang sesuai dengan tombol 3 </div> </body> </body>
Kode seperti itu akan sangat berantakan ... dan html front-end akan sangat lama ... tidak kondusif untuk pemeliharaan.
Kemudian dengan plugin teks reuqirejs, Anda dapat melakukan ini:
<html> <body> <av> tombol navigasi 1, tombol navigasi 2, tombol navigasi 3 </av> <div id = "target"> </div> </body> </html>
Kemudian di modul yang sesuai:
$ ('#target'). html (membutuhkan ("Teks! Target yang sesuai dengan page.html"));Ini akan membuat Anda lebih santai! Kode front-end juga dapat dikelola secara efektif dengan modul!
Namun, perlu dicatat bahwa metode ini akan menyebabkan peristiwa terikat tidak valid - jadi Anda harus menebus kembali peristiwa setelah metode html ().
Saya akan memperkenalkan banyak hal kepada Anda tentang menggunakan kebutuhan untuk pengembangan modular di HTML, dan saya harap ini akan membantu Anda!