Phát triển frontend với JADE (phần 1)

Jade là một template engine cho Node.js, nó khá đơn giản và biên dịch thành HTML và cực kì hữu ích cho FE developer

alt text
http://jade-lang.com/

Lấy cảm hứng từ HAML (một template engine cho Ruby on Rails),Jade ban đầu thiết kế ra chủ yếu để làm template engine phía server cho Node.js nhưng nó cũng có thể sử dụng để gõ XML,RSS và cũng triển khai được với php ,ruby, python, java..

JADE giúp chúng ta tạo ra những đoạn code HTML nhanh hơn, sạch hơn ,DRY hơn

Trong phần đầu này mình sẽ hướng dẫn cách cài đặt và các cú pháp đơn giản của jade.

Cài đặt

Có nhiều cách để cài đặt môi trường để code Jade , ở đây tôi dùng command line (hãy chắc rằng bạn đã cài NodeJS)
Nếu không thích thì bạn có thể thay thế bằng code editor như codepen hay các editor khác tương tự

npm install jade -g

Tạo một file jade với nội dung : "h1 Hello Jade" bằng lệnh

echo "h1 Hello Jade" > hello.jade

Biên dịch nó

jade hello.jade
rendered hello.html

Xem nội dung của file hello.html

cat hello.html
<h1>Hello Jade</h1>

Tóm lại là Jade sẽ đóng vai trò như một HTML processor vì cuối cùng nó cũng sẽ vẫn render ra html

Jade hoạt động như thế nào ?

Nó sẽ biên dịch các templates dạng Jade sang js và sau đó trả lại HTML như sơ đồ bên dưới
alt text

Cú pháp cơ bản

Tags

Mặc định, text ở đầu dòng (hoặc sau khi chỉ có khoảng trắng) đại diện cho một thẻ html. Các thẻ thụt vào được lồng nhau, tạo ra những cây giống như cấu trúc của html.

Text ở trên một dòng

bạn có thể thêm một đoạn text ở sau thẻ được phân cách bởi một dấu space

p Hello Word!

HTML:

<p> Hello World </p>

Khối text

Với số lượng text nhiều thì để trên một dòng thật khó nhìn, cho nên ta có thể thêm dấu "|" (pipe) cho nó dễ nhìn

p
   |This is a demonstration
   |of Jade's text blocks

HTML:

<p>This is a demonstration of Jade's text blocks</p>

ta cũng có thể viết ngắn lại bằng cách thêm dấu "." ngay sau tag và nó cũng render ra html tương tự

p.
   This is a demonstration of Jade's text blocks

Các tag lồng nhau (nesting)

Thay vì sử dụng các thẻ đóng mở để thể hiện sự bắt đầu kết thúc của một khối thì chúng ta sử dụng khoảng trắng (tab hoặc nút space)

.container
   p Hello World

HTML:

<div class="container">
    <p>Hello World</p>
</div>

Chú ý là khoảng thụt giữa các tag phải đồng đều nhau thống nhất dùng tab hoặc dùng nút space không thì nó sẽ biên dịch lỗi

Inline html

Ta cũng có thể thêm inline html vào khối text

p.
    This is a <b>demonstration</b> of Jade's text blocks

HTML:

<p>This is a <b>demonstration</b> of Jade's text blocks</p>

Attributes (các thuộc tính)

Các thuộc tính hay được dùng nhất là class,id

p(id="hello") Hello Word!

HTML:

<p id="hello">Hello World</p>

Có thể có nhiều thuộc tính, ở đây mình sẽ có id,class và một thuộc tính là site

p(id="hello", class="world", site="kipalog") Hello World

HTML:

<p id="hello" class="world" site="kipalog">Hello World</p>

Xem các object như thuộc tính
Ví dụ chúng ta có thể xem một mảng danh sách các class được hiểu như multiple class

p(class=['first-class','another-class', 'last-class'])

HTML:

<p class="first-class another-class last-class"></p>

Có thể như một đối tượng json

p(data-myattr={numbers: [2,4, 8], string: 'this is a string'})

HTML:

<p data-myattr={numbers: [2,4, 8], string: 'this is a string'}></p>

Viết tắt

Nếu ai đã dùng emmet thì cũng sẽ thấy nó tương tự

#hello

HTML:

<div id="hello"></div>

#hello.world

HTML:

<div id="hello" class="world">

Comment

Single line comment

Cú pháp comment giống css, javascript

//a single line comment
HTML:
<!-- a single line comment-->

Nhưng nếu không chúng ta không muốn đoạn comment này xuất hiện khi render html thì thêm dấu "-" ngay sau "//"

//- a silent single line comment

Block comments

Cú pháp tương tự single comment ,tuy nhiên nên đặt dấu "//" thụt ra block cần comment để cho nó nhận biết được khối cần comment

//
    h1 Now I'm Commented Out.
    p And me too.

Tương tự ,nếu không muốn comment xuất hiện chỉ cần thêm "-" ngay sau "//"

//-
    h1 Now I'm Commented Out.
    p And me too.

Khối mở rộng (Block Expansion)

Ta có một list như sau

ul
  li.first
    a(href='#') foo
  li
    a(href='#') bar
  li.last
    a(href='#') baz

Chúng ta có thể thêm dấu ":" sau mỗi thẻ li để nó ít khoảng trắng, viết lại như sau

ul
  li.first: a(href='#') foo
  li: a(href='#') bar
  li.last: a(href='#') baz

Tiết kiệm được chút khoảng trắng nhưng nhìn hơi khó, cho nên không cần thiết thì cũng không cần sử dụng cái này :D

Doctype

Ngoài doctype html5 hay dùng thì còn có xml, framset, strict, mobile xem thêm ở đây http://jade-lang.com/reference/doctype/

doctype html

HTML:

<!DOCTYPE html>

Bài viết có tham khảo và lược dịch từ cuốn Web developent with Jade của Sean Lang

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

thanh0beo

2 bài viết.
5 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
26 15
Qua rồi những lúc bạn phải bắt đầu dự án webapp mới với việc phải cài đặt, quản lý các dependency, các thư viện , rồi thực hiện các thao tác như né...
thanh0beo viết 3 năm trước
26 15
Bài viết liên quan
White
32 6
Mình có một anh bạn người Pháp tên là Aurelien, anh này có một biệt tài đó là convert được màu RGB sang mã Hex chỉ bằng cách tính nhẩm. Phương phá...
Huy Trần viết 1 năm trước
32 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
5 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!