Mustache.js กับ Handlebars.js แตกต่างกันอย่างไร

ความแตกต่างที่สำคัญที่ฉันเห็นคือ:

• แฮนด์เพิ่ม#if, #unless, #withและ#each
• แฮนด์บาร์เพิ่มผู้ช่วย
• แม่แบบแฮนด์บาร์รวบรวม (หนวดอาจเกินไป)
• แฮนด์สนับสนุนเส้นทาง
• อนุญาตให้ใช้{{this}}ในบล็อก (ซึ่งส่งออกค่าสตริงของรายการปัจจุบัน)
• Handlebars.SafeString() (และอาจมีวิธีอื่น ๆ )
• แฮนด์บาร์เร็วขึ้น 2 ถึง 7 เท่า
• หนวดสนับสนุนส่วนกลับหัว (เช่นif !x ...)

(โปรดแก้ไขให้ฉันด้วยถ้าผิดกับข้างต้น)

มีความแตกต่างที่สำคัญอื่น ๆ ที่ฉันหายไปหรือไม่?

คุณตอกหมุดสวยมากแล้วอย่างไรก็ตามยังสามารถรวบรวมแม่แบบหนวดได้

หนวดหายไปไม่มีผู้ช่วยเหลือและบล็อกขั้นสูงกว่าเพราะพยายามอย่างไร้เหตุผล ผู้ช่วยที่กำหนดเองของแฮนด์บาร์มีประโยชน์มาก แต่มักจะจบลงด้วยการแนะนำตรรกะในแม่แบบของคุณ

หนวดมีคอมไพเลอร์ต่าง ๆ (JavaScript, Ruby, Python, C, ฯลฯ ) แฮนด์เริ่มใน JavaScript ตอนนี้มีโครงการเช่นDjango-แฮนด์ , handlebars.java , แฮนด์ทับทิม , lightncandy (PHP)และแฮนด์-ObjC

ข้อดีหนวด:

• ทางเลือกที่นิยมมากกับชุมชนขนาดใหญ่ที่ใช้งานอยู่
• การสนับสนุนฝั่งเซิร์ฟเวอร์ในหลายภาษารวมถึง Java
• เทมเพลตที่ไม่ใช้ลอจิกช่วยให้คุณแยกงานนำเสนอออกจากตรรกะได้อย่างยอดเยี่ยม
• ล้างไวยากรณ์นำไปสู่แม่แบบที่ง่ายต่อการสร้างอ่านและบำรุงรักษา

ข้อเสียหนวด:

• ตรรกะน้อยเกินไป: งานพื้นฐาน (เช่นป้ายกำกับแถวสลับกับคลาส CSS ที่แตกต่างกัน) เป็นเรื่องยาก
• มุมมองแบบลอจิกมักถูกส่งกลับไปที่เซิร์ฟเวอร์หรือถูกใช้เป็น "แลมบ์ดา" (ฟังก์ชั่นที่เรียกได้)
• เพื่อให้แลมบ์ดาทำงานบนไคลเอนต์และเซิร์ฟเวอร์คุณต้องเขียนมันในจาวาสคริปต์

ข้อดีของมือจับ:

• เทมเพลตที่ไม่ใช้ลอจิกช่วยให้คุณแยกงานนำเสนอออกจากตรรกะได้อย่างยอดเยี่ยม
• ล้างไวยากรณ์นำไปสู่แม่แบบที่ง่ายต่อการสร้างอ่านและบำรุงรักษา
• รวบรวมมากกว่าแม่แบบที่ถูกตีความ
• การรองรับเส้นทางที่ดีกว่าหนวด (เช่นการเข้าถึงส่วนลึกของวัตถุบริบท)
• สนับสนุนผู้ช่วยเหลือทั่วโลกได้ดีกว่าหนวด

ข้อเสียแฮนด์:

• ต้องการ JavaScript ฝั่งเซิร์ฟเวอร์เพื่อแสดงผลบนเซิร์ฟเวอร์

ที่มา: การขว้างปาเทมเพลตฝั่งไคลเอ็นต์: หนวด, แฮนด์บาร์, dust.js และอีกมากมาย

