Есть ли лучшая практика для генерации HTML с помощью JavaScript

StackOverflow https://stackoverflow.com/questions/220603

Вопрос

Я вызываю веб-сервис, который возвращает массив объектов в формате JSON. Я хочу взять эти объекты и заполнить div с HTML. Допустим, каждый объект содержит URL-адрес и имя.

Если бы я хотел создать следующий HTML-код для каждого объекта: 

<div><img src="the url" />the name</div>

Есть ли лучшая практика для этого? Я вижу несколько способов сделать это:

<Ол>
  • Конкатенация строк
  • Создать элементы
  • Используйте плагин для шаблонов
  • Создайте html на сервере, а затем подайте его через JSON.
    • Это было полезно?

    Решение

    Параметры # 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 и FF. 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);

    Возможно, более современный подход заключается в использовании языка шаблонов, такого как Усы , в котором есть реализации на многих языках, включая JavaScript. Например: 

    var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);

    Вы даже получаете дополнительное преимущество - вы можете повторно использовать те же шаблоны в других местах, например на стороне сервера.

    Если вам нужны более сложные шаблоны (например, операторы, циклы и т. д.), вы можете использовать Handlebars , который имеет больше функции, и совместим с усами.

    Вы можете добавить шаблон HTML на свою страницу в скрытом элементе div, а затем использовать 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*/})

    Раскрытие информации: я ведущий BOB.

    Существует библиотека javascript, которая значительно упрощает этот процесс и называется BOB .

    Для вашего конкретного примера: 

    <div><img src="the url" />the name</div>

    Это можно сгенерировать с помощью BOB с помощью следующего кода. 

    new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"

    Или с более коротким синтаксисом 

    new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"

    Эта библиотека довольно мощная и может использоваться для создания очень сложных структур со вставкой данных (аналогично d3), например: 

    data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"

    BOB в настоящее время не поддерживает внедрение данных в DOM. Это на Todolist. На данный момент вы можете просто использовать вывод вместе с обычным JS или jQuery и поместить его в любое место. 

    document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());
    <Ч>

    Я создал эту библиотеку, потому что меня не порадовала ни одна из альтернатив, таких как jquery и d3. Код очень сложный и трудный для чтения. Работа с BOB, на мой взгляд, явно предвзята, намного приятнее.

    BOB доступен на Bower , поэтому вы можете получить его, запустив bower install BOB .

      

    Есть ли лучшая практика для этого? Я вижу несколько способов сделать это:

         <Ол>   
  • Конкатенация строк
    •   
  • Создать элементы
    •   
  • Используйте плагин для шаблонов
    •   
  • Создайте html на сервере, а затем подайте его через JSON.
    •   

    1) . Это вариант. Создайте HTML-код с помощью JavaScript на стороне клиента, а затем вставьте его в DOM в целом.

    Обратите внимание, что за этим подходом стоит парадигма: сервер выводит только данные и (в случае взаимодействия) получает данные от клиента асинхронно с запросами AJAX. Код на стороне клиента работает как автономное веб-приложение JavaScript.

    Веб-приложение может работать, отображать интерфейс, даже если сервер не работает (конечно, оно не будет отображать какие-либо данные или предлагать какое-либо взаимодействие).

    В последнее время эта парадигма часто применяется, и вокруг этого подхода строятся целые фреймворки (см., например, backbone.js).

    2) По соображениям производительности, когда это возможно, лучше встроить HTML-код в строку, а затем внедрить его целиком в страницу.

    3) . Это еще один вариант, а также использование инфраструктуры веб-приложений. Другие пользователи опубликовали различные доступные движки шаблонов. У меня сложилось впечатление, что у вас есть навыки, чтобы оценить их и решить, следовать ли этому пути или нет.

    4) Другой вариант. Но подайте это как простой текст / html; почему JSON? Мне не нравится этот подход, потому что смешивает PHP (ваш серверный язык) с Html. Но я часто принимаю это как разумный компромисс между опцией 1 и 4 .

    <Ч>

    Мой ответ: вы уже смотрите в правильном направлении.

    Я предлагаю принять подход между 1 и 4 , как я. В противном случае выберите веб-фреймворк или шаблонизатор.

    Просто мое мнение, основанное на моем опыте ...

    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top