Bagaimana menerapkan pemuatan modular pada halaman HTML tradisional

Untuk situs web, ada sejumlah besar modul bersama di antara banyak halaman, seperti header, footer, kolom pengguna, dll. Untuk kerangka kerja dengan mesin tampilan back-end, pembagian ini relatif mudah untuk diekstraksi. Misalnya, asp.net mvc memiliki tata letak terpadu MasterPage, @Section, dan fungsi lain yang dapat berbagi fungsi templat tampilan. Namun untuk HTML, Anda tidak seberuntung itu. Fungsi-fungsi ini tidak tersedia dalam file html, jadi saat Anda menggunakan halaman HTML murni untuk menulis situs web aplikasi, Anda mungkin harus menghadapi tugas yang berulang-ulang ini, meskipun Anda dapat membuat sarang IFrames metode implementasi ini tidak ideal dan ramah.

Baru-baru ini, saya mengimplementasikan situs web berdasarkan kerangka kerja saya sendiri. Karena kerangka tersebut tidak memiliki mesin tampilan back-end, saya mengalami masalah seperti ini... Mari kita lihat situasi sebenarnya terlebih dahulu.

Dua halaman HTML di atas unik kecuali bagian inti, dan blok data lainnya sama. Jika tidak ada mesin tampilan back-end, bagaimana menurut Anda... Pada awalnya, setiap modifikasi harus disinkronkan ke halaman lain. Belakangan saya mengetahui bahwa melakukan hal ini pasti akan membuat saya mati. Setelah berpikir sejenak, saya menemukan solusinya.

Setelah dipikir-pikir, saya menemukan bahwa template publik dapat diekstraksi ke dalam file HTML (nama file sementara bernama PublicModule.html), sebagai berikut:

 <template> <template id=header> <div class=navbar-header> <button class=navbar-toggle diciutkan type=button data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> Alihkan navigasi</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Net Library</a> </div> <div class=navbar-collapse runtuhnya peran=navigasi> <div style=margin-top:15px;margin-kiri:120px; posisi:mutlak;><span style=color:white;padding-top:20px;>XXXXX</span></div> <ul class=nav navbar-nav></ul> <ul class=nav navbar-nav navbar-right> <li> <a href=/Blog.html>Blog</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>Manajemen Situs Web</a></li> </ul> </div> </template > <template id=doc_tags_navbar> <div class=container-fluid style=padding:0px;> <ul class=nav navbar-nav btn-group-sm id=tagbar> <li><a style=font-weight:bold; padding-bottom:6px;padding-top:6px; href=/index.html>Beranda</a></li> <li v-for=item di Data><a v- ikat:judul=item.Keterangan style=berat font:bold; padding-bawah:6px;padding-atas:6px; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; tagbarControl = new Vue({ el: '#tagbar', data: { Data: [] } }); var hasil = menunggu $ListDocTags(); tagbarControl.Data = hasil.Data; } ListDocTags();

Tentukan blok templat melalui tag templat, lalu tentukan ID unik untuk setiap blok. Beberapa siswa mungkin bertanya bahwa template tersebut bukan tag HTML yang valid, lalu bagaimana cara mengatasinya? Browser template yang benar tidak dapat menanganinya, tetapi JQuery bisa. Pada titik ini, saya yakin beberapa siswa memahami prinsipnya.

Setelah modul ditentukan, bagaimana cara mereferensikannya dalam HTML? Faktanya, HTML tidak mendukung fungsi seperti itu, tetapi kita dapat menentukan beberapa atribut khusus agar HTML dapat diinterpretasikan oleh JQuery. Di sini kita mendefinisikan atribut slot untuk menentukan ID template.

 <div class=navbar navbar-inverse navbar-fixed-top> <div class=container slot=header> </div> </div> <nav class=navbar navbar-default style=padding:0px;margin:0px;min -tinggi:0px; slot=doc_tags_navbar> </nav>

Templat telah ditentukan dan HTML halaman juga direferensikan. Selanjutnya, keduanya perlu diintegrasikan. Sampai disini, saya yakin teman-teman yang familiar dengan JQuery pasti sudah tahu apa yang harus dilakukan :)

Untuk JQuery, Anda dapat memuat halaman modul publik dan mengubahnya menjadi DOM, lalu mengganti elemen dengan slot yang ditentukan pada halaman tersebut.

 function moduleLoad(url) { $.get(url, function (hasil) { var html = $(hasil); var __templates = html; $([slot]).each(function () { var id = $(ini) .attr('slot'); var body = $(__template).find('#' + id).html(); $(ini).html(body); }); });}$(dokumen).siap(fungsi () { moduleLoad(/PublicModule.html);});

Kodenya sederhana dan efektif. Simpan seluruh skrip ke file, lalu tambahkan ke halaman dan itu akan dimuat secara otomatis.

Apakah halaman HTML yang dapat dimuat sekaligus sekarang memerlukan pemuatan Ajax? Apakah tidak akan menyebabkan pemuatan lambat? Faktanya, Anda dapat menggunakan strategi cache lokal untuk halaman HTML modul publik, sehingga semua halaman dapat diambil langsung dari lokal saat memuat modul karena bagian publik diekstraksi, akumulasi halaman terkait menjadi lebih kecil dan kecepatan memuat lebih cepat.

Bagi mereka yang terbiasa menggunakan mesin tampilan sisi server, mungkin agak sulit untuk sepenuhnya menggunakan model pengembangan front-end HTML/JS. Namun pengembangan front-end yang sepenuhnya didasarkan pada HTML/JS memiliki keuntungan yang jelas. Pemrosesan tampilan tidak memerlukan interpretasi layanan, yang sangat mengurangi kerugian server. HTML dapat melakukan caching lokal dengan lebih baik, dan sekarang ada banyak kerangka kerja HTML/JS yang memungkinkan Anda untuk menulis Lebih mudah dan sederhana.

Di atas adalah metode yang diperkenalkan editor kepada Anda untuk menerapkan pemuatan modular halaman HTML tradisional. Saya harap ini bermanfaat bagi Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu!