Jade หรือ Handlebars ใช้อะไรเมื่อเขียนแอพ AngularJs


120

ฉันเป็นคนใหม่ (ish) สำหรับแอปพลิเคชั่นสแต็กเต็มรูปแบบของจาวาสคริปต์และยังใหม่สำหรับ Angular ดังนั้นฉันหวังว่าจะมีใครสักคนสามารถใส่บันทึกให้ฉันได้ที่นี่

เหตุใดฉันจึงต้องใช้เฟรมเวิร์กเทมเพลตเช่น Jade หรือ Handlebars เมื่อเขียนแอพฝั่งไคลเอ็นต์โดยใช้ AngularJS

ฉันควรจะบอกว่าฉันไม่เคยใช้เฟรมเวิร์กเทมเพลตเหล่านี้เลย ดังนั้นฉันจึงไม่คุ้นเคยกับข้อดีอย่างสมบูรณ์ แต่เมื่อฉันดูที่ Handlebars มันจะทำหลายอย่างเช่นเดียวกับที่ฉันทำใน Angular เช่นการวนซ้ำเป็นต้น

เท่าที่ฉันสามารถบอกได้มันสมเหตุสมผลที่สุดที่จะสร้างเทมเพลตใน Angular โดยใช้ HTML ที่เหมาะสมจากนั้นทำการเทมเพลตฝั่งไคลเอ็นต์ทั้งหมดและรวมสิ่งนี้เข้ากับแนวทางแรกของ API โดยใช้ node และ mongo เป็นต้น

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

โปรดสอนฉันและตั้งฉันให้ตรง ฉันชอบที่จะเรียนรู้แนวทางปฏิบัติที่ดีที่สุดจากผู้ที่รู้จักมากกว่าที่ฉันทำ

ขอบคุณ

คำตอบ:


61

ผู้ที่ชื่นชอบ Jade อย่างไม่ต้องสงสัยในสภาพแวดล้อมเชิงมุมไม่เข้าใจตรรกะมุมมองนั้นเป็นของไคลเอนต์และตรรกะทางธุรกิจบนเซิร์ฟเวอร์เช่นเดียวกับที่ OP แสดงความคิดเห็น

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

เมื่อเร็ว ๆ นี้ฉันได้ตรวจสอบโค้ดบางส่วนซึ่งการทำเทมเพลตเชิงมุมแบบตรงจะทำงานได้ดีกว่าการผสมใน Jade เพียงแค่รักษาความเรียบง่าย

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

มีกรณีพิเศษที่ถูกต้องกรณีหนึ่งสำหรับเทมเพลตฝั่งเซิร์ฟเวอร์: การเพิ่มประสิทธิภาพโดยจำไว้ว่าการเพิ่มประสิทธิภาพก่อนกำหนดโดยทั่วไปเป็นสิ่งที่ไม่ดี ในกรณีที่ประสิทธิภาพเป็นปัญหาอย่างแท้จริงและคุณมีความสามารถของเซิร์ฟเวอร์ในการจัดการสิ่งนี้เทมเพลตฝั่งเซิร์ฟเวอร์สามารถช่วยได้ สิ่งนี้ใช้กับผลิตภัณฑ์เช่น Twitter และ Basecamp ซึ่งต้นทุนในการทำงานด้านเซิร์ฟเวอร์จำนวนมากจะถูกชดเชยด้วยการเพิ่มขึ้นของคำขอที่ลดลงไปยังเซิร์ฟเวอร์

สำหรับแฮนด์บาร์ไม่จำเป็นต้องเปลี่ยนเทมเพลตฝั่งไคลเอ็นต์ AngularJS (ที่น่าทึ่ง)


4
สวัสดีนิคนั่นคือคำตอบที่ฉันได้รับเช่นกัน ฉันไม่ได้พูดแบบโผงผาง แต่ฉันเห็นด้วย!
Jay Pete

60
@ นิกฉันไม่ค่อยเห็นคนที่ชอบเขียน / อ่าน XML / HTML มากนัก คุณอาจจะเป็นคนที่หายากที่สุดที่ฉันเคยเห็นว่าใครเป็นผู้สนับสนุนสิ่งที่แห้งและสะอาดกว่าเช่นหยก มีห้องสมุดมากมายที่มีจุดประสงค์เพื่อช่วยให้ผู้คนไม่สามารถเขียน / อ่าน XML / HTML ได้
Alex K

12
ฉันไม่แนะนำความซับซ้อนในที่ที่ไม่จำเป็น ใช้เวลาทั้งวันในการอ่านโค้ด C หรือแย่กว่านั้นคือเทมเพลต C ++ และคุณจะรู้ได้อย่างรวดเร็วว่าการแยกวิเคราะห์ HTML ในจิตใจเป็นเรื่องที่ไม่สำคัญอย่างยิ่ง
วิศวกร

35
"น่าหัวเราะสำหรับมืออาชีพที่อ้างสิทธิ์นี้", "การแยกวิเคราะห์ HTML ทางจิตใจเป็นเรื่องที่ไม่สำคัญอย่างยิ่ง" ฉันพบความคิดเห็นที่แย่มากเหล่านี้ คุณอยากจะเขียนแอสเซมบลีเพราะว่ามันแยกวิเคราะห์ง่ายมากไหม Jade เป็นสิ่งที่ YAML ใช้สำหรับ XML เมื่อคุณใช้ Angular กับมัน
Philipp Gayret

7
ฉันเห็นด้วยกับ @NickWiggill การแยกวิเคราะห์แม่แบบ JADE กับ HTML ดิบต้องใช้เวลาซีพียู 'wetware' เท่ากันสำหรับฉัน ฉันจะไม่พูดถึงขนาดที่ว่าคุณไม่เป็นมืออาชีพถ้าคุณไม่เห็นด้วย แต่สำหรับฉันมันก็เหมือนกัน @ ฟิลิปป์การเปรียบเทียบของคุณในการแยกวิเคราะห์ C / C ++ กับแอสเซมบลีเท่ากับการแยกวิเคราะห์ JADE เป็น HTML นั้นไม่ดีมีไม่กี่คนที่สามารถเริ่มแยกวิเคราะห์แอสเซมบลีได้ในแบบเรียลไทม์ในขณะที่ฉันรู้สึกว่าเว็บส่วนใหญ่ นักพัฒนาสามารถแยกวิเคราะห์ HTML ได้อย่างง่ายดายหรือเกือบจะง่ายพอ ๆ กับ JADE
เสนอชื่อ

63

ฉันใช้ Jade เพื่อสร้างเทมเพลตที่ AngularJS ใช้เพราะฉันเกลียดการเขียน HTML ธรรมดา ดูเหมือนว่า:

.control-group(
  ng-form
  name='emailGroup'
  ng-class='{"ng-error": emailGroup.$invalid}'
)
  label.control-label Email
  .controls
    input(
      type='email'
      ng-model='user.email'
      required
      placeholder='you@example.com'
      focus-on='focusEmail'
    )

…ซึ่งฉันคิดว่าสะอาดกว่า HTML ธรรมดามาก


12
ตกลงคุณใช้เพียงเพราะคุณไม่ชอบเขียน HTML ธรรมดาใช่หรือไม่? นั่นคือประโยชน์หลักของ Jade มีชัยชนะอื่น ๆ หรือไม่? Jade เคยทำให้ HTML ยุ่งหรือไม่ดังนั้นคุณต้องปรับแต่งเพื่อให้ได้ผลลัพธ์ที่แน่นอนหรือไม่? ฉันเห็นอันตรายจากการเพิ่มชั้นของทิศทางอื่นโดยไม่จำเป็นจริงๆ แต่แล้วอีกครั้งนั่นคือเหตุผลที่ฉันถาม ฉันต้องการเข้าใจคุณค่าที่นี่
Jay Pete

