Нет сомнений в том, что React - потрясающий фреймворк. Когда я впервые начал изучать JSX, уникальный способ отрисовки HTML-элементов в документе в React, меня это оттолкнуло. Я только что привык к рендерингу элементов с помощью чистого JavaScript с помощью метода, который, я уверен, все мы знаем:
пусть myDiv = document.createElement (‘div’);
myDiv.innerText = «эй, это мой div!»;
myDiv.classList.add («myDiv»);
document.body.appendChild (myDiv);
Я наивно думал, что это лучшее решение. В то время я не мог понять, насколько быстрыми были компоненты React, основанные на компонентах. Через неделю использования React я влюбился. Я уже оценил написание собственных функций для рендеринга всех моих любимых элементов на странице, чтобы попытаться ускорить неуклюжую методологию чистого JavaScript, а компоненты React значительно ускоряют этот процесс.
Но React - не всегда решение. React добавляет веса вашему проекту, и этого может быть много для статической страницы или простого веб-приложения. Иногда лучший вариант - обычный старый JavaScript. Но переход от компонентов React к старому способу рендеринга элементов с помощью JavaScript - это, мягко говоря, печальный опыт. Должен быть способ получше!
И есть! Мы можем преобразовывать строки в узлы HTML, используя
document.createRange (). createContextualFragment (строка);
Эта функция возвращает объект фрагмента документа, который можно добавить в DOM. Это значительно ускоряет написание функционального HTML. Давайте посмотрим на пример.
Скажем, мы хотим написать функцию для вывода предупреждения в нашу DOM. Эта функция будет принимать аргументы, указывающие, где должен отображаться фрагмент документа, а также текст предупреждения. Мы начнем с создания функции, возвращающей только фрагмент документа, чтобы вы могли увидеть, как выглядит код:
Здесь мы пишем HTML в виде строки, а затем передаем эту строку в document.createRange (). CreateContextualFragment (returnString); функция. Мы используем литерал шаблона, чтобы мы могли легко получить доступ к переменным, передаваемым через аргумент options. Но поскольку литералы шаблонов не поддерживают использование функций итераторов, таких как .forEach, при необходимости мы можем использовать стандартные строки, например, для итерации по массиву и возврата одной строки, содержащей весь HTML.
Теперь, когда у нас есть функция для создания фрагмента документа, давайте создадим функцию для его отображения на нашей странице:
Вот и все! Теперь мы можем вызвать эту функцию и получить наш предупреждающий div:
И если мы хотим анимировать этот элемент, когда он отображается с помощью API веб-анимации, мы можем включить его в функцию. Мы должны включить его после рендеринга элемента в DOM, и мы не можем анимировать сам фрагмент документа, поэтому мы должны нацелить элемент внутри фрагмента документа. Здесь мы нацелены на последний элемент с помощью класса .warningCard, поскольку он, вероятно, всегда будет тем элементом предупреждения, который нам нужен.
Вот и все!
Я думаю, что этот метод намного быстрее, чем использование двух или более строк для создания каждого элемента, присвоения этому элементу класса или идентификатора, изменения его текста или других свойств и отображения его на странице. И это дает JavaScript больше ощущения JSX, поскольку вы можете создавать функции для возврата одного типа многоразового элемента, в комплекте с принятием объекта в качестве аргумента и синтаксическим анализом этого объекта для определенных ключей для настройки возвращаемого элемента. А при желании вы даже можете стилизовать элемент встроенным, подобно стилизованным компонентам в React (но без дополнительных преимуществ других функций стилизованного компонента, таких как предварительная обработка).
Последние мысли
Итак, буду ли я использовать фрагменты документов для своих проектов на чистом JavaScript? Наверное. Я думаю, что их легче писать и, вероятно, легче понять разработчикам, знакомым с HTML (для удобства других, читающих ваш код). Я думаю, что они преступно недооценены - никто из тех, кого я узнал о них, понятия не имел, о чем я говорю! Я думаю, что в странном альтернативном мире, где великие фреймворки, такие как React, Vue и Angular, не стали доминировать в наших интерфейсах, а чистый JavaScript каким-то образом стал королем, фрагменты документов были бы стандартом.
Но это не тот мир, и эти фреймворки действительно господствуют, и работодатели хотят нанимать разработчиков React, и я собираюсь вернуться к изучению React, вместо того, чтобы тратить время на нишевые функции JavaScript сейчас 😅
Спасибо, что прочитали мою статью! Мы всегда будем благодарны за ваши отзывы. Вы можете найти меня здесь:
И если вы хотите нанять, я буду рад поговорить! В настоящее время я ищу свой следующий большой концерт.
