Методы, чтобы избежать создания HTML-строк в JavaScript?
Очень часто я сталкиваюсь с ситуацией, в которой я хочу изменить или даже вставить целые блоки HTML в страницу с использованием JavaScript. Обычно это также связано с изменением нескольких частей HTML динамически в зависимости от определенных параметров.
Однако он может сделать для беспорядочного/нечитаемого кода, и просто не кажется правильным, чтобы эти маленькие фрагменты HTML в моем JavaScript-коде, черт возьми.
Итак, каковы некоторые из ваших методов, чтобы избежать смешивания HTML и JavaScript?
Ответы
Ответ 1
Инструментарий Dojo имеет весьма полезную систему для обработки фрагментов/шаблонов HTML. Скажем, фрагмент HTML mycode/mysnippet.tpl.html
выглядит следующим образом:
<div>
<span dojoAttachPoint="foo"></span>
</div>
Обратите внимание на атрибут dojoAttachPoint. Затем вы можете сделать виджет mycode/mysnippet.js
с помощью фрагмента HTML в качестве его шаблона:
dojo.declare("mycode.mysnippet", [dijit._Widget, dijit._Templated], {
templateString: dojo.cache("mycode", "mysnippet.tpl.html"),
construct: function(bar){
this.bar = bar;
},
buildRendering: function() {
this.inherited(arguments);
this.foo.innerHTML = this.bar;
}
});
Элементы HTML, указанные атрибутами точек присоединения, станут членами класса в коде виджета. Затем вы можете использовать шаблонный виджет так:
new mycode.mysnippet("A cup of tea would restore my normality.").placeAt(someOtherDomElement);
Хорошей особенностью является то, что если вы используете систему сборки dojo.cache
и Dojo, она вставляет текст шаблона HTML в код javascript, так что клиенту не нужно делать отдельный запрос.
Это, конечно, может быть слишком раздутым для вашего случая использования, но я считаю это весьма полезным - и, поскольку вы попросили методы, там мои. На сайте сайта есть хорошая статья.
Ответ 2
Существует много возможных методов. Возможно, наиболее очевидным является наличие всех элементов на странице, но их hidden
- тогда ваш JS может просто отобразить их/показать их по мере необходимости. Это может быть невозможно, хотя в определенных ситуациях. Что делать, если вам нужно добавить число (неуказанное) дубликатов элементов (или групп элементов)? Тогда, возможно, есть элементы, о которых идет речь hidden
, и используя что-то вроде jQuery clone, вставьте их как требуется в DOM.
Альтернативно, если вам действительно нужно создавать HTML "на лету", то определенно сделайте свой собственный класс обработанным, чтобы у вас не было фрагментов, разбросанных по вашему коду. Вы можете использовать jquery-литеральные создатели, чтобы помочь в этом.
Ответ 3
Я не уверен, что он квалифицируется как "метод", но я обычно стараюсь избегать построения блоков HTML в JavaScript, просто загружая соответствующие блоки из внешнего блока через AJAX и используя JavaScript для их замены и внесите/поместите их по мере необходимости. (то есть: ни одно из низкоуровневых перетасовки текста не выполняется в JavaScript - просто манипуляция с DOM.)
Несмотря на то, что вы, конечно же, должны учитывать это во время проектирования внутренней архитектуры, я не могу не думать о том, чтобы привести к созданию более чистой настройки.
Ответ 4
Иногда я использую собственный метод для возврата структуры node на основе предоставленных аргументов JSON и добавляю это возвращаемое значение в DOM по мере необходимости. Он недоступен, если JS недоступен, как некоторые бэкэнд-решения могут быть.
Ответ 5
После прочтения некоторых ответов мне удалось создать собственное решение с использованием Python/Django и jQuery.
У меня есть фрагмент HTML как шаблон Django:
<div class="marker_info">
<p> _info_ </p>
<a href="{% url index %}"> more info... </a>
</div>
В представлении я использую метод Django render_to_string для загрузки шаблонов в виде строк, хранящихся в словаре:
snippets = { 'marker_info': render_to_string('templates/marker_info_snippet.html')}
Хорошая часть этого вопроса я могу использовать теги шаблонов, например, функцию url
. Я использую simplejson
, чтобы выгрузить его как JSON и передать его в полный шаблон. Я все еще хотел динамически заменить строки в JavaScript-коде, поэтому я написал функцию для замены слов, окруженных символами подчеркивания, с моими собственными переменными:
function render_snippet(snippet, dict) {
for (var key in dict)
{
var regex = new RegExp('_' + key + '_', 'gi');
snippet = snippet.replace(regex, dict[key]);
}
return snippet;
}