Skip to content

หัดใช้ Mustache กันดีกว่า

Mustache คืออะไร?

Mustache เป็น template engine (บางทีก็เรียก render engine) ตัวหนึ่งในเว็บโครงการเขานิยาม lib ตัวนี้ว่า

Logic-less templates.

Mustache รองรับภาษาอื่นๆ เยอะมาก เช่น RubyJavaScriptPython,ErlangPHPPerlObjective-CJava.NET,AndroidC++GoLuaoocActionScript,ColdFusionScalaClojureFantom,CoffeeScriptD, และ node.js

หน้าที่ของมันคือ generate markup  (ถ้าเป็น web app ก็ HTML) ซึ่งเป็นส่วนหน้าของ app จาก data model (JSON) ที่เราออกแบบไว้ จะว่าไปมันก็เป็นเครื่องมือที่เกิดจากแนวคิด MVC ที่พยายามแยกการทำงานของโปรแกรมหรือ application ออกเป็นส่วนตามการทำงาน

ทำไมต้องใช้ Template engine?

เหตุผลหลักๆ เลยคือการ develop และ manage โค้ดครับคน develop ก็ได้โค้ดที่สวยเป็นระเบียบดูแลง่ายขึ้นโค้ดไม่รก manage โค้ดง่ายขึ้นเพราะแยกการทำงานระหว่าง data model และ view ออกจากกันแล้ว ถ้ามีการปรับเปลี่ยนส่วนไหนก็จะไม่กระทบส่วนอื่นๆ หรือถ้ามีก็มีน้อย ข้อดีอีกอย่างคือถ้าเจอบั๊กก็จะไล่ได้สะดวกขึ้นว่าเกิดจากส่วนไหน

อาจจะยังไม่เห็นภาพ ลองดูตัวอย่างนี้ โจทย์คือสมมุติผมมี JSON ข้อมูลอย่างข้างล่างและต้องการแสดงผลที่ browser ขอยกตัวอย่างเป็น Javascript แล้วกัน ก็จะได้

Data Model (JSON)

ไม่ใช้ template engine

ใช้ template engine (Mustache.js)

Output

ทั้ง 2 วิธีให้ output เหมือนกันแต่ถ้าคุณเป็นคนเขียนโค้ดล่ะจะเลือกแบบไหน? ถ้าเป็นผม ผมเลือก code ที่ 2 ดีกว่า จากตัวอย่างเราจะเห็นว่า code ที่ 1 มีการต่อ string เยอะแยะไปหมดเพื่อแทรกตัวแปรและถ้าเป็นข้อมูลที่เป็น Array ก็ต้องวนรอบต่อ string เอง แต่ code ที่ 2 ไม่ต้องทำแบบนั้นเลย

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

 Resources

 

5 Comments

  1. KKC KKC

    เคยใช้แต่ smarty (ไม่รู้แบบเดียวกันป่าว แต่ดูลักษณะคล้ายๆกัน) หลังๆก็เน้นเขียนแบบนี้บ้างเหมือนกัน หุหุ

    • kor kor

      ใช่แล้วมันคือ template engine เหมือนกันแต่ Mustache ใช้ได้หลายภาษา Smarty ใช้ได้แต่ PHP

      • KKC KKC

        จะว่าไปชีวิตนี้ก็ไม่รู้จะได้มีโอกาสพัฒนาภาษาอื่นๆอีกมั้ย T_T คุ้นๆว่าเฟสบุคก็แนวเดียวกันนี้ใช่ป่ะ

        • kor kor

          ถ้าเขียนภาษาอื่นได้ชำนาญก็เป็นเรื่องดี ส่วนมากถ้าเราเขียนภาษาใดภาษาหนึ่งเป็นอยู่แล้ว เข้าใจ concept แล้ว หัดภาษาอื่นก็ไม่ยากแค่เรียนรู้ syntax เพิ่ม จริงๆ คนเราทำงานส่วนมากก็ใช้ภาษาใดภาษาหนึ่งเป็นหลักอยู่แล้ว ถ้าเก่งภาษาใดภาษาหนึ่งไม่เลยก็คิดว่าดีกว่าเป็นอย่างละนิดละหน่อยนะ

          ส่วน template engine Facebook ใช้ XHP เขียน extension ของ PHP ขึ้นมาเองเลยอยากถ้าอยากใช้ต้อง compile ติดตั้งเอง

Leave a Reply

Your email address will not be published.