🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Tại Cafedev, chúng tôi sẽ hướng dẫn bạn từ cơ bản đến nâng cao về phần tử Template trong JavaScript. Phần tử Template cung cấp một cách mạnh mẽ để lưu trữ và sử dụng mã HTML mà không cần hiển thị ngay lập tức trên trang. Bằng cách sử dụng các kỹ thuật này, bạn có thể dễ dàng tái sử dụng mã HTML, giúp tổ chức và quản lý nội dung của ứng dụng web của bạn hiệu quả hơn. Hãy cùng Cafedev khám phá các tính năng và ứng dụng của phần tử Template trong bài viết này.

Phần tử Template

Một phần tử <template> tích hợp sẵn phục vụ như một kho lưu trữ cho các mẫu mã HTML. Trình duyệt bỏ qua nội dung bên trong, chỉ kiểm tra tính hợp lệ của cú pháp, nhưng chúng ta có thể truy cập và sử dụng nó trong JavaScript để tạo các phần tử khác.

Về lý thuyết, chúng ta có thể tạo bất kỳ phần tử nào không hiển thị ở đâu đó trong HTML để lưu trữ mã HTML. Vậy điều gì đặc biệt về <template>?

Đầu tiên, nội dung của <template> có thể là bất kỳ mã HTML hợp lệ nào, ngay cả khi thông thường nó yêu cầu một thẻ bao bọc đúng cách.

Ví dụ, chúng ta có thể đặt một hàng bảng <tr> vào đó:

<template>
  <tr>
    <td>Contents</td>
  </tr>
</template>

Thông thường, nếu chúng ta cố đặt <tr> bên trong, chẳng hạn như một <div>, trình duyệt sẽ phát hiện cấu trúc DOM không hợp lệ và “sửa” nó bằng cách thêm thẻ <table> bao quanh. Đó không phải là điều chúng ta mong muốn. Ngược lại, <template> giữ nguyên chính xác những gì chúng ta đặt vào đó.

Chúng ta cũng có thể đặt các thẻ style và script vào bên trong <template>

<template>
  <style>
    p { font-weight: bold; }
  </style>
  <script>
    alert("Hello");
  </script>
</template>

Trình duyệt coi nội dung của thẻ <template> là “ngoài tài liệu”: các kiểu (styles) không được áp dụng, các đoạn mã (scripts) không được thực thi, thẻ <video autoplay> không chạy, v.v.

Nội dung chỉ trở nên “sống” (các kiểu được áp dụng, mã chạy, v.v.) khi chúng ta chèn nó vào tài liệu.

1. Chèn template

Nội dung của template có sẵn trong thuộc tính content của nó dưới dạng DocumentFragment — một loại nút DOM đặc biệt.
Chúng ta có thể xử lý nó như bất kỳ nút DOM nào khác, ngoại trừ một thuộc tính đặc biệt: khi chúng ta chèn nó ở đâu đó, các phần tử con của nó sẽ được chèn thay vào đó.

Ví dụ:

<template id="tmpl">
  <script>
    alert("Hello");
  </script>
  <div class="message">Hello, world!</div>
</template>

<script>
  let elem = document.createElement('div');

  // Clone the template content to reuse it multiple times
  elem.append(tmpl.content.cloneNode(true));

  document.body.append(elem);
  // Now the script from <template> runs
</script>

Hãy viết lại ví dụ về Shadow DOM từ chương trước bằng cách sử dụng thẻ <template>:

<template id="tmpl">
  <style> p { font-weight: bold; } </style>
  <p id="message"></p>
</template>

<div id="elem">Click me</div>

<script>
  elem.onclick = function() {
    elem.attachShadow({mode: 'open'});

    elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*)

    elem.shadowRoot.getElementById('message').innerHTML = "Hello from the shadows!";
  };
</script>

Trong dòng (*) khi chúng ta sao chép và chèn tmpl.content, vì đó là một DocumentFragment, nên các phần tử con của nó (<style>, <p>) được chèn thay thế.

Chúng sẽ tạo thành Shadow DOM:

<div id="elem">
  #shadow-root
    <style> p { font-weight: bold; } </style>
    <p id="message"></p>
</div>

2. Tóm tắt

Để tóm tắt:

  • Nội dung của thẻ <template> có thể là bất kỳ HTML hợp lệ nào về mặt cú pháp.
  • Nội dung của thẻ <template> được coi là “ngoài tài liệu”, vì vậy nó không ảnh hưởng đến bất kỳ thứ gì.
  • Chúng ta có thể truy cập template.content từ JavaScript, sao chép nó để tái sử dụng trong một thành phần mới.

Thẻ <template> khá độc đáo vì:

  • Trình duyệt kiểm tra cú pháp HTML bên trong nó (khác với việc sử dụng chuỗi mẫu bên trong một thẻ <script>).
  • …Nhưng vẫn cho phép sử dụng bất kỳ thẻ HTML cấp cao nào, ngay cả những thẻ không hợp lý nếu không có thẻ bao bọc thích hợp (ví dụ: <tr>).
  • Nội dung trở nên tương tác: các đoạn mã được thực thi, thẻ <video autoplay> được phát, v.v. khi được chèn vào tài liệu.

Thẻ <template> không có các cơ chế lặp, ràng buộc dữ liệu hoặc thay thế biến, nhưng chúng ta có thể thực hiện những điều đó trên nền tảng của nó.

Tại Cafedev, chúng tôi đã cùng bạn khám phá cách sử dụng phần tử Template để tối ưu hóa và tổ chức mã HTML trong dự án JavaScript của bạn. Với khả năng lưu trữ nội dung HTML và tái sử dụng hiệu quả, phần tử Template là công cụ hữu ích để cải thiện chất lượng và khả năng bảo trì mã nguồn. Chúng tôi hy vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để áp dụng phần tử Template một cách hiệu quả trong các ứng dụng của mình.

Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Javascrypt chi tiết, dễ hiểu từ cơ bản tới nâng cao + Full Bài Tập thực hành nâng cao trình dev

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM