Есть ли лучшая практика для генерации HTML с JavaScript
5 ответов
Опции № 1 и № 2 будут Вашим большинством непосредственных прямых опций, однако, для обеих опций, Вы собираетесь чувствовать влияние производительности и обслуживания или создающими строками или создающий Объекты DOM.
Шаблонная обработка не все, что незрелый, и Вы видите, что он открывает в большинстве главных платформ JavaScript.
Вот пример в Шаблонный Плагин JQuery , который сохранит Вас хит производительности и является действительно, действительно прост:
var t = $.template('<div><img src="${url}" />${name}</div>');
$(selector).append( t , {
url: jsonObj.url,
name: jsonObj.name
});
я говорю, идут прохладным путем (и лучшее выполнение, более удобное в сопровождении), и шаблонная обработка использования.
Если абсолютно необходимо связать строки вместо нормального:
var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }
используют временный массив:
var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");
Используя массивы намного быстрее, особенно в IE. Я сделал некоторое тестирование со строками только что с IE7, Opera, и И следующие Opera занял только 0,4 с для выполнения теста, но IE7 не закончился после 20 МИНУТ!!!! (Нет, я не шучу.) С массивом IE был очень быстр.
Любая из первых двух опций и распространена и приемлема.
я дам примеры каждого в Прототип .
// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }
Подход № 1:
var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom
Подход № 2:
var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom
Вот пример, с помощью моего Простые Шаблоны плагин для jQuery:
var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
classname : 'my-class',
content : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);
Вы могли добавить шаблон HTML к своей странице в скрытом отделении и затем использовать cloneNode и запросы Вашей любимой библиотеки средств для заполнения его
/* CSS */
.template {display:none;}
<!--HTML-->
<div class="template">
<div class="container">
<h1></h1>
<img src="" alt="" />
</div>
</div>
/*Javascript (using Prototype)*/
var copy = $(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})