1
จริงๆแล้วฉันเริ่มต้นกับ Jade ก่อนที่จะไปกับ Angular ดังนั้นมันจึงเป็นนิสัยที่ติดอยู่มากกว่าการเลือกที่มีสติ แต่มันก็ได้ผลดีจนถึงตอนนี้ ปัญหาเดียวที่ฉันมีกับ Jade คือวิธีจัดการช่องว่างสีขาว (ฉันใช้ pretty = false) ดังนั้นฉันจึงลงเอยด้วยการเว้นช่องว่างต่อท้ายในไฟล์ต้นฉบับเมื่อใดก็ตามที่ฉันต้องการเพิ่มช่องว่างระหว่างแท็ก ฉันพบว่าคุณสมบัติเช่น include และ mixins มีประโยชน์มาก
thatmarvin

ไม่ng-inludeอาจใช้ร่วมกับng-srcแตกต่างกันมากจาก mixins Jades และและรวมถึง?
Jay Pete

2
ชั้น @JayPete หยกของนามธรรมมากกว่า HTML ที่เป็นเหมือนบาง เป็นการแปลระหว่างไวยากรณ์ที่เข้าใจง่ายที่สุดอย่างหนึ่งที่ฉันเคยใช้ เวทมนตร์เกิดขึ้นน้อยมากใน Jade ยกเว้นเมื่อคุณเริ่มขุดด้วยตัวแปรและตรรกะเงื่อนไข (เช่นเดียวกับที่คุณทำกับเครื่องมือเทมเพลตใด ๆ ) จริงๆแล้วมันไม่ได้แตกต่างกันทั้งหมด
Chev

6
เรื่องง่ายคืออัตนัย
Chev

46

ฉันไม่เข้าใจจริงๆว่าทำไมผู้คนถึงสนใจเกี่ยวกับความแตกต่างระหว่างสิ่งนี้:

<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js">
 </body>
</html>

และนี่:

html(ng-app="ng-app")
  // Body tag augmented with ngController directive  
  body(ng-controller="MyController")
    input(ng-model="foo", value="bar")
    // Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup
    button(ng-click="changeFoo()") {{buttonText}}
    script(src="angular.js")

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


2
ฉันเห็นด้วยแม้ว่าคุณจะเพิ่มหยก 1 ชิ้นifในสมการทุกอย่างก็เปลี่ยนไปในทันที ดูด้านบนเกี่ยวกับ "ผู้ใช้ระดับพรีเมียม"
TWiStErRob

15
ฉันไม่เห็นด้วยหน้า html 9 บรรทัดนั้นไม่สมจริงอย่างสิ้นเชิง การรับแหล่งที่มาของหน้าที่ฉันกำลังดูอยู่ตอนนี้จะแปลง 2320 บรรทัดเป็น 1580 (โดยใช้html2jade )
นั่นเป็นการ

2
@TWiStErRob หากคุณเปลี่ยนจาก Jade เป็น HTML สิ่งที่คุณต้องทำคือการแสดงเทมเพลตฮ่า ๆ หากคุณมีifมาร์กอัปหยกของคุณแสดงว่าคุณมีความต้องการเครื่องมือสร้างแบบจำลองบางประเภทอยู่แล้วและคุณจะต้องแปลงมันเป็นifไวยากรณ์ที่เครื่องยนต์นั้นใช้ ฉันไม่เข้าใจคำวิจารณ์ของคุณจริงๆ
Chev

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

3
@ ฟิลิปป์ไม่ปลอดภัยที่จะถือว่าบรรทัดส่วนใหญ่ที่ลบออกไปเป็นเพียงแท็กปิด เนื่องจากบรรณาธิการส่วนใหญ่เพิ่มแท็กปิดโดยอัตโนมัติเมื่อคุณเขียนแท็กเปิดฉันจึงสงสัยว่ามันบันทึกการเขียนได้ 700 บรรทัด
อัฒภาค

