Статьи

Laconic: новый способ создания контента DOM из JavaScript

Февраль 24, 2019

Контент может быть вставлен в вашу страницу, используя innerHTML или outerHTML… 


var container = document.getElementById("container");
container.innerHTML = "<p>Here's some new <strong>DOM</strong> content.</p>";

(Обратите внимание, что jQuery также использует innerHTML для манипулирования содержимым DOM).

Это быстро и легко — но это не без проблем:

  1. Могут быть вставлены неверные строки HTML, что затрудняет обнаружение и отладку ошибок.
  2. Вы можете столкнуться с проблемами браузера, если попытаетесь выполнить сложные действия, такие как использование или изменение узлов в получающемся содержимом DOM.
  3. Несмотря на хорошую поддержку, innerHTML является проприетарной технологией, а не частью W3C DOM. Это оскорбляет богов стандартов.

Итак, давайте посмотрим на альтернативу на основе DOM: 

 
var newpara = document.createElement("p");
var newstrong = document.createElement("strong");
newstrong.appendChild(document.createTextNode("DOM"));
newpara.appendChild(document.createTextNode("Here's some new "));
newpara.appendChild(newstrong);
newpara.appendChild(document.createTextNode(" content."));

var container = document.getElementById("container");
container.appendChild(newpara);

Насти. Это в три раза дольше, медленнее и все еще подвержено человеческим ошибкам.

Несколько лет назад я разработал собственное решение BetterInnerHTML , которое загружало HTML-строку в виде XML, рекурсивно анализировало структуру и вставляло соответствующие узлы в DOM. Это работало, но я никогда не был полностью доволен производительностью или такими проблемами, как сущности HTML.

К счастью, Джо Стельмах разработал альтернативу. Это небольшая отдельная утилита с именем Laconic, которая использует логическую нотацию JavaScript для непосредственного отображения в HTML, например 

 
$.el.p(
	"Here's some new ",
	$.el.strong("DOM"),
	" content."
).appendTo(document.getElementById("container"));

Атрибуты поддерживаются с помощью литеральной записи объекта: 

 
// produce <div class="example"><div>Content</div></div>
$.el.div(
	{ "class": "example"},
	$.el.div("Content")
);

Мне это нравится. Хотя innerHTML остается лучшим вариантом для быстрой и грязной генерации DOM-контента, Laconic будет полезен в тех странных ситуациях, когда он не работает должным образом.

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

30
Share: