veo a la gente creando elementos HTML en jQuery de dos maneras diferentes:
$('<element>')
y
$('<element />')
Tengo curiosidad por lo que uno es "más correcto". Veo la ventaja obvia de la primera como simplemente ser menos para escribir. ¿Hace una diferencia en absoluto cuál se usa?
No hay ninguna diferencia, como se ve en el código fuente, line 30 & line 121:
/* Line 30*/
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
/* Line 121 */
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec(selector);
Los siguientes son equivalentes :
<a></a><a /><a>Cuando estaba escribiendo esta pregunta, estaba pensando que podía resolverlo solo mirando el código fuente. Aprecio que hagas referencia al código directamente en tu respuesta. – GoldenNewby
Entonces, no hay diferencia ** siempre y cuando no tenga atributos ** en la declaración de creación. Si cambia el código a '$ ('')', el navegador .innerHTML de cualquier persona lo analizará. –
No, no hace ninguna diferencia, siempre y cuando la definición del elemento esté bien formada. El segundo estilo es simplemente an alternate syntax que puede en realidad guardar teclas:
$('<a href="herp.derp.com/sherp"/>'); // XML-like syntax
$('<a href="herp.derp.com/sherp"></a>'); // Well-formed HTML
$('<a href="herp.derp.com/sherp">'); // Malformed (no closing tag)
Ese es un punto interesante acerca de cómo en esa aplicación guarda las pulsaciones de teclas. Siempre había estado usando .attr para configurar el href. – GoldenNewby
Es un ejemplo tonto, cierto, pero hay casos reales en los que usar la sintaxis XML equivale a menos tipeo. –
Un elemento taquigrafía <element /> requiere una barra debido a que su sustitución <element> </element>. Así que escribiría eso cuando sea apropiado por el bien de un marcado válido. Pero no se requiere que sea de una manera u otra.
Editado: este no es realmente el problema. otros aquí parecen coincidir en que es una cuestión de rendimiento de expresiones regulares
Realmente no tiene nada que ver con el marcado válido. Son más los patrones que las búsquedas de expresiones regulares de jQuery determinan si un elemento vacío está destinado, lo que hará que jQuery use 'document.createElement()'. Si se agrega algo más, se usará '.innerHTML' y la validez será más importante. –
@amnotiam oh ya veo.Estoy corregido. – Kristian
Técnicamente $('<element></element>') es más correcto, ya que las etiquetas de cierre automático utilizando / fue eliminado en HTML5, sin embargo, no hace absolutamente ninguna diferencia, porque esa declaración se analiza por jQuery. En todo caso, simplemente usando $('<element>')podría ser en realidad un poco más rápido, porque es menos caracteres para leer. Que debería saltear algunas condiciones Regex también.
Mejor aún, si usted está buscando la manera más rápida posible usando jQuery:
var temp = new jQuery.fn.init();
temp[0] = document.createElement('element');
temp.length = 1;
Esta versión es más rápida, ya que se salta jQuery() que envuelve "nueva jQuery.fn.init()" y no pasa argumentos para que devuelva inmediatamente un nuevo objeto jQuery. Se saltea muchas condiciones y declaraciones a prueba de fallas, que son innecesarias si ya sabes exactamente lo que estás tratando de hacer.
o ligeramente más corto:
var temp = $(document.createElement('element'));
Esta versión es un poco más lento, pero mucho más fácil de leer, y un montón más limpio. Todavía omite una gran parte del código utilizado para analizar el, lo que sería una cadena que se pasa. En cambio, jQuery puede saber automáticamente que estamos trabajando con un nodo aquí.
Referencia
HTML5 Does NOT Allow “Self-Closing” Tags
Google: html5 self closing tags
jsperf
Ninguna versión de HTML antes de HTML5 tenía etiquetas de cierre automático. [Son válidos en HTML5] (http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) pero no hace diferencia para los elementos vacíos. –
Esto es lo que el jQuery docs decir al respecto:
Para asegurar la compatibilidad entre plataformas, debe estar bien formado el fragmento. Etiquetas que pueden contener otros elementos deben ser emparejados con una etiqueta de cierre:
$('<a href="http://jquery.com"></a>');Alternativamente, jQuery permite sintaxis de las etiquetas XML-como (con o sin un espacio antes de la barra):
$('<a/>');Etiquetas que no pueden contener elementos pueden ser rápida-cerrados o no:
$('<img />');$('<input>');
Ver esta pregunta, sin embargo, en lo que es más eficiente:
What is the most efficient way to create HTML elements using jQuery?
Corrí tanto de los de jsperf y encontré diferencias mínimas entre los dos para el rendimiento, por lo que supongamos que terminaría siendo una cuestión de preferencia, y qué elemento estás creando. A lo que recomendaría ejecutar más pruebas en jsperf.
jsperf FAQ: http://jsperf.com/faq
resultado final: jsperf test
y por qué no puedes usar 'document.createElement ('elemento')'? ¿Hay alguna ley que te obligue a escribir el código más lento posible? –
@ tereško A menos que haya evaluado que este código es un cuello de botella en su aplicación, el rendimiento no debería ser el factor principal en esta elección. Espero que la diferencia de rendimiento solo sea relevante en bucles estrechos. Pero más bien claridad y consistencia del código. Si usa jquery en la mayoría de los lugares, no hay ninguna razón para usar DOM aquí, y si usa principalmente DOM, no hay ninguna razón para usar jquery para esto. – CodesInChaos
@ tereško +1 ... costo de creación de objetos + costo de análisis de cadenas + costo de muchas condiciones + costo de diseño loco patrón = factura jQuery. – Shea