14
  1. คุณไม่จำเป็นต้องใช้ Handlebars กับ AngularJS เนื่องจากมีเครื่องมือแม่แบบเป็นของตัวเอง
  2. เหตุผลที่พวกเขาใช้ Jade เพราะมันเป็นเพียงตัวแสดงผลเซิร์ฟเวอร์ซึ่งจะรวบรวมเป็น html และให้บริการโดย angularJS ในส่วนหน้า

ดังนั้น TL; DR บนเซิร์ฟเวอร์คุณสามารถใช้ภาษาอะไรก็ได้ [jade, haml, ... ] เพื่อสร้างโครงสร้าง html สำหรับแอปพลิเคชันของคุณ แต่จะไม่เกี่ยวข้องกับ angularJS เนื่องจากจะแสดงผลและทำงานกับ HTML ที่ รันไทม์ในส่วนหน้า

คุณไม่จำเป็นต้องใช้ Jade บนเซิร์ฟเวอร์และฉันไม่แนะนำให้ใช้เนื่องจากจะทำให้นักพัฒนาใหม่สับสน ในโปรเจ็กต์ที่คุณเห็นว่าพวกเขาใช้ Jade เท่านั้นเพราะมันสะอาดกว่าและคุ้นเคยกับมันและถ้ามันใช้กับ angularJS งานเดียวคือสร้าง html ธรรมดาโดยไม่มีตรรกะใด ๆ


2
จะไม่เป็นการดีกว่าที่จะไม่ใช้ html ที่สร้างจากเซิร์ฟเวอร์และแยกตรรกะและมุมมองออกจากกันโดยสิ้นเชิง? หรือมีบางอย่างที่ฉันขาดหายไป? เหตุใด Jade จึงเป็นความคิดที่ดีเมื่อเขียนแอป AngularJS
Jay Pete

ฉันไม่ได้บอกว่าเป็นความคิดที่ดีที่จะใช้กับ angularJS Jade ไม่ได้เกี่ยวข้องอะไรกับ angularJS เพื่อให้ชัดเจนฉันจะอัปเดตคำตอบของฉัน
Dzung Nguyen

ฉันเข้าใจว่า Jade ไม่ได้เกี่ยวข้องอะไรกับ Angular ฉันแค่พยายามหาว่า Jade มีค่าอะไรมากกว่าการเขียน HTML จริงใน AngularJS บางส่วน ฉันเห็นคนจำนวนมากใช้มันและอยากจะเข้าใจว่าทำไม :-)
Jay Pete

2
อีกครั้ง Jade ไม่มีส่วนเกี่ยวข้องกับ AngularJS AngularJS ใช้งาน HTML บางส่วนและให้บริการจากหน้า HTML คุณสามารถใช้อะไรก็ได้เพื่อสร้างหน้า HTML ในฝั่งเซิร์ฟเวอร์รวมถึง Jade หรือ Haml Jade / Haml ไม่ใช่เฟรมเวิร์กที่เป็นเทมเพลตจริงๆ พวกมันเป็นตัวประมวลผลล่วงหน้ามากกว่า คำถามที่ถูกต้องคือ "Handlebars หรือ Mustache หรือภาษาเทมเพลต JavaScript อื่น ๆ "
Eddie Monge Jr

@JayPete ประโยชน์ของการใช้ Jade ในการพัฒนา angularJS อาจเป็นเพราะ Jade Syntax นั้นสะอาดกว่า แต่ถึงกระนั้นเนื่องจากประสบการณ์ของฉันมันช่วยไม่ได้มากนัก ดังนั้นเพียงแค่ใช้ html :)
Dzung Nguyen

8

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

ทำงานคนเดียวบนแอปเชิงมุม? ให้หยกลอง

Jade ช่วยเพิ่มความสามารถในการโมดูลาร์ HTML ลดจำนวนเวลาที่คุณใช้ในการดีบัก HTML และยังส่งเสริมการสร้างสินค้าคงเหลือมาร์กอัป

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

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


