Как правильно (красиво) вставлять html-код в js?

Question

[urfinjazz]

Всем привет!
После ajax-запроса возвращаются некоторые данные, назовём их data. Нужно вставить html-блок с этими данными в javascript-файле. Всегда делал это так:

var html ="<div id='"+data+"' class='"+data+"'>" +
	"<input value='"+data+"' data-value='"+data+"'>" +
	"<input value='"+data+"' data-value='"+data+"'>" +
	"<input value='"+data+"' data-value='"+data+"'>" +
	"</div>";
$('#id').append(html);

Но! А если html-блок занимает 100 строк кода? Будет ли это правильно (красиво)?
У меня есть подозрение, что получается г-код.
Кто как делает? Есть ли вообще рекомендации оформления javascript-кода, как например есть они для PHP?

Спасибо!

Answer 1

[Dmitriy Mozgovoy]

Вы не одиноки, кому так кажется (Как грамотно и быстро превратить Json строку в HTML структуру?)
Для этого есть шаблонизаторы.

Comments

[urfinjazz]

спасибо, буду смотреть в сторону Handlebars

[vasIvas]

Скажите, а это шаблонизаторы для рендера в браузере? Я это к тому, что я использовал jade на сервере с нодой. А сейчас увидел его в списке, который вроде бы для рендера в браузере.. jade можно использовать ещё и в браузере?

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

vasIvas: jade можно прекомпилировать на сервере для использования потом в браузере. Вроде можно и на клиенте, но вроде неполная совместимость.

[Dmitriy Mozgovoy]

vasIvas: да jade работает и на клинской стороне. Вообще вряд ли есть серверный шаблонизатор, который нельзя использовать на клиенте=)

[vasIvas]

Константин Китманов: Дмитрий Brain: а можете посоветовать "лучшее" для рендера на клиенте?

[Dmitriy Mozgovoy]

vasIvas: абсолютного лидера вообщем то нет, шаблонизатор всегда компромисс как минимум между производительностью, гибкостью и сложностью. На клиенте я предпочитаю либо doT либо Handlebars, мне важна производительность, поэтому выбрал шаблонизатор с предкомпеляцией и без излишеств.

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

vasIvas: вопрос вкуса и компромиссов между скоростью/фичами. Я вот остановил свой выбор на Jade, он красивый, компактный синтаксический, и мощный — наследование, партиалы, расширяемость, вот это все.

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

Дмитрий Brain: предкомпиляция в любом случае снимает вопрос производительности, не?

[Dmitriy Mozgovoy]

Константин Китманов: с предкомпиляцией естественно производительнее.

[vasIvas]

Константин Китманов: Дмитрий Brain: спасибо!

Answer 2

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

Кто как делает? Есть ли вообще рекомендации оформления javascript-кода, как например есть они для PHP?

Единого, к сожалению, нету, есть куча от разных компаний и организаций разной степени консистентности и адекватности, выбирайте: https://www.google.com/search?q=js+style+guide

По существу предыдущий оратор ответил правильно, нужен шаблонизатор.

Answer 3

[trevoga_su]

выскажу свое имхо
в JS не должно быть никакого html-кода
html надо хранить в html и показывать/скрывать на основе классов
в крайнем случае - генерировать структуру через dom

Comments

[urfinjazz]

1 как html показывать/скрывать, если нужно каждый раз генерировать уникальное наполнение?
2 что имеется ввиду - генерировать структуру через dom? можно на примере?

[trevoga_su]

Сергей Сергеев: 100 лет н ебанил, а тут забанит. С чего это вдруг?