Friday, March 6, 2015

Template Inheritance ใน jade template

การสืบทอดคุณสมบัติต่างๆ เป็นวิธีการเขียนโปรแกรมแบบบ Object Oriented ซึ่งทำให้สามารถเขียนโปรแกรมได้รวดเร็ว เพราะสร้างโมดูล หรืองานขึ้นมาชิ้นหนึ่งสามารถนำมาเวียนใช้ได้อีกหลายครั้ง และทำให้เกิดรูปแบบมาตรฐานเดียวกัน

ตัวอย่างง่ายๆ ที่ใช้กันในอดีต ก็คือ เว็บเพจจะแบ่งเป็น ส่วนหัว (Header), ส่วนเนื้อหา (Content) และส่วนท้ายหน้า (Footer) ซึ่งเนื้อหาจะเปลี่ยนหรือแสดงผลในส่วน Content แต่ Header และ Footer จะไม่ค่อยเปลี่ยนแปลง (อาจจะมีเปลี่ยนแปลงบ้าง) โดยแต่ละหน้าจะต้องเหมือนกันถึงจะเกิดความสวยงาม

ใน jade ก็เช่นกัน สามารถสืบทอดจากหน้าอื่นมาไว้ในหน้าของงานใดๆ ก็ได้ และมีวิธีการที่ไม่ซับซ้อน สามารถทำความเข้าใจได้ง่ายๆ

ก่อนอื่นที่จะเริ่มไปเขียนงานที่ซับซ้อนเราต้องเข้าใจโครงสร้างของ template เสียก่อน จะทำให้งานง่ายขึ้นและแก้ไข เพิ่มเติมได้ง่ายขึ้นตามไปด้วย

ตัวอย่างที่จะพูดถึงวันนี้ประกอบด้วย ไฟล์ layout.jade, index.jade และ main.jade


  • layout.jade จะเป็นไฟล์โครงสร้างเริ่มต้นของระบบ
  • index.jade เป็นหน้าหลักของ / จะเรียกใช้งาน layout.jade ผ่านคำสั่ง extends layout
  • maint.jade เป็นอีกหน้าหนึ่ง /main จะเรียกใช้งาน layout.jade ผ่าน index.jade อีกครั้งหนึ่ง โดยจะเรียกด้วยคำสั่ง extends layout และ extends index ตามลำดับ
ภายใน layout จะกำหนดโครงสร้างไว้เป็น block เช่น block header, block script, block content และ block footer การใช้งาน block ในไฟล์ jade อื่นๆ จะมี 3 แบบ คือ Replace, Append และ Prepend

Replace 
การเรียกใช้ Block แบบ Replace จะแทนที่ข้อมูลใน Block เดิมด้วย ข้อมูลในที่เรียกใช้งานล่าสุด เช่น

layout.jade

...
block content
    p Content from layout.jade
...

index.jade

extends layout
block content
    p Content from index.jade

เมื่อสั่งรันเว็บเพจแล้วหน้าจอจะแสดงข้อความ Content from index.jade เพราะเป็นการเรียกแบบ Replace


Append
การเรียกแบบ Append จะไปต่อท้าย Block ที่เรียก เช่น

index.jade

extends layout
block append content
    p Content from index.jade

เมื่อสั่งรันหน้าเว็บแล้วจะมีข้อความสองบรรทัด คือ 

Content from layout.jade 
Content from index.jade

Prepend
การเรียกแบบเพิ่มในบรรทัดแรกของ Block

index.jade

extends layout
block prepend content
    p Content from index.jade

เมื่อสั่งรันเว็บเพจจะได้ข้อความสองบรรทัดกลับกันกับ append คือ


Content from index.jade 
Content from replace.jade



หน้าจอการเรียกใช้ block แบบต่างๆ


หน้าจอที่ได้จาก index.jade (2) โดยเรียก layout.jade (1) ตอนเริ่มต้น



หน้าจอ main.jade (3, 4) เรียกใช้ layout.jade (1) และ index.jade (2) ในตอนแรกของไฟล์



อธิบายเพิ่มเติมการเรียกจากส่วนต่างๆ ตามลำดับตัวเลขในวงเล็บ


รายละเอียดใน View source page ทำให้มองเห็นลำดับได้ง่ายขึ้น


จากข้อมูลและรูปภาพข้างบนจะเห็นได้ว่า jade template นั้นง่ายต่อการใช้งาน และเรียกใช้จากเว็บอื่นๆ ได้ง่ายตามไปด้วย


ตัวอย่าง Source code:

app.js
var express = require('express'); 
var app = express(); 
// Set template path and render engine, not necessary.
app.set('views', __dirname + '/views');
 
app.set('view engine', 'jade'); 
app.locals.pretty = true; 
app.get('/', function(req, res) { 
  res.render('index.jade');}); 
  app.get('/main', function(req, res){ 
  res.render('main.jade'); 
}); 
// Start server 
app.listen(3030);

layout.jade
!!!html 
head 
  block stylesheet 
  block script      
      script <!-- script from layout.jade (1) -->  
body    
  block content 
  h1 Hello from layout.jade (1)


index.jade
extends layout 
block stylesheet 
  <!-- Overwrite to block stylesheet (2) -->  
  link(href='bootstrap.min.css' rel='stylesheet') 
block prepend script  
  script <!-- prepend to [block script](2) --> 
block append content   
  h2 Hello from index.jade (2, append)

main.jade
extends layout 
extends index 
block append content  
  p Append from main.jade (3, append) 
block prepend content 
  p Prepend from main (4, prepend)


--------------------

อ้างอิง:
สามารถเข้าไปดูตัวอย่างได้ที่:
http://runnable.com/Umoh1jpWr_o6ABKm/extends-and-blocks-in-jade-for-node-js

No comments:

Post a Comment