javascript - span - load jquery ejemplo
Manera más clara de construir elementos html en jQuery (9)
He visto muchos estilos diferentes (y pocos métodos diferentes) de crear elementos en jQuery. Tenía curiosidad sobre la forma más clara de construirlos, y también si algún método en particular es objetivamente mejor que otro por cualquier razón. A continuación hay algunos ejemplos de los estilos y métodos que he visto.
var title = "Title";
var content = "Lorem ipsum";
// escaping endlines for a multi-line string
// (aligning the slashes is marginally prettier but can add a lot of whitespace)
var $element1 = $("/
<div><h1>" + title + "</h1>/
<div class=''content''> /
" + content + " /
</div> /
</div> /
");
// all in one
// obviously deficient
var $element2 = $("<div><h1>" + title + "</h1><div class=''content''>" + content + "</div></div>");
// broken on concatenation
var $element3 = $("<div><h1>" +
title +
"</h1><div class=''content''>" +
content +
"</div></div>");
// constructed piecewise
// (I''ve seen this with nested function calls instead of temp variables)
var $element4 = $("<div></div>");
var $title = $("<h1></h1>").html(title);
var $content = $("<div class=''content''></div>").html(content);
$element4.append($title, $content);
$("body").append($element1, $element2, $element3, $element4);
Por favor, siéntase libre de demostrar cualquier otro método / estilo que pueda usar.
Aquí hay un ejemplo que usa $(htmlString) e imita el diseño estándar del código HTML:
function getPage(title, contents) {
return (
$("<div>", {id: "container", class: "box"}).append(
$("<div>", {class: "title"}).append(
$("<h1>").text(title)
),
$("<div>").html(contents)
)
);
}
Después de mirar por un rato, encontré el estilo con el que finalmente me decidí. Primero, diré que usé Moustache para plantillas, y funcionó bien. A veces, sin embargo, solo necesita construir un elemento una vez, sin reutilizarlo, o tiene alguna otra motivación para no traer otra biblioteca. En esta situación, he comenzado a usar:
$("body")
.append(
$("<div>")
.append(
$("<div>")
.append(
$("<h1>" + title + "</h1>")
)
)
.append(
$("<div>" + content + "</div>")
)
);
Esto funciona porque append() devuelve una referencia al objeto que está adjuntando , por lo que los archivos append() adjuntos al mismo objeto. Con una sangría adecuada, la estructura del marcado es obvia, y de esta manera es fácil de modificar. Obviamente, esto es más lento que usar plantillas (todo debe construirse pieza por pieza), pero si solo lo está utilizando para la inicialización o algo similar, entonces es un gran compromiso.
Hay muchas maneras en que uno podría formatear un constructo como este, pero he elegido una forma de aclarar lo que está sucediendo. La regla que utilicé es que debería haber un máximo de un paréntesis de apertura y / o un paréntesis de cierre en cada línea. Además, las hojas de estos árboles de adición no necesitan pasar al constructor jQuery, pero lo he hecho aquí para la repetición visual.
En lo que respecta a la construcción de DOM, trato de evitar las concatenaciones de cadenas, ya que pueden dar lugar a errores sutiles y a una salida no codificada correctamente.
Me gusta este:
$(''<div/>'', {
html: $(''<h1/>'', {
html: title
}).after(
$(''<div/>'', {
''text'': content,
''class'': ''content''
})
)
}).appendTo(''body'');
genera:
...
<div><h1>some title</h1><div class="content">some content</div></div>
</body>
y asegura la codificación HTML adecuada y la creación de árbol DOM con etiquetas de apertura y cierre coincidentes.
Encuentro el enfoque funcional muy conveniente. Por ejemplo
// reusable generics TABLE constructor helpers
var TD = function(content) { return $(''<td>'', { html: content }) }
var TH = function(content) { return $(''<th>'', { html: content }) }
var TR = function(cell, cells) { // note the kind of cell is a 2^order parameter
return $(''<tr>'', { html: $.map(cells, cell) })
}
// application example
THEAD = $(''<thead>'', {html:
TR(TH, [1,2,3,4])})
TBODY = $(''<tbody>'', {html: [
TR(TD, [''a'',''b'',''c'',''d'']),
TR(TD, [''a'',''b'',''c'',''d'']),
]})
ahora la llamada
$(''#table'').append($(''<table>'', {html: [THEAD, TBODY]}))
rendimientos
<table><thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr></tbody></table>
editar
He refinado mi enfoque, ahora disponible, por ejemplo, como html_uty.js
Esto está adaptado de la respuesta de Baer. Lo encuentro más legible, no es necesario crear y unirse a una matriz, no es necesario poner comillas en cada línea:
var html =
'' /
<div> /
<div class="js-alert-box"></div> /
<form id="my-form-to-validate"> /
<input id="login-username" name="login-username"> /
</form> /
</div> /
''
// using jQuery:
//
var dom = $( html )
// or if you need performance, don''t use jQuery
// for the parsing.
// http://jsperf.com/create-dom-innerhtml-vs-jquery
//
var div = document.createElement( ''div'' )
div.innerHTML = html
var dom = $( div )
FYI, cuando el rendimiento no es un problema y los elementos contienen una gran cantidad de datos dinámicos, a veces solo escribo código como este (nótese que el compilador de cierre lanzará una advertencia sobre la propiedad de clase sin comillas, pero en los navegadores modernos esto funciona bien):
$(
''<a></a>''
, {
text : this.fileName
, href : this.fileUrl
, target : ''_blank''
, class : ''file-link''
, appendTo : this.container
}
)
Las plantillas son geniales y si tiene acceso a ellas en su proyecto, le sugiero que las use. Si está utilizando Underscore o Lodash está integrado. Sin embargo, en algunos casos, tendrá que crear HTML en su código, ya sea que esté refactorizando o probando. Descubrí que el formato siguiente es el más claro de leer cuando ese es el requisito.
Nota: La especificación de HTML permite comillas simples o dobles para los atributos en su marcado, así que no se moleste con todos los escapados locos.
this.$fixture = $([
"<div>",
" <div class=''js-alert-box''></div>",
" <form id=''my-form-to-validate''>",
" <input id=''login-username'' name=''login-username''>",
" </form>",
"</div>"
].join("/n"));
Mi consejo: no intentes construir elementos html con jQuery, no es su responsabilidad.
Use un sistema de plantillas Javascript como Mustache o HandlebarJs .
Con un número muy limitado de líneas, puede crear sus elementos html directamente desde un objeto Javascript. No es complicado, solo 2 funciones y una plantilla.
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
var context = {title: "My New Post", body: "This is my first post!"}
var template = Handlebars.compile($("#template-skeleton"));
var html = template(context);
Editar:
Otro ejemplo sin html, Javascript puro (de ICanHaz ):
var skeleton = ''<div><h1>{{title}}</h1><div class="content">{{content}}</div></div>'';
var data = { title: "Some title", content: "Some content" };
var html = Mustache.to_html(skeleton, data);
Es mucho más fácil de mantener que una serie de concatenación.
Podrías mirar en las plantillas de javascript view:
http://jupiterjs.com/news/jquery-view-client-side-templates-for-jquery
Respuesta de 2015 : para navegadores antiguos, use multiline .
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
Para ES6, use cadenas de plantillas de JavaScript
var str = `
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>`