jQuery - Лучшая практика для создания сложных Фрагментов HTML
Существует ли общая лучшая практика для создания несколько сложных элементов HTML в jQuery? Я попробовал несколько различных путей.
Сначала я пытался использовать createElement и объединить много в цепочку createElement вместе с AppendTo и т.п.:
var badge = $(document.createElement("div")).attr("class", "wrapper1").appendTo("body");
$(document.createElement("div")).attr("class", "wrapper2").appendTo(".wrapper1");
$(document.createElement("table")).attr("class", "badgeBody").appendTo(".wrapper2");
$(document.createElement("tr")).attr("class", "row1").appendTo(".badgeBody");
$(document.createElement("td")).appendTo(".row1");
$(document.createElement("span")).attr("class", "badgeUnlocked").text("UNLOCKED! ").appendTo("td");
$(document.createElement("td")).attr("class", "badgeTitleText").appendTo(".row1");
$(document.createElement("span")).attr("class", "badgeTitle").text(name).appendTo(".badgeTitleText");
$(document.createElement("tr")).attr("class", "row2").appendTo(".badgeBody");
$(document.createElement("td")).appendTo(".row2");
$(document.createElement("img")).attr("src", imgUrl).appendTo(".row2 td");
$(document.createElement("td")).attr("class", "badgeText").appendTo(".row2");
$(document.createElement("span")).attr("class", "badgeDescription").text(description).appendTo(".badgeText");
Это может быть грубо, так как appendTo хочет добавить к каждому элементу соответствия, таким образом, всему нужно его собственное имя иначе, он заканчивает тем, что был добавлен неоднократно повсеместно.
Затем я пытался создать массив и присоединиться к нему вместе:
var badgeFragment = [
'<div><div id="'+ closeId+'" class="closeTab">X</div>',
'<div id="'+ badgeId+'" class="wrapper1">',
'<div class="wrapper2">',
'<div class="badgeBody">',
'<div class="badgeImage">',
'<img src="'+ imgUrl +'">',
'</div>',
'<div class="badgeContents">',
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>',
'<div class="badgeTitle">'+ name +'</div>',
'<div id="'+ textId+'" class="badgeDescription">'+ description +'</div>',
'</div>',
'<div style="clear:both"></div>',
'</div></div></div></div></div>',
]
badgeFragment = $(badgeFragment.join(''));
Это, кажется, работает вполне прилично, хотя в IE, когда я поместил бы предупреждение ($ (badgeFragment) .text ()) оно обычно возвращалось пустое. (Это было частью отладки большей проблемы). Я очевидно немного плохо знаком с jQuery (И даже JavaScript действительно) так, чтобы попытаться удостовериться, что это не было проблемой, я попробовал третий метод - гигантская конкатенация строк:
var badgeFragment =
'<div><div id="'+ closeId+'" class="closeTab">X</div>' +
'<div id="'+ badgeId+'" class="wrapper1">' +
'<div class="wrapper2">' +
'<div class="badgeBody">' +
'<div class="badgeImage">' +
'<img src="C:/Users/Ryan/Documents/icons/crystal_project/64x64/apps/chat.png">' +
'</div>' +
'<div class="badgeContents">' +
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>' +
'<div class="badgeTitle">test</div>' +
'<div id="'+ textId+'" class="badgeDescription">test</div>' +
'</div>' +
'<div style="clear:both"></div>' +
'</div></div></div></div></div>';
Один из этих методов обычно считают лучше, чем другие? Я не действительно хорош с различными профилировщиками, таким образом, я не уверен, как проверить это сам. Существует также вопрос как, являются ли все эти методы перекрестным совместимым браузером.
4 ответа
С jQuery 1.4 вы можете создавать HTML-элементы следующим образом:
// create an element with an object literal, defining properties
var e = $("<a />", {
href: "#",
"class": "a-class another-class", // you need to quote "class" since it's a reserved keyword
title: "..."
});
// add the element to the body
$("body").append(e);
Вот ссылка на документацию .
Я не уверен, что этот подход быстрее, чем использование функции html () jQuery. Или быстрее, чем пропускать jQuery вместе и использовать свойство innerHTML для элемента. Но что касается читабельности; jQuery-подход - мой любимый. И в большинстве случаев выигрыш в производительности от использования innerHTML незначителен.
Вам не нужно вызывать document.createElement:
$('#existingContainer').append(
$('<div/>')
.attr("id", "newDiv1")
.addClass("newDiv purple bloated")
.append("<span/>")
.text("hello world")
);
В jQuery есть всевозможные полезные инструменты для расширения / исправления DOM. Посмотрите, например, на различные методы «обертывания».
Другой вариант: для действительно больших капель нового контента вам может быть лучше, если ваш сервер подготовит их (используя систему шаблонов на стороне сервера, что бы это ни было для вас) и загрузит их с помощью $. Load ( ) или какой-либо другой подход с использованием ajax.
Я был бы склонен взглянуть на один из шаблонов для jquery, например jQote
Я лично считаю, что для кода важнее, чтобы его можно было читать и редактировать, а не выполнять. Какой из них вам будет легче смотреть и вносить изменения, не нарушая его, должен быть тот, который вы выберете.