ทำ View Source ให้สวยงามใน Node.js

การพัฒนาเว็บไซต์ย่อมหนีไม่พ้นเรื่องการจัดหน้า source code ให้สวยงาม เพื่อตรวจสอบดูได้ง่าย แต่หลายคนมักจะไม่ค่อยสนใจ source ของ html ที่เป็นเอ้าท์พุท เพราะปกติก็ดูแต่ source code ที่เป็นภาษาสำหรับพัฒนาโปรแกรม

แต่อันที่จริงแล้ว source code ของเว็บเพจ เป็นตัวช่วยให้เราสามารถค้นหาสิ่งผิดปกติ หรือช่วยพัฒนาให้โปรแกรมดีขึ้นได้ ขึ้นอยู่กับว่าจะใช้หรือเปล่า

หน้าจอ View Source ที่ยังไม่ได้จัดเรียงใหม่ ทำให้ดูยาก

หน้าจอ View Source ที่จัดเรียงใหม่แล้ว ทำให้สามารถตรวจสอบได้ง่าย

สำหรับ Node.js เป็น Platform ของ JavaScript ที่ทำให้เป็น Web Application ทำงานผ่าน Chrome JavaScript Runtime โดยมี Express เป็น Web Application Framework ช่วยลดการเขียนโค้ดโปรแกรมได้เป็นอย่างมาก

Node.js 

Express

ที่ขาดไม่ได้ คือ Jade ซึ่งเป็นตัวกลางในการเขียนโค้ด HTML ให้ง่าย กระทัดรัดไม่รกรุงรังเหมือนการเขียน HTML โดยตรง จริงๆ แล้วยังมี ejs อีกตัวหนึ่งที่เป็น html template แต่จะเขียนแบบ html ซึ่งต่างจาก jade โดย jade นั้นจะใช้ Indent เป็นตัวแยกหมวดหมู่ ซึ่งต้องระมัดระวังพอควร แต่อย่างไรก็ตาม jade จะแสดงความผิดพลาดออกทางหน้าจอให้สามารถแก้ไขได้ง่ายๆ

jade-language

EJS, JavaScript Template

การจัดการ Source Code ให้อ่านง่ายๆ นั้นไม่ได้ทำอะไรยุ่งยากเลย เพียงแต่เพิ่มคำสั่งเข้าไปใน Express เพียงบรรทัดเดียวหรือคำสั่งเดียว คือ

app.locals.pretty = true;

โดย app นั้นเป็น object ของ Express

var express = require('express'); 

... 

var app = express(); 

...

app.locals.pretty = true;

ง่ายๆ แค่นี้แหละก็ทำให้การแก้ไขโปรแกรมทำได้ง่ายๆ ไม่ยุ่งยากแล้วครับ...