2011-05-23 13 views
31

Después de leer este artículo Micro templates are dead. Me he vuelto curioso:¿Cuáles son los casos de uso de jsdom

  1. Si el uso del DOM en el servidor da como resultado un código más limpio y más fácil de mantener.
  2. Si es más eficiente usar jsdom en lugar de un motor de plantillas.
  3. Cómo factorizar jsdom en la Vista de una configuración MVC estándar.

y en general en qué situaciones sería mejor utilizar una abstracción DOM del lado del servidor, como jsdom en lugar de un motor de plantillas, como EJS o jade.

La pregunta es específica para node.js y otra SSJS

+0

Estos deben ser de 3 preguntas separadas. – mikerobi

+0

@mikerobi ¿tú crees? Puedo refactorizarlos en tres preguntas si eso fuera mejor. – Raynos

+0

¿Se puede ver una vista sin un motor de plantillas? – jcolebrand

Respuesta

12
  1. Es un bonito abstracción que coincide con un lado del cliente ingenieros toman sobre cómo el DOM está construido y modificado. En ese sentido, es "más limpio" porque hay un modelo mental. También es bueno porque no tenemos que mezclar un sinfín de sintaxis dispares de un lenguaje de plantillas además de un marcado declarativo limpio como es el caso incluso con el sistema de plantillas más "estúpido", como el bigote.

  2. Yo NO diría que es más eficiente usar jsdom para plantillas. Ve a echar un vistazo a google wrt para 'pérdidas de memoria con jsdom', por ejemplo. jsdom es radical, y es súper útil para tareas como proyectos de fin de semana para rastrear sitios, realizar tareas no relacionadas con el servidor, pero creo que es lento como una mierda desde una perspectiva de servidor web de alto rendimiento.

  3. Hay mil millones de formas de factorizar esto. Ningún método ha surgido como una forma "estándar". Una forma que he visto es enviar una 'plantilla' vacía, es decir, un bloque de html que representa un modelo de alguna manera, y luego usar eso para arrancar la construcción de su vista final desde un modelo. A partir de ese artículo, por ejemplo:


<li class="contact" id="contact-template"> 
    <span class="name"></span> 
    <p class="title"></p> 
</li> 

Esta es la 'vista' en el sentido clásico.En la aplicación web típica, que podría ser algo más como:

<li class="contact"> 
    <span class="name"><?= $name ?></span> 
    <p class="title"><?= $title ?></p> 
</li> 

Para utilizar MVC, se propone un controlador que es vagamente consciente de la semántica de la opinión anterior y el modelo que representa. Esta vista se analiza en/a DOM y se accede a través de su motor de selección favorito. Cada vez que el modelo que esto representa cambia, puede usar cambios de eventos o devoluciones de llamada para actualizar la vista. Por ejemplo:

Imaginemos que el 'modelo' dispara un evento de 'cambio' cada vez que cambia una propiedad.

controller = new Controller({ 
    view: $('#contact-template').clone(), // Assume jquery or whatever 
    model: aContact 
}); 

// Assume some initialization that sets the view up for the first time 
// and appends it to the appropriate place. A la: 
// this.view.find('.name').text(model.name); 
// this.view.find('.title').text(model.title); 
// this.view.appendTo('#contacts') 

controller.on('model.name.change', function(name){ 
    this.view.find('.name').text(name); 
}); 

Estos son los sistemas que Weld y Backbone.js hacen por ti. Todos tienen diferentes grados de suposiciones sobre dónde se está llevando a cabo este trabajo (lado del servidor, lado del cliente), qué marco está usando (jquery, mootools, etc.) y cómo se están distribuyendo sus cambios (REST, socket. io, etc.)

Editar

Algunas cosas realmente útiles que puede hacer con jsdom giran en torno a las pruebas de integración y rastreo:

Personalmente, me gustaría ver un proyecto que tomó el enfoque de Tobi, pero mapeados en la parte superior de algo así como https://github.com/LearnBoost/soda tal que podemos hacer pruebas de selenio basado en la nube sin Selenese (ya que imo, es una mierda).

11

Bueno, en realidad necesitaba JSDom para un proyecto pequeño he construido durante el fin de semana en node.js. Por lo tanto, en mi servidor, tuve que aceptar una URL para recuperar, tomar todo el HTML de la URL determinada, analizarlo y mostrar imágenes al usuario para que el usuario pudiera seleccionar una miniatura de esa URL. (Algo así como cuando sueltas un enlace en el cuadro de entrada de Facebook) Entonces, utilicé un módulo llamado Solicitud que me permite buscar HTML en el lado del servidor. Sin embargo, cuando ese HTML llegó a mi programa, no tuve forma de recorrerlo como lo hace con javascript en el lado del cliente. Como no había un DOM real, no pude decir document.getElementById('someId'). Por lo tanto, JSDom fue útil al darme un DOM "improvisado" que me permitió atravesar el HTML devuelto. Ahora, aunque todavía estaba en el lado del servidor, JSDOM creó un objeto window muy similar al objeto de ventana en el navegador, y creó un DOM a partir del HTML devuelto. Ahora, incluso en el servidor, pude obtener todas las imágenes llamando al window.$('img'). Podría apuntar y analizar los elementos como normal. Entonces, este es solo un problema donde JSDom resultó ser la solución, pero funcionó increíblemente bien. Espero que esto ayude a algunos!

+2

Ese es un contexto diferente. Si desea manipular el HTML que carga desde una fuente externa, entonces jsDOM es muy útil. Pero quiero usar jsDOM para manipular la fuente HTML I que controlo. Y sí, jsDOM es muy útil para manipular HTML externo no controlado de manera familiar. – Raynos

1

Algunos vienen a la mente:

  1. compartir puntos de vista/controladores entre el servidor y el navegador
  2. La minería de datos/rastreo/procesamiento
  3. transformación de fragmentos de HTML que se utiliza en la materia AJAX/tiempo real
  4. Separación absoluta de la lógica y el contenido al evitar etiquetas de plantilla

Y para responder a su pregunta ciones:

  1. quizás. Muchas cosas afectan la calidad del código, pero es un paso en la dirección correcta
  2. no, los motores de plantillas siempre serán más rápidos, ya que pueden precompilar las plantillas
  3. ¿probablemente esto requiere una nueva pregunta?
1

el punto 2 de su pregunta puede ser respondida por este caso de prueba de plantillas:

ir http://jsperf.com/dom-vs-innerhtml-based-templating/300

  • haga clic en el botón "Ejecutar pruebas".

  • ser paciente, se compara frente a la soldadura mucho de otros motores de plantilla y le da los puntos de referencia actuales ...

Cuestiones relacionadas