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 หรือไม่ (อาจไม่ใช่ แต่การพิสูจน์ว่าไม่ใช่ความพยายามที่คุ้มค่า)