ความแตกต่างที่ลึกซึ้ง แต่สำคัญอย่างหนึ่งคือวิธีที่ขอบเขตไลบรารีสองแนวทางเข้าใกล้ หนวดจะกลับไปสู่ขอบเขตพาเรนต์หากไม่พบตัวแปรภายในบริบทปัจจุบัน แฮนด์บาร์จะส่งคืนสตริงว่าง

นี่เพิ่งจะพูดถึงใน GitHub README ซึ่งมีหนึ่งบรรทัดสำหรับมัน:

แฮนด์บาร์เบี่ยงเบนจากหนวดเล็กน้อยซึ่งจะไม่ทำการค้นหาแบบเรียกซ้ำโดยค่าเริ่มต้น

อย่างไรก็ตามตามที่ระบุไว้ที่นั่นมีการตั้งค่าสถานะเพื่อให้ Handlebars ทำงานในลักษณะเดียวกับหนวด - แต่มันมีผลต่อประสิทธิภาพการทำงาน

สิ่งนี้มีผลกับวิธีที่คุณสามารถใช้#ตัวแปรเป็นเงื่อนไข

ตัวอย่างเช่นในหนวดคุณสามารถทำสิ่งนี้:

{{#variable}}<span class="text">{{variable}}</span>{{/variable}}

โดยทั่วไปหมายถึง "ถ้ามีตัวแปรอยู่และเป็นความจริงให้พิมพ์ span ด้วยตัวแปรที่อยู่ในนั้น" แต่ใน Handlebars คุณจะต้อง:

• ใช้{{this}}แทน
• ใช้พา ธ พาเรนต์{{../variable}}เพื่อกลับไปยังขอบเขตที่เกี่ยวข้อง
• กำหนดvariableค่าลูกภายในvariableวัตถุแม่

รายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้ถ้าคุณต้องการให้พวกเขาที่นี่

หมายเหตุ: คำตอบนี้ล้าสมัยแล้ว มันเป็นความจริงในขณะที่โพสต์ แต่ไม่มีอีกต่อไป

หนวดมีล่ามหลายภาษาในขณะที่แฮนด์บาร์เป็น Javascript เท่านั้น

ความแตกต่างระหว่างพวกเขาก็คือขนาดของไฟล์:

• Mustache.js มีขนาด 9kb
• Handlebars.js มี 86kb หรือ 18kb หากใช้เทมเพลตที่คอมไพล์แล้ว

หากต้องการดูประโยชน์ด้านประสิทธิภาพของ Handlebars.js เราต้องใช้เทมเพลตที่คอมไพล์แล้ว

ที่มา: ภาพรวมของเครื่องมือสร้างเทมเพลต JavaScript

ความแตกต่างที่ลึกซึ้งอีกอย่างหนึ่งคือการรักษาค่าที่ผิดพลาดใน{{#property}}...{{/property}}บล็อก การใช้งานหนวดส่วนใหญ่จะทำตามความผิดพลาดของ JS ที่นี่เท่านั้นไม่แสดงผลบล็อกถ้าpropertyเป็น''หรือ '0'

แฮนด์บาร์จะแสดงผลบล็อก''และ0แต่ไม่ใช่ค่าที่ผิดพลาดอื่น ๆ ซึ่งอาจทำให้เกิดปัญหาเมื่อย้ายเทมเพลต

ฉันรู้สึกว่าหนึ่งในข้อเสียดังกล่าวสำหรับ "แฮนด์บาร์" ไม่ถูกต้องอีกต่อไป

Handlebars.java ช่วยให้เราสามารถแบ่งปันเทมเพลตภาษาเดียวกันสำหรับทั้งไคลเอนต์และเซิร์ฟเวอร์ซึ่งเป็นชัยชนะครั้งใหญ่สำหรับโครงการขนาดใหญ่ที่มีส่วนประกอบมากกว่า 1,000 รายการที่ต้องใช้การแสดงผลเซิร์ฟเวอร์สำหรับ SEO

ดูที่https://github.com/jknack/handlebars.java

- นอกเหนือจากการใช้ "this" สำหรับแฮนด์บาร์และตัวแปรที่ซ้อนกันภายในบล็อกตัวแปรสำหรับหนวดคุณยังสามารถใช้จุดซ้อนในบล็อกสำหรับหนวด:

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}