Apa yang diperlukan ya ada sedikit templat

Baru -baru ini, saya menerima e -mel dari seseorang yang bergelut dengan HTML, CSS, dan JavaScript. Kod mereka, yang mengandungi ruang letak HTML dan data JavaScript, tidak berfungsi seperti yang diharapkan. Tingkah laku yang dimaksudkan adalah untuk data JavaScript untuk mengisi tempat letak HTML, jangkaan umum untuk pemula.

Walaupun pemaju web yang berpengalaman dengan mudah mengenal pasti isu ini, sangat berharga untuk memahami perspektif ini dan menawarkan penyelesaian mudah.

HTML yang bermasalah:

<meta charset="utf-8"><title> Ujian</title><link href="test.css" rel="stylesheet"><div> {company_name}</div>

JavaScript yang sepadan:

 var company_data = {
  "{company_name}": "sesetengah syarikat",
};

Kod ini sah dan berjalan, tetapi ia hanya memaparkan "{company_name}" kerana pelayar tidak secara automatik menggantikan ruang letak dengan data JavaScript.

Pembetulan mudah (tetapi tidak ideal):

Untuk memaparkan "sesetengah syarikat," satu baris JavaScript cukup:

 var company_data = {
  "{company_name}": "Sesetengah syarikat"
};

document.QuerySelector ("div"). innerHtml = company_data ["{company_name}"];

Penyelesaian ini, sementara berfungsi, tidak mempunyai kebolehgunaan semula dan ketahanan.

Keperluan untuk templat

Harapan pengguna adalah bahawa sistem itu secara automatik mengendalikan templating - menggantikan tempat letak HTML dengan kekunci JavaScript yang sepadan. Ini tidak wujud untuk teknologi web standard.

Banyak pendekatan wujud untuk mencapai matlamat ini. Berikut adalah beberapa:

• Enjin Templating: Gunakan enjin templat seperti hendal atau misai.
• Penjana tapak statik: Menggunakan penjana tapak statik seperti Eleventy (yang menggunakan cecair).
• Templat HTML tersuai: Buat HTML<template></template> elemen dan tulis skrip untuk menggunakannya.
• Komponen Web: Bina komponen web tersuai.
• Rendering sisi pelayan: Proses templat pada pelayan menggunakan bahasa back-end atau alat seperti nunjucks.
• Preprocessors: Gunakan preprocessor seperti PUG.

Sebaik-baiknya, templating harus berlaku di sisi pelayan atau semasa proses membina untuk mengelakkan manipulasi DOM yang tidak perlu. Walau bagaimanapun, untuk tujuan ilustrasi, contoh sisi pelanggan menggunakan hendal berikut:

(Contoh hendal akan dimasukkan di sini, menunjukkan cara menggunakan hendal untuk mencapai templat yang dikehendaki.)

Atas ialah kandungan terperinci Apa yang diperlukan ya ada sedikit templat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!