Tìm hiểu HTML Template Tag và <script type=”text/html”></script>

I. Học Sử Dụng Template trong <script type="text/html"></script>#

1. Giới thiệu về Template trong <script type="text/html"></script>#

Trong lập trình web, template là một cách tổ chức và chèn nội dung động vào giao diện HTML. Thẻ <script type="text/html"> được sử dụng để chứa các mẫu template này. Đây không phải là một đoạn mã JavaScript thực thi, mà là một dạng HTML mẫu (template) mà bạn có thể xử lý và hiển thị bằng JavaScript hoặc các thư viện hỗ trợ như Underscore.js, Handlebars.js.

2. Lợi ích của Template HTML#

• Tách biệt giao diện và logic: Giúp mã dễ bảo trì hơn, vì phần giao diện được tách biệt khỏi JavaScript.
• Dễ dàng tái sử dụng: Template có thể được sử dụng lại nhiều lần với dữ liệu khác nhau.
• Linh hoạt: Cho phép xây dựng giao diện động dựa trên dữ liệu đầu vào.

3. Cách hoạt động của Template HTML#

Template chứa các placeholder để thay thế bằng dữ liệu thực tế khi hiển thị. Các placeholder này thường có dạng:

• {%= variable %}: Biểu thị một giá trị động sẽ được chèn vào đây.
• {% if/else %}: Biểu thức điều kiện.
• {% for/each %}: Dùng để lặp qua danh sách hoặc mảng.

Ví dụ:

<script id="template-id" type="text/html">
   <div class="user">
       <h3>{%= name %}</h3>
       {% if (age) { %}
           <p>Tuổi: {%= age %}</p>
       {% } else { %}
           <p>Tuổi: Không rõ</p>
       {% } %}
   </div>
</script>

