在Jade中使用HTML被认为是不好的做法吗?

n0p*_*0pe 35 template-engine node.js express pug

Jade看起来像一个很酷的模板引擎,我想我会在下一个项目中使用它.但是,一些语法对我来说没有意义.

这样做你得到了什么:

ul
  li
    a(href="#book-a") Book A 
Run Code Online (Sandbox Code Playgroud)

代替:

<ul>
  <li><a href="#book-a">Book A</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我理解你节省了一些打字,但对我来说似乎不太可读.我注意到在Jade的现场演示中,常规html直接通过翻译.那么做这样的事情会被认为是不好的做法:

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>
Run Code Online (Sandbox Code Playgroud)

lac*_*ass 76

背景

实际上,jade/pug语法通过使用3种语法允许纯HTML(或任何其他纯文本),正如您在项目网站上的参考中所看到的那样.

点语法(也称为" 标记中的块 ")

ul.
  <li><a href="#book-a">Book A</a></li>
  <li><a href="#book-b">Book B</a></li>
Run Code Online (Sandbox Code Playgroud)

管道语法(也称为" 管道文本 ")

ul
  | <li><a href="#book-a">Book A</a></li>
  | <li><a href="#book-b">Book B</a></li>
Run Code Online (Sandbox Code Playgroud)

标签语法(也称为" 标签中的内联 "),"只需在标签后放置一些内容",也可以做到这一点

ul
  li <a href="#book-a">Book A</a>
Run Code Online (Sandbox Code Playgroud)

这将呈现

<ul><li><a href="#book-a">Book A</a></li></ul>
Run Code Online (Sandbox Code Playgroud)

问题

回到你的问题,你的样本

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>
Run Code Online (Sandbox Code Playgroud)

可写得很简单

.someClass
  h3= book.name
Run Code Online (Sandbox Code Playgroud)

我认为哪个更具可读性,所以在这种情况下你应该考虑编写原始HTML的不良做法,但并非总是如此.

IMO

IMO,常识是最好的做法.也许我会考虑使用一大块HTML来在页面上插入一个小部件,即YouTube视频或自定义谷歌地图<iframe>.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed"></iframe>

<iframe width="420" height="315" src="http://www.youtube.com/embed/_Vkm2nMM3-Q" frameborder="0" allowfullscreen></iframe>
Run Code Online (Sandbox Code Playgroud)

如上所述,使用属性语法没有意义.结果几乎相同,并且离开原始html更快.

iframe(width="425", height="350", frameborder="0", scrolling="no", marginheight="0", marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed")

iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)
Run Code Online (Sandbox Code Playgroud)


Nel*_*nim 7

Jade现在为嵌套标签提供内联语法:

a: img
Run Code Online (Sandbox Code Playgroud)

变成

<a><img/></a>
Run Code Online (Sandbox Code Playgroud)

取自官方文档.