Компоненты пользовательского интерфейса в чистом JavaScript

Библиотеки пользовательских интерфейсов JavaScript часто поставляются с большими файлами, а иногда и являются излишним для небольших до средних проектов. Вот почему я хотел бы показать вам способ создания компонентов пользовательских интерфейсов с чистым (ванильным) JavaScript, чтобы вы могли по крайней мере подумать о том, чтобы избежать больших библиотек UI, и Увеличить производительность загрузки сайта как результат.

Вот интерактивный пример. Мы разработаем карту с помощью некоторого текста и кнопку, которая меняет цвет фона карты. Вы можете увидеть окончательную версию на Jsfiddle Отказ

Компонент карты

Сначала мы создаем узел HTML-элемента и добавить класс к нему; Затем объявить функцию для изменения цвета фона; И добавить дочерние компоненты, проезжая ApplyrandomColor к компоненту кнопки.

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

function Card() {
    const node = document.createElement('div');
    node.classList.add('card');

    function applyRandomColor() {
        node.style.background = '#' + Math.floor(Math.random()*16777215).toString(16);
    }

    node.append(
        CardContent(),
        CardButton({pressHandler: applyRandomColor})
        )

    return node
}

Компонент Cardcontent

Больше того же.

Примечание. Старые браузеры не поддерживают метод классов, для более широкой поддержки Node.SetAttribute («Класс», «Card__Content»);

function CardContent() {
    const node = document.createElement('div');
    node.classList.add('card__content');
    node.textContent = 'Text text text text text text text text text text text text';

    return node
}

Компонент CardButton

Больше того же.

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

function CardButton({pressHandler}) {
    const node = document.createElement('div');
    node.textContent = 'Press me';
    node.classList.add('card__button');

    node.addEventListener('click', pressHandler);

    return node
}

Добавьте компонент карты

document.body.appendChild(Card())

Оригинал: “https://dev.to/filibit/ui-components-in-pure-javascript-2kii”