node.js - preprocesador - ¿Se considera una mala práctica usar HTML en Jade?
programacion pug (3)
Jade parece un genial motor de creación de plantillas y creo que lo usaré para mi próximo proyecto. Sin embargo, parte de la sintaxis no tiene sentido para mí.
¿Qué obtienes al hacer esto?
ul
li
a(href="#book-a") Book A
en lugar de:
<ul>
<li><a href="#book-a">Book A</a></li>
</ul>
Entiendo que guardes algo de tipeo, pero me parece menos legible. Noté en la demostración en vivo de Jade que el html regular pasa a través de la traducción. Entonces, ¿se consideraría una mala práctica hacer algo como esto?
<div class="someClass">
<h3> #{book.name} </h3>
</div>
Fondo
En realidad, la sintaxis jade / pug permite HTML sencillo (o cualquier otro texto plano) mediante el uso de 3 sintaxis, como puede ver en la referencia en el sitio del proyecto .
sintaxis punto (también conocido como " Bloquear en una etiqueta ")
ul.
<li><a href="#book-a">Book A</a></li>
<li><a href="#book-b">Book B</a></li>
sintaxis de la tubería (también conocida como " Texto canalizado ")
ul
| <li><a href="#book-a">Book A</a></li>
| <li><a href="#book-b">Book B</a></li>
la sintaxis de la etiqueta (también conocida como " Inline in a Tag "), "Simplemente coloque algo de contenido después de la etiqueta" , también puede hacer el truco
ul
li <a href="#book-a">Book A</a>
que representará
<ul><li><a href="#book-a">Book A</a></li></ul>
La pregunta
De vuelta a tu pregunta, tu muestra
<div class="someClass">
<h3> #{book.name} </h3>
</div>
podría escribirse tan simple como
.someClass
h3= book.name
Creo que es mucho más legible, así que en ese caso deberías considerar una mala práctica para escribir HTML sin formato, pero no siempre.
IMO
OMI, el sentido común es la mejor buena práctica. Tal vez considere usar un fragmento de HTML en bruto para insertar un widget en la página, es decir, un video de youtube o un mapa de google personalizado <iframe>.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&msid=217708588685721440865.0004d1d4faefdd11adf39&ie=UTF8&ll=43.167638,-7.838262&spn=1.010793,0.991384&t=m&output=embed"></iframe>
<iframe width="420" height="315" src="http://www.youtube.com/embed/_Vkm2nMM3-Q" frameborder="0" allowfullscreen></iframe>
Como se dijo anteriormente, aquí no tiene sentido usar la sintaxis del atributo . El resultado es casi el mismo, y es más rápido dejar el html en bruto.
iframe(width="425", height="350", frameborder="0", scrolling="no", marginheight="0", marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&msid=217708588685721440865.0004d1d4faefdd11adf39&ie=UTF8&ll=43.167638,-7.838262&spn=1.010793,0.991384&t=m&output=embed")
iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)
Jade ahora proporciona sintaxis en línea para etiquetas anidadas:
a: img
se convierte en
<a><img/></a>
Tomado de la documentación oficial .
También puede utilizar el siguiente enfoque para usar html simple como motor de visualización.
app.set(''views'', path.join(__dirname, ''/path/to/your/folder''));
app.set("view options", {layout: false});
app.engine(''html'', function(path, opt, fn) {
fs.readFile(path, ''utf-8'', function(error, str) {
if (error)
return str;
return fn(null, str);
});
});