2
ไม่รู้ว่าทำไมถึงมี -1 แต่ฉันตอบโต้แล้ว
มาร์ค K แวนส์

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

1
คุณพูดถูกอาจกล่าวได้เช่นเดียวกันกับพรีคอมไพเลอร์ทั้งหมด สำหรับ Jade Mixins jade-lang.com/reference/mixinsสามารถปรับปรุง modularization ได้ (โดยเฉพาะเมื่อเทียบกับ vanilla HTML) หากคุณสนใจในการสร้าง HTML แบบโมดูลาร์คุณอาจต้องการโพลิเมอร์ - โปรเจค
Mirko

7

ฉันได้อ่านคำตอบทั้งหมดข้างต้นแล้วและรู้สึกประหลาดใจเล็กน้อยที่ไม่มีใครพูดถึงแง่มุมหนึ่งซึ่งทำให้การใช้หยกในการสร้างเทมเพลต AngularJS เป็นสิ่งที่มีประโยชน์มาก

ตามที่ได้บอกไปแล้วในการผลิตความแตกต่างของสถานการณ์ที่เหมือนจริงระหว่างการพิมพ์ html ดิบและหยกนั้นเป็นสิ่งที่น่าสังเกต แต่สิ่งที่สำคัญกว่าที่เราไม่ควรลืมก็คือบางครั้งเราต้องการเทมเพลต angularjs ที่เปลี่ยนแปลงแบบไดนามิกและกำหนดค่าเริ่มต้นใหม่

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

นอกจากนี้ AngularJS ยังทำงานได้ดีกับโมเดลซึ่งโครงสร้างตามคำจำกัดความที่รู้จักกันดี อันที่จริงมันเกิดขึ้นโดยที่เราไม่ทราบโครงสร้างที่แน่นอน (ลองนึกภาพเช่นพูดว่า JSON renderer) AngularJS จะค่อนข้างเงอะงะที่นี่ (แม้ว่ากำลังสร้างแอพเชิงมุม) ในขณะที่หยกจะทำงาน


2

คุณสามารถรวมแม่แบบเชิงมุมผ่าน Jade

script(type="text/ng-template", id="admin")
  include partials/admin

สำหรับเทมเพลตการแคชฉันมองว่าสิ่งนี้เปราะบางน้อยกว่าการรวมเทมเพลตที่ใช้ Escape ในไฟล์จาวาสคริปต์

ดู: https://docs.angularjs.org/api/ng/service/$templateCache


2

Jade มีความใกล้เคียงกับ html มากกว่า Haml ดังนั้นการสลับบริบทจึงมีน้อยมาก ถึงกระนั้นก็ไม่ได้ขาดไปอย่างสิ้นเชิง มันอาจไม่สำคัญสำหรับนักพัฒนาเลย แต่เมื่อนักออกแบบของคุณมาและขอให้คุณทำอย่างไรให้แท็กที่ซ้อนกันทำงานอย่างถูกต้องคุณกำลังแก้ปัญหาที่ไม่จำเป็นที่คุณสร้างไว้ตั้งแต่แรก

HTML ยังสามารถเขียนได้อย่างชัดเจนและสามารถใช้บางส่วนเพื่อให้เข้าใจได้ง่ายขึ้น ข้อความ 500 บรรทัดอ่านยากไม่ว่าจะเป็น Jade หรือ HTML

นี่คือเทมเพลต Jade

.product-container

    .input-group.msB.col-md-5.no-padding
        .fnt-light-navyblue.mtB(for='name')
            strong Name the sticker
        input.full-input(type='text', placeholder='Awesome Batman Sticker')
    .clear

    .form-group.mmT
        label.form-label.fnt-light-navyblue
            strong Choose size
        .selector-group(ng-repeat="size in sizes", ng-class="{ 'msT': !$first}")
            - raw
            span.radio
                input.radio(name='choose_sticker_size',
                            ng-model="selectedSize",
                            type='radio',
                            value='{{size}}',
                            id="sticker-{{size}}")
                span.fake-radio
            label(for='sticker-{{size}}') {{size}} inch
            - endraw
    // end form-group
    .clear

