0

Với JADE/PUG, Công việc cắt HTML trở nên nhanh hơn – Phần 2

Chào mọi người, ở phần trước – Với JADE/PUG, Công việc cắt HTML trở nên nhanh hơn – Phần 1, mình đã giới thiệu sơ lượt về JADE/PUG, những cú pháp đơn giản để có thể cắt HTML với JADE/PUG. thì mình cũng xin gói gọn lại những ưu điểm mà JADE/PUG mang lại:

  1. Template engine cực kỳ mạnh.
  2. Giản lược cách viết các thẻ HTML, không sợ mở thẻ ở chỗ này mà quên đóng thẻ ở chỗ khác.
  3. Có thể kế thừa và tái sử dụng (không phải copy/paste).
  4. Vì mang tính kế thừa, nên sửa một chỗ, có thể cập nhật ở những chỗ khác mà không sợ thiếu sót.
  5. Điều quan trong cuối cùng là JADE/PUG thông minh hơn HTML.

Nói đúng hơn là ở phần 1, chúng ta chỉ giải quyết được mục số 2 của danh sách trên, ở phần 2 này mình sẽ giới thiệu những cú pháp khác có thể cover được tầm 80% những mục còn lại, còn 20% là tư duy thiết kế kiến trúc của các bạn để có thể đạt công suất hiệu quả nhất mà JADE/PUG đã và đang mang lại.

Một vài cú pháp nâng cao

Variables

Variables thì biết rồi nó là biến, còn mixins thì nếu muốn hiểu rõ thêm nữa thì nó là một câu chuyện dài thòn lòn khác nữa nên không muốn tốn thời gian để đề cập ở đây, nhưng đại loại mixins cho phép bạn tái sử dụng lại một đoạn JADE/PUG được định nghĩa trong mixin đó.

Variables và ở những phần sau có nói về mệnh đề điều kiện và vòng lặp thì những thành phần này đều là JavaScript code.

Code

Tất cả các code đều được bắt đầu với

Hay block of code

Những thành phần đều không thể chuyển sang HTML vì chúng là code.

Variables

Giống như JavaScript, variable được khai báo với var

Interpolation

JADE/PUG cung cấp cú pháp để biểu diễn giá trị của biến bên trong một đoạn văn bản.

Mặc định JADE/PUG sẽ encode hết tất cả thẻ HTML bên trong giá trị của biến khi compile nên để tránh điều này các bạn có thể dùng ! thay vì #

Và cũng là String nên chúng ta cũng có thể sử dụng hầu hết các hàm của String mà JavaScript cung cấp.

 

Conditionals

Đi bất kỳ đâu chúng ta cũng không thể phủ nhận rằng những mệnh đề điều kiện đối với việc lập trình là quan trọng như thế nào, và đương nhiên JADE/PUG cũng cho phép bạn làm điều đó.

IF/UNLESS

Và kết quả trả về sẽ là  <p>I'm robot</p> , và

Phủ định của if chúng ta có thể dùng ! hoặc unless

CASE

Tương tự như Switch case của JavaScript.

Iteration

JADE/PUG cung cấp cho chúng ta 2 cú pháp đó là each và while.

Each

Ta cũng có thể lấy index trong vòng lặp.

Xét điều kiện nếu như mảng rỗng

Cả hai đều cho ra cùng một giá trị

While

Include

Thế mạnh của JADE/PUG là include và extends, Include giúp bạn có thể rã trang HTML thành những file modules/partials và gọi chúng khi cần. Thông thường bạn làm những việc này cần phải nhờ đến PHP, nhưng đầu ra thì vẫn là file PHP, không phải HTML hoàn chỉnh.

Hay thậm chí bạn cũng có thể include cả những file css, javascript

Template Inheritance: Extends and Block

Đến phần siêu hack não, cứ như coi Dr.Strange với những chiều thực tại khác nhau và không gian lăng kính. Thôi bỏ đi.

JADE/PUG cung cấp 2 keyworks giúp chúng ta hoàn thiện hơn về mặt xây dựng template và kế thừa từ chúng là extends và block. Bạn có thể xây dựng master page/layout và sử dụng lặp đi lặp lại ở một vài trang cụ thể, dễ dàng cập nhật hàng loạt nhưng vẫn không ảnh hưởng đến những thành phần chuyên biệt trên từng trang đó.

Chúng ta để ý thấy rằng trên layout.pug có 3 block, khi file index.pug kế thừa từ layout.pug, việc customize lại từng block sẽ đè chồng lên giá trị của block đó trong layout. Qua đó JADE/PUG lại ưu đãi cho các lập trình viên thêm những từ khóa Append và Prepend để có thể linh hoạt hơn trong việc sử dụng. Ví dụ:

Đoạn block append của block head sẽ thêm vào phía sau

Mixins

JADE/PUG cung cấp cho từ khóa mixin để mở đầu một mixin block.

mixin <mixin_name>

Và khi sử dụng thì bạn cần dùng dấu cộng phía trước mixin name

+mixin_name

Linh hoạt như viết một function bạn có thể truyền biến vào một mixin

Mixin block

Kết hợp với block

Mixin Attributes

JADE/PUG cung cấp cú pháp để thêm attributes vào mixin như sau

Lưu ý ở một số những mixin không cần tham số đầu vào thì cũng có thể viết gọn để truyền attributes, phải nói rất linh hoạt.

Rest Arguments

Kinh khiếp, cung cấp hầu hết các đồ chơi hạng nặng để thỏa mãn các lập trình viên. JADE/PUG cho phép chúng ta có thể tạo mixin mà chưa xác định được số lượng của tham số đầu vào (cái này có thể tham khảo thêm ở JavaScript nếu như chưa biết).

Kết luận

Ở đây là mình đã tổng hợp, chắt lọc và sắp xếp những gì đơn giản nhất có thể cover đủ tầm 80% những gì mà JADE/PUG đang có, nếu bạn muốn tham khảo thêm có thể lên trang này (https://pugjs.org/) để đào sâu thêm. Và tầm khoảng 20% còn lại là cách bạn sử dụng JADE/PUG như thế nào, kết hợp với cái gì thôi, như mình đã hứa, ở bài sau chúng ta sẽ viết tool compile tự động khi có thay đổi trong file JADE/PUG, hy vọng mọi người sẽ theo dõi.

P/s: Danh sách bài viết mình đang plan để viết:

  • Auto-compiler cho JADE/PUG với Grunt.
  • LESS “Ai thông minh hơn học sinh lớp 5” – Phần 1 & 2
  • Auto-compiler cho JADE/PUG và LESS với Gulp
  • Gulp vs Grunt

 

 

 

Bình luận với Facebook

Nguyễn Quốc Tuấn

I don't know who I am!?

Leave a Reply

Your email address will not be published. Required fields are marked *