• {%= name %}: Được thay thế bằng tên của người dùng.
• {% if (age) { %}: Kiểm tra xem age có tồn tại hay không để hiển thị tuổi.

---

4. Thư viện hỗ trợ sử dụng Template#

Dưới đây là một số thư viện phổ biến dùng để xử lý template trong <script type="text/html">:

4.1. Underscore.js

• Cung cấp cú pháp {%= ... %} và {% ... %}.
• Dễ sử dụng và tích hợp tốt với các ứng dụng JavaScript.

4.2. Handlebars.js

• Cung cấp nhiều tính năng mạnh mẽ như vòng lặp, logic điều kiện, và helper functions.
• Cú pháp rõ ràng, dễ đọc.

4.3. JavaScript thuần

• Bạn có thể tự viết logic thay thế dữ liệu bằng cách sử dụng các hàm xử lý chuỗi như replace().

---

5. Cách sử dụng Template HTML#

5.1. Bước 1: Viết Template

• Template được đặt trong thẻ <script> với type="text/html".
• Ví dụ:

<script id="product-template" type="text/html">
   <li>
       <h3>{%= name %}</h3>
       <p>Giá: {%= price %}</p>
   </li>
</script>

5.2. Bước 2: Lấy nội dung Template

• Dùng JavaScript để lấy nội dung của template:

const template = document.getElementById('product-template').innerHTML;

5.3. Bước 3: Chèn dữ liệu vào Template

• Sử dụng thư viện như Underscore.js:

const compiledTemplate = _.template(template);
const data = { name: 'Sản phẩm 1', price: '100.000 VNĐ' };
const html = compiledTemplate(data);
document.body.innerHTML += html;

• Hoặc sử dụng JavaScript thuần:

const data = { name: 'Sản phẩm 1', price: '100.000 VNĐ' };
const html = template
   .replace(/{%= name %}/g, data.name)
   .replace(/{%= price %}/g, data.price);
document.body.innerHTML += html;

6. Ví dụ thực tế#

Danh sách sản phẩm

<script id="product-template" type="text/html">
   <li>
       <h3>{%= name %}</h3>
       <p>Giá: {%= price %}</p>
   </li>
</script>
<ul id="product-list"></ul>

const products = [
   { name: 'Sản phẩm 1', price: '100.000 VNĐ' },
   { name: 'Sản phẩm 2', price: '200.000 VNĐ' }
];

const template = document.getElementById('product-template').innerHTML;
const productList = document.getElementById('product-list');

products.forEach(product => {
   const html = template
       .replace(/{%= name %}/g, product.name)
       .replace(/{%= price %}/g, product.price);
   productList.innerHTML += html;
});

Kết quả:

<ul id="product-list">
   <li>
       <h3>Sản phẩm 1</h3>
       <p>Giá: 100.000 VNĐ</p>
   </li>
   <li>
       <h3>Sản phẩm 2</h3>
       <p>Giá: 200.000 VNĐ</p>
   </li>
</ul>

7. Cách học hiệu quả#

1. Nắm rõ kiến thức cơ bản về HTML, CSS và JavaScript:
   • Template HTML chỉ hiệu quả khi bạn đã hiểu rõ cách DOM hoạt động và cách JavaScript tương tác với HTML.
2. Bắt đầu với ví dụ đơn giản:
   • Tạo một danh sách tĩnh với các giá trị động, như hiển thị thông tin người dùng hoặc sản phẩm.
3. Thử nghiệm các thư viện phổ biến:
   • Sử dụng Underscore.js hoặc Handlebars.js để thấy sự khác biệt giữa việc xử lý template thủ công và sử dụng thư viện.
4. Thực hành dự án nhỏ:
   • Xây dựng các tính năng như:
     • Quản lý danh sách người dùng.
     • Hiển thị bài viết từ một danh sách JSON.
     • Tạo giao diện bảng dữ liệu động.
5. Tìm hiểu thêm tài liệu và công cụ học tập:
   • Underscore.js Templates
   • Handlebars.js
   • Các video hướng dẫn trên YouTube.

---

8. Kết luận#

Template trong <script type="text/html"></script> là một công cụ mạnh mẽ để xây dựng giao diện động. Việc kết hợp giữa template và JavaScript (hoặc thư viện hỗ trợ) giúp bạn tiết kiệm thời gian và tăng hiệu quả phát triển giao diện web. Hãy bắt đầu từ các ví dụ nhỏ, dần nâng cao kỹ năng với các dự án phức tạp hơn, và bạn sẽ nhanh chóng làm chủ được kỹ thuật này!

II. Các ví dụ về <script type="text/html"></script>#

Dưới đây là một số ví dụ cụ thể và các trường hợp khác nhau sử dụng template trong <script type="text/html"></script>. Những ví dụ này sẽ giúp bạn hiểu rõ hơn cách áp dụng template vào thực tế.

---

1. Hiển thị danh sách sản phẩm#

Trường hợp: Bạn muốn hiển thị danh sách sản phẩm từ một mảng dữ liệu. HTML:

<script id="product-template" type="text/html">
   <div class="product">
       <h3>{%= name %}</h3>
       <p>Giá: {%= price %}</p>
       {% if (stock > 0) { %}
           <p>Tình trạng: Còn hàng</p>
       {% } else { %}
           <p>Tình trạng: Hết hàng</p>
       {% } %}
   </div>
</script>

<div id="product-container"></div>

JavaScript:

const products = [
   { name: 'Sản phẩm A', price: '100.000 VNĐ', stock: 10 },
   { name: 'Sản phẩm B', price: '200.000 VNĐ', stock: 0 }
];

const template = document.getElementById('product-template').innerHTML;
const container = document.getElementById('product-container');

products.forEach(product => {
   let html = template
       .replace(/{%= name %}/g, product.name)
       .replace(/{%= price %}/g, product.price)
       .replace(/{% if \(stock > 0\) { %}.*?{% } else { %}.*?{% } %}/gs, product.stock > 0 ? '<p>Tình trạng: Còn hàng</p>' : '<p>Tình trạng: Hết hàng</p>');
   container.innerHTML += html;
});

2. Tạo danh sách người dùng với hình đại diện#

Trường hợp: Hiển thị danh sách người dùng kèm ảnh đại diện. HTML:

<script id="user-template" type="text/html">
   <div class="user">
       <img src="{%= avatar %}" alt="{%= name %}" class="avatar">
       <h3>{%= name %}</h3>
       <p>Email: {%= email %}</p>
   </div>
</script>

<div id="user-list"></div>

JavaScript:

const users = [
   { name: 'Nguyễn Văn A', email: 'a@example.com', avatar: 'avatar1.jpg' },
   { name: 'Trần Thị B', email: 'b@example.com', avatar: 'avatar2.jpg' }
];

const userTemplate = document.getElementById('user-template').innerHTML;
const userList = document.getElementById('user-list');

users.forEach(user => {
   let html = userTemplate
       .replace(/{%= avatar %}/g, user.avatar)
       .replace(/{%= name %}/g, user.name)
       .replace(/{%= email %}/g, user.email);
   userList.innerHTML += html;
});

3. Hiển thị bảng dữ liệu động#

Trường hợp: Bạn muốn tạo bảng hiển thị danh sách nhân viên với các cột như Tên, Vị trí, và Lương. HTML:

<script id="table-row-template" type="text/html">
   <tr>
       <td>{%= name %}</td>
       <td>{%= position %}</td>
       <td>{%= salary %}</td>
   </tr>
</script>

<table border="1">
   <thead>
       <tr>
           <th>Tên</th>
           <th>Vị trí</th>
           <th>Lương</th>
       </tr>
   </thead>
   <tbody id="employee-table">
   </tbody>
</table>

JavaScript:

const employees = [
   { name: 'Nguyễn Văn A', position: 'Kỹ sư', salary: '15.000.000 VNĐ' },
   { name: 'Trần Thị B', position: 'Quản lý', salary: '25.000.000 VNĐ' }
];

const rowTemplate = document.getElementById('table-row-template').innerHTML;
const tableBody = document.getElementById('employee-table');

employees.forEach(employee => {
   const html = rowTemplate
       .replace(/{%= name %}/g, employee.name)
       .replace(/{%= position %}/g, employee.position)
       .replace(/{%= salary %}/g, employee.salary);
   tableBody.innerHTML += html;
});

4. Hiển thị danh sách bài viết#

Trường hợp: Bạn muốn hiển thị danh sách bài viết với tiêu đề, tóm tắt và liên kết chi tiết. HTML:

<script id="post-template" type="text/html">
   <div class="post">
       <h2><a href="{%= url %}">{%= title %}</a></h2>
       <p>{%= summary %}</p>
   </div>
</script>

<div id="post-container"></div>

JavaScript:

const posts = [
   { title: 'Bài viết 1', summary: 'Tóm tắt bài viết 1...', url: 'post1.html' },
   { title: 'Bài viết 2', summary: 'Tóm tắt bài viết 2...', url: 'post2.html' }
];

const postTemplate = document.getElementById('post-template').innerHTML;
const postContainer = document.getElementById('post-container');

posts.forEach(post => {
   const html = postTemplate
       .replace(/{%= title %}/g, post.title)
       .replace(/{%= summary %}/g, post.summary)
       .replace(/{%= url %}/g, post.url);
   postContainer.innerHTML += html;
});

5. Tạo danh sách nhiệm vụ với trạng thái#

Trường hợp: Quản lý danh sách công việc với trạng thái (Đã hoàn thành hoặc Chưa hoàn thành). HTML:

<script id="task-template" type="text/html">
   <div class="task">
       <h4>{%= taskName %}</h4>
       <p>Trạng thái: 
           {% if (completed) { %}
               <span class="completed">Đã hoàn thành</span>
           {% } else { %}
               <span class="not-completed">Chưa hoàn thành</span>
           {% } %}
       </p>
   </div>
</script>

<div id="task-container"></div>

JavaScript:

const tasks = [
   { taskName: 'Làm bài tập', completed: true },
   { taskName: 'Dọn dẹp nhà cửa', completed: false }
];

const taskTemplate = document.getElementById('task-template').innerHTML;
const taskContainer = document.getElementById('task-container');

tasks.forEach(task => {
   let html = taskTemplate
       .replace(/{%= taskName %}/g, task.taskName)
       .replace(/{% if \(completed\) { %}.*?{% } else { %}.*?{% } %}/gs, 
                task.completed ? '<span class="completed">Đã hoàn thành</span>' : '<span class="not-completed">Chưa hoàn thành</span>');
   taskContainer.innerHTML += html;
});

6. Tạo dropdown menu động#

Trường hợp: Tạo danh sách các lựa chọn (dropdown) dựa trên dữ liệu từ server. HTML:

<script id="dropdown-template" type="text/html">
   <option value="{%= value %}">{%= label %}</option>
</script>

<select id="dropdown"></select>

JavaScript:

const options = [
   { value: '1', label: 'Lựa chọn 1' },
   { value: '2', label: 'Lựa chọn 2' },
   { value: '3', label: 'Lựa chọn 3' }
];

const dropdownTemplate = document.getElementById('dropdown-template').innerHTML;
const dropdown = document.getElementById('dropdown');

options.forEach(option => {
   const html = dropdownTemplate
       .replace(/{%= value %}/g, option.value)
       .replace(/{%= label %}/g, option.label);
   dropdown.innerHTML += html;
});

Tổng kết#

• Mỗi ví dụ trên ứng dụng template trong các tình huống khác nhau.
• Bạn có thể dễ dàng mở rộng và kết hợp với API hoặc cơ sở dữ liệu để hiển thị nội dung động.
• Luyện tập với các trường hợp thực tế sẽ giúp bạn làm chủ cách sử dụng <script type="text/html"> trong các dự án web.

III. HTML Template Tag: Tìm Hiểu và Ứng Dụng#

1. Giới Thiệu HTML Template Tag#

Thẻ <template> trong HTML là một thành phần mạnh mẽ được thiết kế để lưu trữ nội dung HTML mà không được hiển thị hoặc thực thi trực tiếp khi trang web được tải. Nó cho phép bạn chuẩn bị trước các đoạn mã HTML để sử dụng lại trong tương lai, thường được thao tác bởi JavaScript. Cú pháp cơ bản:

<template id="template-id">
   <!-- Nội dung HTML ở đây -->
</template>

Nội dung bên trong thẻ <template>:

• Không được hiển thị trên giao diện người dùng.
• Không được thực thi bởi trình duyệt (ví dụ, JavaScript hoặc CSS bên trong sẽ không chạy).
• Được sử dụng để sao chép và chèn vào Document Object Model (DOM) bằng JavaScript.

2. Cách Hoạt Động Của HTML Template#

Khi sử dụng, bạn có thể truy cập nội dung của <template> thông qua thuộc tính .content. Thuộc tính này chứa một bản sao của nội dung HTML bên trong thẻ <template>. Sau đó, bạn có thể chỉnh sửa hoặc nhân bản nội dung đó để chèn vào DOM. Ví dụ cơ bản:

<template id="my-template">
   <div class="card">
       <h2>{title}</h2>
       <p>{description}</p>
   </div>
</template>

<div id="container"></div>

<script>
   // Lấy thẻ template
   const template = document.getElementById('my-template');
   const container = document.getElementById('container');

   // Tạo bản sao nội dung
   const clone = template.content.cloneNode(true);

   // Chèn vào DOM
   container.appendChild(clone);
</script>

3. Tại Sao Nên Dùng HTML Template?#

Lợi ích chính:

1. Tái sử dụng nội dung: Bạn có thể chuẩn bị sẵn nội dung HTML phức tạp và sử dụng nhiều lần trong trang web.
2. Hiệu suất tốt hơn: Thay vì tạo nội dung từ đầu mỗi lần, bạn chỉ cần sao chép nội dung từ template.
3. An toàn: Nội dung bên trong thẻ <template> không được thực thi, giúp bạn quản lý các đoạn mã nhạy cảm một cách an toàn.
4. Dễ bảo trì: Nội dung được tách biệt rõ ràng, dễ chỉnh sửa và mở rộng.

4. Ứng Dụng Của HTML Template#

4.1. Tạo danh sách động

Bạn có thể dùng <template> để hiển thị danh sách người dùng hoặc sản phẩm một cách động. HTML:

<template id="user-template">
   <div class="user">
       <h3>{name}</h3>
       <p>Email: {email}</p>
   </div>
</template>

<div id="user-container"></div>

JavaScript:

const users = [
   { name: 'Nguyễn Văn A', email: 'a@example.com' },
   { name: 'Trần Thị B', email: 'b@example.com' }
];

const template = document.getElementById('user-template');
const container = document.getElementById('user-container');

users.forEach(user => {
   const clone = template.content.cloneNode(true);

   clone.querySelector('h3').textContent = user.name;
   clone.querySelector('p').textContent = `Email: ${user.email}`;

   container.appendChild(clone);
});

4.2. Hiển thị thẻ bài viết#

Bạn có thể sử dụng <template> để hiển thị danh sách bài viết hoặc thẻ bài. HTML:

<template id="post-template">
   <div class="post">
       <h2>{title}</h2>
       <p>{content}</p>
   </div>
</template>

<div id="post-container"></div>

JavaScript:

const posts = [
   { title: 'Bài viết 1', content: 'Nội dung bài viết 1...' },
   { title: 'Bài viết 2', content: 'Nội dung bài viết 2...' }
];

const postTemplate = document.getElementById('post-template');
const postContainer = document.getElementById('post-container');

posts.forEach(post => {
   const clone = postTemplate.content.cloneNode(true);

   clone.querySelector('h2').textContent = post.title;
   clone.querySelector('p').textContent = post.content;

   postContainer.appendChild(clone);
});

4.3. Dropdown Menu Tự Động#

Bạn có thể tạo danh sách các tùy chọn (dropdown menu) dựa trên dữ liệu từ server. HTML:

<template id="option-template">
   <option value="{value}">{label}</option>
</template>

<select id="dropdown"></select>

JavaScript:

const options = [
   { value: '1', label: 'Lựa chọn 1' },
   { value: '2', label: 'Lựa chọn 2' },
   { value: '3', label: 'Lựa chọn 3' }
];

const optionTemplate = document.getElementById('option-template');
const dropdown = document.getElementById('dropdown');

options.forEach(option => {
   const clone = optionTemplate.content.cloneNode(true);

   clone.querySelector('option').value = option.value;
   clone.querySelector('option').textContent = option.label;

   dropdown.appendChild(clone);
});

5. Lưu Ý Khi Sử Dụng <template>#

1. Không hiển thị trực tiếp: Nội dung bên trong thẻ <template> sẽ không xuất hiện trên trang web. Bạn phải sử dụng JavaScript để thao tác với nội dung.
2. Không thực thi:
   • JavaScript hoặc CSS bên trong template sẽ không chạy.
   • Điều này giúp template an toàn hơn để lưu trữ mã mẫu.
3. Tương thích trình duyệt: Hầu hết các trình duyệt hiện đại đều hỗ trợ <template>. Tuy nhiên, nếu bạn phải hỗ trợ trình duyệt cũ, hãy kiểm tra khả năng tương thích.

6. Khi Nào Nên Dùng <template>?#

• Khi bạn cần tạo nội dung HTML động mà không muốn viết lại mã từ đầu mỗi lần.
• Khi bạn muốn cải thiện hiệu suất và bảo trì mã nguồn.
• Khi bạn cần lưu trữ các đoạn HTML mẫu để sử dụng lại nhiều lần trong ứng dụng.

Tổng Kết#

Thẻ <template> là một công cụ mạnh mẽ giúp lập trình viên HTML và JavaScript dễ dàng tạo giao diện động. Với khả năng lưu trữ và nhân bản nội dung, nó giúp giảm thiểu mã lặp, tăng hiệu suất và đảm bảo tính linh hoạt trong việc phát triển giao diện web. Hãy thực hành các ví dụ trên để nắm vững cách sử dụng và tối ưu hóa <template> trong các dự án của bạn!

IV. So Sánh HTML Template Tag và <script type="text/html"></script>#

Khi xây dựng các ứng dụng web động, lập trình viên thường cần lưu trữ các mẫu HTML (template) để tạo giao diện một cách linh hoạt. Hai phương pháp phổ biến là sử dụng HTML Template Tag (<template>) và <script> với type="text/html"`. Tuy nhiên, chúng có sự khác biệt về cách hoạt động, tính năng, và trường hợp sử dụng.

1. HTML Template Tag#

Định nghĩa

<template> là một thành phần HTML chính thức, được thiết kế đặc biệt để lưu trữ các mẫu HTML mà không được hiển thị trực tiếp hoặc thực thi ngay khi trang web tải. Cách hoạt động:

• Nội dung trong <template> không được hiển thị trên giao diện người dùng.
• Nội dung này cũng không được trình duyệt thực thi cho đến khi bạn sao chép và gắn nó vào DOM bằng JavaScript.

Ví dụ:

<template id="example-template">
   <div class="card">
       <h2>{title}</h2>
       <p>{description}</p>
   </div>
</template>
<script>
   const template = document.getElementById('example-template');
   const clone = template.content.cloneNode(true);
   document.body.appendChild(clone);
</script>

2. Thẻ <script> với type="text/html"#

Định nghĩa

Thẻ <script> có thuộc tính type="text/html" thường được sử dụng để lưu trữ mẫu HTML theo cách tùy chỉnh. Đây là một giải pháp không chuẩn, phổ biến trong các thư viện hoặc framework cũ. Cách hoạt động:

• Nội dung bên trong thẻ <script> không được thực thi bởi trình duyệt.
• Bạn cần sử dụng JavaScript hoặc thư viện (như Underscore.js, Handlebars.js) để trích xuất và xử lý nội dung mẫu này.

Ví dụ:

<script type="text/html" id="example-template">
   <div class="card">
       <h2>{title}</h2>
       <p>{description}</p>
   </div>
</script>
<script>
   const template = document.getElementById('example-template').innerHTML;
   const compiledHTML = template.replace('{title}', 'Sample Title').replace('{description}', 'This is a description');
   document.body.innerHTML += compiledHTML;
</script>

---

3. So Sánh Chi Tiết#

---

4. Khi Nào Nên Dùng Gì?#

Sử dụng <template>:

• Khi bạn muốn tuân theo chuẩn HTML.
• Khi dự án sử dụng JavaScript hiện đại hoặc không cần thư viện template.
• Khi cần quản lý các đoạn HTML phức tạp và tối ưu hiệu suất.

Ví dụ:

<template id="user-template">
   <div>
       <h2>{name}</h2>
       <p>{email}</p>
   </div>
</template>

Dễ dàng sao chép:

const template = document.getElementById('user-template');
const user = template.content.cloneNode(true);
user.querySelector('h2').textContent = 'John Doe';
document.body.appendChild(user);

Sử dụng <script type="text/html">:#

• Khi bạn cần tích hợp với các thư viện cũ như Underscore.js, Handlebars.js hoặc các framework không hỗ trợ <template>.
• Khi bạn muốn tạo template tùy chỉnh với cú pháp đặc biệt (ví dụ {%= ... %}).

Ví dụ:

<script type="text/html" id="product-template">
   <div>
       <h3>{%= name %}</h3>
       <p>Price: {%= price %}</p>
   </div>
</script>

Xử lý bằng thư viện:

const template = document.getElementById('product-template').innerHTML;
const compiledHTML = template.replace('{%= name %}', 'Laptop').replace('{%= price %}', '$1000');
document.body.innerHTML += compiledHTML;

5. Ưu Điểm và Nhược Điểm#

HTML Template Tag

Ưu điểm:

• Chuẩn HTML, dễ hiểu, và hỗ trợ trình duyệt hiện đại.
• Tích hợp tốt với JavaScript thuần.
• Không cần xử lý chuỗi phức tạp.

Nhược điểm:

• Không tương thích với các trình duyệt cũ (Internet Explorer trước IE 11).
• Không có cú pháp tùy chỉnh (ví dụ {%= ... %}), cần xử lý thủ công.

Thẻ <script> với type="text/html"

Ưu điểm:

• Linh hoạt hơn với cú pháp tùy chỉnh.
• Phù hợp cho các dự án sử dụng thư viện cũ.
• Tương thích với các trình duyệt cũ.

Nhược điểm:

• Không phải chuẩn HTML, kém tối ưu hóa.
• Cần viết thêm mã JavaScript để xử lý chuỗi, gây rối và khó bảo trì.

6. Tổng Kết#

Hãy lựa chọn phương pháp phù hợp với nhu cầu và đặc thù dự án của bạn!