Хорошая практика написания HTML в Javascript

Мне было интересно об этом, если бы у людей были сильные взгляды на лучший способ генерации HTML на лету, особенно с приложениями на основе Ajax.

Вы просто создаете HTML-код, используя скрипты на стороне сервера, а затем отправляете его на страницу или просто возвращаете строку JSON и позволяете Javascript выполнять эту работу.

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

Я думал использовать систему шаблонов Javascript как еще один слой, чтобы сделать код более надежным и менее жестким. У кого-нибудь есть хорошие идеи о легкой и действительно хорошей системе шаблонов JS?

Ответы

Ответ 2

Я тоже предпочитаю ответ JSON с логикой создания HTML на стороне клиента.

К сожалению, большинство сценариев написания HTML на стороне клиента на самом деле сломаны, что содержит многие недостатки HTML-инъекций, которые могут легко стать сквозными дырами в области безопасности. Я считаю, что убеждение состоит в том, что, поскольку вы разговариваете со своим собственным сервером, а не напрямую с враждебным пользователем, вы как-то "безопасны" и можете без преувеличения сверяться, когда они интерполируют их в HTML. Это, конечно, нонсенс.

Я всегда вижу такие вещи, как:

$('#mydiv').append('<em>Deleted '+response.title+'!</em>');

или

mydiv.innerHTML= '<p>Renamed to '+response.name+'</p>;

или действительно Resig microtemplating hack, где по умолчанию не выполняется HTML-экранирование. Пошли, люди! Мы только начали очищать наследие сломанных PHP-скриптов, обслуживающих серверную XSS, теперь вы хотите ввести совершенно новый массивный массив эксплойтов на стороне клиента на стороне клиента?

Вздох. Это Приманка Строков. Мы думаем, что понимаем их и можем слить их вместе волей-неволей. Но струны коварны, со скрытыми контекстами и сдерживают требования. Если вы должны сгенерировать HTML на стороне клиента, вам понадобится такая функция:

function h(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
}

mydiv.innerHTML= '<p>Renamed to '+h(response.name)+'</p>;

Но лично я предпочитаю методы DOM. Как и с параметризацией для SQL, использование DOM-методов приводит к вытеснению строк из уравнения, когда речь идет о необработанных строках непосредственно к компонентам, которые будут их потреблять. Хорошо, проблема с DOM заключается в том, что он довольно подробный:

var p= document.createElement('p');
p.appendChild(document.createTextNode('Renamed to '+response.name))
mydiv.appendChild(p);

Но вы всегда можете определить вспомогательные функции, чтобы сократить это, например:

mydiv.appendChild(makeElement('p', {}, 'Renamed to'+response.name));

(Новые элементы создания элементов в jQuery 1.4 используют похожий стиль.)

Ответ 3

+1 год назад мы начали новое веб-приложение и нуждались в способе рендеринга HTML из данных JSON в браузере.
Мы хотели, чтобы это было так же быстро, как преобразование XML/XSLT.

Наш ответ на это был механизм шаблонов JS PURE.

В отличие от большинства шаблонов шаблонов JS вокруг, он сохраняет HTML нетронутым (никаких странных тегов вообще) и, за исключением нескольких обозначений, он не выводит новый язык для изучения только JS и HTML.

Как я его использую:

  • Создайте статический HTML непосредственно на странице
  • Затем добавьте логику JS шаг за шагом, и HTML станет активным постепенно
  • Как только вы привыкнете к этому, как HTML, так и JS могут иметь безопасную отдельную жизнь разработки и могут быть разделены между дизайнером и заданием разработчика JS.

Ответ 4

У нас была система, в которой большое количество данных передавалось как JSON с сервера, а затем обрабатывалось с помощью механизма шаблонов javascript на стороне клиента. В .Net 4.0 (возможно, даже 3.5 sp1, я не уверен) это можно сделать, используя Клиентские шаблоны.

Я предпочел бы передавать JSON поверх отправки html. Его всегда удобно хранить данные и просматривать отдельно.

Ответ 5

Если вы хотите сохранить структуру MVC, вы должны позволить шаблону создавать шаблоны. AJAX должен выполнять только запрос сервера, который выполняет всю БД и бизнес-логику, а затем возвращает URL-адрес шаблону, который должен быть загружен.