メインコンテンツまでスキップ

EJS

EJS là gì?​

EJS, viết tắt của Embedded JavaScript, là một ngôn ngữ mẫu (templating language) đơn giản được sử dụng trong phát triển ứng dụng web. Nó cho phép bạn tạo nội dung HTML động bằng cách nhúng mã JavaScript vào các HTML template của bạn. EJS được thiết kế để đơn giản hóa quá trình hiển thị nội dung động trong các ứng dụng web bằng cách cho phép bạn kết hợp HTML và JavaScript một cách liền mạch.

Vì sao sử dụng EJS?​

  • Cú pháp đơn giản và gần gũi: Mã EJS được nhúng trực tiếp vào các tệp HTML, làm cho cú pháp rất gần gũi và dễ đọc. Điều này giúp dev dễ dàng mã hóa HTML và JavaScript.

  • Sub-template includes: EJS cho phép bạn tạo các sub-template có thể tái sử dụng và có thể include nó vào nhiều trang. Điều này giúp header, footer hoặc các components khác nhất quán trên trang web của bạn và liên kết các file template một cách linh hoạt.

  • Cấu trúc hoàn thiện: EJS hỗ trợ cấu trúc như vòng lặp, câu lệnh điều kiện... giúp bạn có thể tạo ra các trang web phức tạp và linh hoạt.

  • Tốc độ thực thi và render nhanh chóng: EJS lưu trữ (cache) các hàm JS trung gian để tăng tốc độ thực thi.

  • Dễ dàng gỡ lỗi (debug): Gỡ lỗi trong EJS khá dễ dàng, đó thường là các JavaScript exceptions đơn giản, có bao gồm cả số dòng (line numbers) bị lỗi trong template.

  • Tương thích với nhiều trình duyệt: Mã EJS được tạo ra dưới dạng mã HTML chuẩn, do đó nó tương thích với hầu hết các trình duyệt web phổ biến.

Các thẻ EJS​

Các thẻ mở​

<%: thẻ Scriptlet, để điều khiển flow, thực thi câu lệnh, không có output.
<%_: thẻ Scriptlet ‘Whitespace Slurping’, xóa tất cả khoảng trắng trước nó.
<%=: xuất ra giá trị đã html escaped.
<%-: xuất ra giá trị chưa html escaped (có thể bao gồm thẻ html).
<%#: thẻ chú thích (comment), không thực thi, không có output

Các thẻ đóng​

%>: thẻ đóng cơ bản
-%>: thẻ trim-mode ('newline slurp'), xóa dòng mới sau nó.
_%>: thẻ đóng ‘Whitespace Slurping’, xóa tất cả khoảng trắng sau nó.

Các thẻ Literal​

<%%: xuất ra ký tự <%
%%>: xuất ra ký tự %>

Định dạng cơ bản​

Thẻ EJS là đơn vị chức năng chính trong EJS template. Ngoại trừ các thẻ Literal, tất cả các thẻ được tạo theo định dạng sau:

<thẻ_mở nội_dung thẻ_đóng>

Cách sử dụng EJS​

Khai báo biến​

Khai báo biến giống như trong Javascript và nằm trong cặp thẻ <% %>.
Ví dụ: Khai báo biến numberOfStudent có giá trị ban đầu là 5.

<% var numberOfStudent = 5; %>

In giá trị biến​

Để in giá trị của một biến, bạn sử dụng cặp thẻ <%= %>
Ví dụ: Nếu bạn có biến username, bạn có thể in giá trị của nó ra như sau:

<p>Username: <%= username %></p>

Câu lệnh điều kiện​

Bạn có thể sử dụng các câu lệnh điều kiện để kiểm tra và hiển thị nội dung dựa trên điều kiện, sử dụng cặp thẻ <% %>
Ví dụ: Kiểm tra nếu biến isAdmin bằng true thì hiển thị thông báo “You Are Admin”, ngược lại thì hiển thị thông báo “You Are Not Admin”.

<% if (isAdmin) { %>
  <p>You Are Admin</p>
<% } else { %>
  <p>You Are Not Admin</p>
<% } %>

Vòng lặp​

Bạn có thể sử dụng vòng lặp để lặp qua danh sách và hiển thị nhiều phần tử, sử dụng cặp thẻ <% %>

Vòng lặp For​

Ví dụ:

JSON
{
  "users": [
    {
      "name": "Timothy",
      "age":  15
    }, 
    {
      "name": "Juan", 
      "age":  51
    }
  ]
}
EJS
<ul>
  <% for (var i = 0; i < users.length; i++) { 
    var user = users[i];
  %>
    <li><%= user.name %></li>
  <% } %>
</ul>
HTML
<ul>
  <li>Timothy</li>
  <li>Juan</li>
</ul>

Vòng lặp forEach​

EJS
<ul>
  <% users.forEach(user => { %>
    <li><%= user.name %></li>
  <% }); %>
</ul>

Include​

Bạn có thể include template con vào template chính với cú pháp:

<%- include('path_to_file/filename', [arguments]); -%>

Nếu file được chỉ định không có phần mở rộng, .ejs sẽ tự động được thêm vào. Nếu không có đường dẫn đến file được include, tệp đó sẽ được coi là nằm cùng thư mục với template gốc.

EJS có thể truyền dữ liệu tới một template bằng cách cung cấp một đối tượng làm đối số thứ hai cho hàm render.

Ví dụ:

header.ejs
<p>This is the header of the page.</p>
footer.ejs
<p>This is the footer of the page.</p>
<p><%= (typeof copyright != "undefined" ? copyright : "Copyright &copy; 2023") %></p>
index.ejs
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <%- include('header'); -%>

  {{ content }}

  <%- include('footer', {copyright: "Copyright &copy; 2024"}); -%>
</body>
</html>

Comment​

Nếu muốn thêm một đoạn comment vào EJS, hãy dùng cặp thẻ <%# %> hoặc <%# -%>. Comment sẽ không được thực thi hoặc hiển thị trong HTML được xuất ra.

Việc sử dụng <%# có thể tạo ra một số khoảng trắng thừa, như được minh họa trong ví dụ bên dưới. Bạn có thể xóa nó bằng thẻ đóng -%>.

Ngoài ra, bạn cũng có thể dùng comment theo cú pháp của Javascript /* */ hoặc //.

EJS
<div>
<%# comment %>
</div>

<div>
<%# comment -%>
</div>
<% /* endcomment */ %>
HTML
<div>

</div>

<div>
</div>

Thẻ Literal​

So với các thẻ khác, thẻ Literal rất đặc biệt vì chúng không cần thẻ đóng để hoạt động.
Tuy nhiên, hãy cẩn thận khi sử dụng các thẻ này vì các ký tự < và > có thể cần được viết dưới dạng &lt; và &gt;.

Ví dụ:

EJS
<pre>This is literal: <%%</pre>
<pre>This is literal too: <%% %></pre>
<pre>This is literal as well: %%></pre>
HTML
<pre>This is literal: <%</pre>
<pre>This is literal too: <% %></pre>
<pre>This is literal as well: %></pre>

Version​

Bạn có thể xem tất cả các version của EJS ở đây

Tham khảo​