Как лучше оформить HTML код в javascript?

Question

[vinni-puh]

Суть проблемы: есть много ajax-запросов, которые получают данные для отображения на странице. Соответственно для отображения этих данных в js-коде приходится использовать много html-кода и вставлять его потом на страницу. Возникают сомнения что так делать эстетически правильно. Подскажите пожалуйста как поступают гуру в подобных ситуациях, куда смотреть чтобы разрулить данные сомнения. Спасибо.

Answer 1

[Константин Китманов]

Где вы были последние 4 года?) Шаблонизаторы. moustache, _.template, Jade, тысячи их.
Сами шаблоны либо предварительно компилять, либо отдавать прямо в составе изначальной страницы в тэгах

Comments

[vinni-puh]

ну программирую я относительно недавно, потому и спросил как сделать лучше. Спасибо изучу указанные Вами инструменты.

Answer 2

[Алексей Lepshiz]

ТС, возможно, не совсем понимается суть шаблонизации, в этом случае можно почитать статейки:
learn.javascript.ru/templates
noteskeeper.ru/735

Самих Js шаблонизаторов много, выбирайте что вам больше подходит
habrahabr.ru/post/219873

Если все-таки нужно захардкодить в js html код, то лучше конечно сохранять форматирование для девелопмента:

var SOME_TPL = '<div class="b-something">' + 
                               '<span>' + someTextValue +'</span>' + 
                           '</div>';

var SOME_TPL = [
                           '<div class="b-something">',
                                '<span>' + someTextValue +'</span>',
                           '</div>'
                           ].join('');

Но хранение шаблонов в html или подгрузка по необходимости, в большинстве случаев, лучшее решение.

Answer 3

[XpeH Петрович]

помимо всего прочего никто не мешает вам использовать json/xml собственно для передачи данных, ну и либо, как подсказали товарищи выше, использовать шаблонизаторы (или либы наподобие D3, там много чего веселого есть), либо писать самому функции для обработки данных и преобразования их в html-код. вообще, не желательно передавать верстку в виде текста, это грузит траффик и всякие ваши там ухищрения и всякие mod_deflate мало помогут на нормальном продакшене - передавайте данные, а верстку сгрузите на клиента (в разумных пределах).

Comments

[vinni-puh]

да, сервер и возвращает json-данные (как Вы верно заметили отдавать верстку - это не есть хорошо). Да, думаю именно шаблонизаторы - это верный для меня путь.

Answer 4

[Александр С]

Не очень понятно. Имеете ввиду что хотите вынести формирование html из java script кода, т.е перенести/упростить логику формирования html фрагментов.Если так то попробуйте использовать java script шаблонизаторы.
Например Handlebars.

Comments

[vinni-puh]

да, именно это и имелось в виду. Спасибо.

Answer 5

[Рустамка Воронцов]

/param.php
<b>Код</b>

$.ajax({'url': '/param.php', 'success':function(data) { alert(data); }}); //<b>Код</b>

???

Answer 6

[ugodrus]

Если набор данных представляет собой простой массив (ключ - значение) то есть простой способ.

template.replace( /{{([\w]+)}}/gim, ( function() { return ( data[arguments[1]] )? data[arguments[1]] : '' ; } ) )

Делал такую мульку для форматирования infoWindow карт Google. Не скажу что это круто, но с поставленной задачей эта строчка справляется на ура.