และ HTML ที่เทียบเท่า

<div class="product-container">

    <div class="input-group msB col-md-5 no-padding">
        <div for="name" class="fnt-light-navyblue mtB">
            <strong>Name the product</strong>
        </div>
        <input type="text" placeholder="Awesome Batman Sticker" class="full-input" />
    </div>
    <div class="clear"></div>

    <div class="form-group mmT">
        <label class="form-label fnt-light-navyblue">
            <strong>Choose size</strong>
        </label>
        <div
            class="selector-group"
            ng-class="{ 'msT': !$first}"
            ng-repeat="size in sizes">
                {% raw %}
                <span class="radio">
                    <input
                        id="sticker-{{size}}"
                        class="radio"
                        name="choose_sticker_size"
                        ng-model="selectedSize"
                        type="radio"
                        value="{{ size }}" />
                    <span class="fake-radio"></span>
                </span>
                <label for="sticker-{{size}}">{{size}}</label>
                {% endraw %}
        </div>
    </div><!-- end form-group -->
    <div class="clear"></div>
</div>

เมื่อเขียนอย่างชัดเจนฉันไม่เห็นว่า HTML จะเสียเปรียบมากเป็นพิเศษเพื่อรับประกันการเปลี่ยน แน่นอนว่าวงเล็บเหลี่ยมเป็นสิ่งที่น่ารังเกียจ แต่ฉันอยากจะมีพวกเขามากกว่าที่จะต้องรับมือกับความสงสัยของนักออกแบบว่าอินดิเคเตอร์ที่ฉันแนะนำนั้นทำลาย html หรือไม่ (อาจไม่ใช่ แต่การพิสูจน์ว่าไม่ใช่ความพยายามที่คุ้มค่า)


0

ก่อนอื่นคุณต้องมีเทมเพลตฝั่งเซิร์ฟเวอร์เสมอ

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

และในกรณีนี้เทมเพลตมีประโยชน์แม้ว่าบางครั้งผู้คนจะใช้ตัวสร้าง html แบบคงที่เช่น Jekyll แทน


ยังมีอีกเหตุผลหนึ่งในการใช้หยกที่ไม่ได้กล่าวถึงมาก่อน

ช่องว่าง

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

สามารถอ่านรายละเอียดเพิ่มเติมได้ที่นี่: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

หากคุณกำลังเขียนโค้ด Jade จะรวบรวมเป็น HTML บรรทัดเดียวซึ่งไม่มีปัญหานี้


> [FasteRender] ( eorhacks.com/fast-render ) เป็นโซลูชันที่ไม่เกี่ยวข้องกับการแสดงผลฝั่งเซิร์ฟเวอร์ ส่งข้อมูลที่จำเป็นในการแสดงผลหน้าแรกของคุณด้วย HTML เริ่มต้นที่โหลดจาก Meteor ดังนั้นหน้านี้จึงแสดงผลหลังจากที่จาวาสคริปต์โหลดไปยังไคลเอนต์ มันให้ผลลัพธ์ที่เหมือนกันกับการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) แต่ยังคงส่งข้อมูลผ่านสายโดยไม่ทำลายหลักการสำคัญของ Meteor
Max Hodges

0

เมื่อทำงานเป็นทีมส่วนหน้ามักต้องการออกแบบหน้าเว็บเป็น HTML แบบคงที่ การแปล html แบบคงที่เป็นเทมเพลตไดนามิกเป็นที่มาของข้อผิดพลาดและการเพิ่ม Jade จะเพิ่มขั้นตอนการแปลดังกล่าว

เช่นเดียวกับคนอื่น ๆ ฉันชอบความเรียบง่าย!

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.