praktik terbaik untuk menangani elemen struktural umum halaman?

Pertanyaan yang sangat mendasar: Saya mengkode aplikasi web yang memiliki beberapa halaman. Laman-laman ini memiliki elemen-elemen bersama yang biasa: misalnya, header/masthead situs dan side-bar ada di semua laman. HTML bersifat statis (tidak dihasilkan secara dinamis, "ajaxy-ness" -nya dilakukan di sisi klien).

Apa cara terbaik untuk mengimpor/"menyertakan" elemen umum tersebut ke halaman saya? Solusi yang saya gunakan adalah membuat file HTML berisi placeholder kosong

<div id="header"></div>
<div id="leftSideBar"></div>
(...)

dan kemudian lakukan di $(document).ready() jquery:

$.get("header.html", function(html) { $("#header").html(html); });
// ....

Apakah ini cara terbaik untuk melakukan ini? Saya baru dalam pengembangan web. : )

Saya kira saya juga bisa menggali alat pembuat kode "mirip makro" yang akan saya jalankan pada file HTML untuk diganti, misalnya, "#header" dengan konten header.html. Dengan begitu, memuat halaman memerlukan satu permintaan untuk satu file HTML, dan ini terdengar lebih baik.

Apa cara cerdas untuk mencapai hal ini? Saya yakin masalah ini telah diselesaikan ribuan kali.

EDIT: Sisi server dikodekan dengan Python+cherrypy. (Saya berasumsi masuk akal untuk menghindari pembuatan HTML secara dinamis saat menjalankan aplikasi web "web 2.0-ish". Harap perbaiki saya jika saya salah. Seperti yang saya katakan, saya sangat baru di lingkungan ini.)

Terima kasih atas pemaparan anda,

lara


javascript ajax
person laramichaels    schedule 28.12.2009    source sumber
comment
Menurut saya, ini pendekatan yang cukup logis. Blok kosong tidak memiliki konotasi negatif di dunia HTML jadi apa yang Anda lakukan adalah sah.   -  person Nathan Taylor    schedule 28.12.2009
comment
mengedit jawaban saya untuk memasukkan cara membuat templat menggunakan kerangka kerja   -  person marcgg    schedule 28.12.2009
comment
Apa yang Anda gunakan di sisi server? Kami tidak dapat menjawab pertanyaan Anda tanpa mengetahuinya.   -  person Domenic    schedule 28.12.2009
comment
@Domenic, maaf karena tidak menjelaskannya. Menambahkan catatan tentang itu pada pertanyaan.   -  person laramichaels    schedule 28.12.2009

Jawaban (3)


arrow_upward
5
arrow_downward

Jika Anda ingin menyertakan file, harap pertimbangkan untuk menggunakan beberapa bahasa backend seperti PHP atau ASP. Javascript sebenarnya tidak dimaksudkan untuk melakukan ini meskipun ini akan berhasil.

<?php include 'other_file.php'; ?>

Menggunakan javascript untuk melakukan ini, menurut saya, akan menyebabkan SEO yang buruk dan pemuatan halaman mungkin terlihat aneh bagi pengguna akhir. Jika Anda benar-benar tidak ingin menggunakan bahasa backend, beberapa IDE memiliki cara untuk menangani templat, Anda bisa memeriksanya.

Mengenai kerangka kerja, kebanyakan dari mereka memiliki cara untuk menangani templat. ASP.NET memiliki sistem halaman master, Ruby on Rails memiliki layout.

Berikut ini contoh penggunaan Rails :

<html>
...
<div id="content"> <%= yield %> </div>
...
</html>

Di sini semua konten subhalaman akan masuk ke "hasil". Berikut tautan untuk mempelajari lebih lanjut tentang hal itu.

Beberapa kerangka kerja dapat menangani banyak placeholder.

person marcgg    schedule 28.12.2009
comment
mempertimbangkan aksesibilitasnya, menggunakan javascript untuk menarik konten adalah pendekatan yang salah. - person dusoft; 28.12.2009
comment
Marc, saya tidak setuju dengan gagasan memasukkan file. Saya hanya ingin tahu bagaimana orang yang tidak membuat html secara dinamis menghindari duplikasi elemen halaman umum di semua halaman situs mereka. terima kasih atas bantuannya. - person laramichaels; 28.12.2009
comment
@lara: Menurut saya orang-orang ini menggunakan templat (lihat hasil edit saya di dreamweaver) atau sekadar menggandakan kode. - person marcgg; 28.12.2009
comment
Jika Anda tidak menggunakan bahasa skrip sisi server, maka beberapa bentuk fungsionalitas Penyertaan Sisi Server atau sekadar membuat halaman individual dari templat menggunakan bahasa skrip tentu merupakan pilihan untuk dipertimbangkan. - person Adam Luchjenbroers; 28.12.2009

arrow_upward
1
arrow_downward

Sampai batas tertentu, ini bergantung pada apa yang Anda gunakan di sisi server untuk merender halaman. Jika Anda menggunakan skrip sisi server untuk menghasilkan halaman, Anda harus dapat menggunakan kerangka web (mis. Django atau RubyOnRails) atau bahkan hanya mesin templating dasar seperti Genshi. Fungsionalitas penyertaan dasar bahkan dapat dimasukkan ke dalam bahasa yang Anda gunakan (mis. PHP)

Jika itu hanya HTML statis, Anda mungkin ingin mempertimbangkan untuk menyiapkan beberapa bentuk penyertaan sisi server seperti Apache SSI atau NGINX SSI. Anda harus memilih salah satu yang berfungsi dengan server mana pun yang Anda gunakan, dan Anda memerlukan akses yang cukup untuk menginstal dan mengkonfigurasi plugin atau modul.

Alternatifnya, Anda mungkin ingin mempertimbangkan penggunaan skrip untuk membuat halaman Anda (mengedit, membuat, dan menyebarkan). Pendekatan sederhana menggunakan cat / sed / awk / buat (referensi tambahan yang berguna - Sed & Awk) mungkin yang Anda perlukan , atau Anda mungkin ingin menggunakan mesin templating dan bahasa seperti Python atau Perl.

person Adam Luchjenbroers    schedule 28.12.2009
comment
terimakasih banyak! Aplikasi web dikodekan dengan python, tetapi saya (secara keliru?) mencoba menjaga semua HTML tetap statis. Saya tidak tahu NGIX bisa melakukan itu untuk saya, itu seharusnya menyelesaikannya. : ) -l - person laramichaels; 28.12.2009

arrow_upward
0
arrow_downward

Saya akan menangani penyertaan di sisi server, dan ini berarti lebih sedikit permintaan dari klien, dan mungkin juga memiliki manfaat lain (lebih mudah untuk men-debug js, dll).

Memasukkan proses server sebenarnya tidak akan memberikan tekanan besar padanya.

person MarkR    schedule 28.12.2009