EJS (Embedded JavaScript) là gì? Khám phá template engine quốc dân cho ứng dụng Node.js
Chào anh em!
Khi làm việc với Node.js và xây dựng các trang web theo mô hình Server-Side Rendering (SSR) truyền thống, chắc hẳn anh em sẽ đặt câu hỏi: "Làm thế nào để nhúng các biến dữ liệu từ Backend (Node.js/Express) ra giao diện HTML một cách mượt mà thay vì phải trả về các chuỗi HTML cứng nhắc?"
Câu trả lời chính là sử dụng các Template Engine (Công nghệ tạo khuôn mẫu giao diện). Và một trong những template engine phổ biến, dễ học và được sử dụng nhiều nhất trong hệ sinh thái Node.js chính là EJS. Hôm nay, hãy cùng mổ xẻ xem EJS là gì và tại sao nó lại được lòng cộng đồng lập trình viên đến vậy nhé!
1. EJS (Embedded JavaScript) thực chất là gì?
- Định nghĩa: EJS (viết tắt của Embedded JavaScript templates) là một template engine cho phép bạn tạo ra các trang HTML bằng cách sử dụng ngôn ngữ JavaScript thuần túy.
- Cơ chế hoạt động: Nó hoạt động dựa trên nguyên tắc: cho phép bạn nhúng trực tiếp các thẻ logic của JavaScript (như vòng lặp
for, câu lệnh điều kiệnif, hoặc biến số) vào bên trong các file HTML (có phần mở rộng là.ejs). Khi server render trang web, EJS sẽ biên dịch các đoạn mã JavaScript đó thành các chuỗi HTML hoàn chỉnh rồi gửi về cho trình duyệt của người dùng.
2. Cú pháp cơ bản của EJS "nhìn là hiểu ngay"
EJS sử dụng các thẻ tag cực kỳ đơn giản và trực quan để phân tách giữa HTML và JavaScript:
<%: Thẻ thực thi mã lệnh JavaScript (dùng để viết vòng lặp, điều kiện, gán biến nhưng không in ra màn hình).<%=: Thẻ in giá trị ra màn hình (có thực hiện cơ chế mã hóa HTML để chống tấn công XSS, cực kỳ an toàn).<%-: Thẻ in giá trị thô ra màn hình (không mã hóa, thường dùng để nhúng một file HTML hoặc template con khác vào).<%#: Thẻ chú thích (Comment), sẽ bị ẩn đi khi render.
Ví dụ thực tế:
Giả sử bạn truyền một danh sách sản phẩm từ ExpressJS sang file index.ejs:
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Danh sách sản phẩm</title>
</head>
<body>
<h1>Xin chào, <%= username %>!</h1>
<ul>
<% products.forEach(function(item) { %>
<li><%= item.name %> - Giá: <%= item.price %> VNĐ</li>
<% }); %>
</ul>
</body>
</html>
Nhìn đoạn code trên, bạn có thấy nó quen thuộc không? Nó y hệt như cấu trúc HTML thông thường, chỉ khác là chúng ta dùng cú pháp <%= %> để hiển thị dữ liệu động từ Backend một cách cực kỳ gọn gàng!
3. Những ưu điểm vượt trội giúp EJS được ưa chuộng
- Cực kỳ dễ học (Zero Learning Curve): Nếu bạn đã biết cơ bản về HTML và JavaScript, bạn chỉ mất vỏn vẹn 10 phút để làm chủ EJS mà không cần phải học thêm một cú pháp phức tạp nào khác (như cú pháp của Pug/Jade hay Handlebars).
- Tính năng Partial (Layouts / Tái sử dụng giao diện): Trong một website, các phần như Thanh điều hướng (Navbar) hay Chân trang (Footer) thường lặp đi lặp lại ở mọi trang. EJS cho phép bạn tách chúng ra thành các file nhỏ (partials) và gọi lại bằng một dòng lệnh đơn giản:
<%- include('partials/header') %>
- Toàn bộ sức mạnh của JavaScript trong tầm tay: Vì sử dụng trực tiếp JavaScript bên trong template, bạn có thể thoải mái dùng các hàm xử lý mảng (
map,filter,forEach), điều kiệnif/elsemà không bị gò bó bởi các câu lệnh điều kiện riêng biệt của template engine khác.
Lời kết
EJS là một công cụ vỡ lòng nhưng vô cùng mạnh mẽ cho bất kỳ lập trình viên nào muốn bước chân vào thế giới phát triển web full-stack với Node.js và Express. Nó giúp code của bạn gọn gàng, tách biệt rõ ràng giữa phần logic xử lý và phần hiển thị giao diện, sẵn sàng cho mọi dự án từ nhỏ đến lớn!
All rights reserved
