Программное конструирование объектов и элементов на JavaScript

Расширенные сценарии создания в JavaScript

Ниже приведены более сложные и не столь очевидные примеры создания объектов, элементов и функций, которые часто встречаются в реальных веб-приложениях.

1. Создание таблицы из массива данных с помощью DocumentFragment

const data = [
    { name: 'Анна', age: 25 },
    { name: 'Борис', age: 30 },
    { name: 'Виктор', age: 35 }
];
const table = document.createElement('table');
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
['Имя', 'Возраст'].forEach(text => {
    const th = document.createElement('th');
    th.textContent = text;
    headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
const tbody = document.createElement('tbody');
const fragment = document.createDocumentFragment();
data.forEach(item => {
    const tr = document.createElement('tr');
    const tdName = document.createElement('td');
    tdName.textContent = item.name;
    const tdAge = document.createElement('td');
    tdAge.textContent = item.age;
    tr.appendChild(tdName);
    tr.appendChild(tdAge);
    fragment.appendChild(tr);
});
tbody.appendChild(fragment);
table.appendChild(tbody);
document.body.appendChild(table);

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

2. Создание пользовательского веб-компонента с Shadow DOM

class MyCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host { display: block; border: 1px solid #ccc; padding: 1em; }
                .title { font-weight: bold; }
            </style>
            <div class="title"><slot name="title">Заголовок</slot></div>
            <slot></slot>
        `;
    }
}
customElements.define('my-card', MyCard);
// Использование
const card = document.createElement('my-card');
card.innerHTML = '<span slot="title">Карточка</span>Описание';
document.body.appendChild(card);

Результат: на странице отображается карточка с изолированным Shadow DOM. Стили внутри компонента не влияют на внешний документ, и наоборот. Этот способ создания подходит для переиспользуемых независимых компонентов.

3. Создание объекта с приватными полями через классы (ES2022)

class User {
    #password;
    constructor(name, password) {
        this.name = name;
        this.#password = password;
    }
    checkPassword(attempt) {
        return attempt === this.#password;
    }
}
const user = new User('admin', 'secret123');
console.log(user.name);          // admin
console.log(user.#password);     // SyntaxError: приватное поле недоступно
console.log(user.checkPassword('secret123')); // true

Результат: объект User имеет публичное поле name и приватное #password. Доступ к паролю возможен только через методы класса. Это обеспечивает инкапсуляцию.

4. Создание асинхронной функции с обработкой ошибок и динамическим импортом

async function loadModuleAndUse() {
    try {
        const module = await import('./utils.js');
        const result = module.doSomething(10);
        console.log('Результат:', result);
    } catch (error) {
        console.error('Ошибка загрузки модуля:', error);
    }
}
loadModuleAndUse();

Результат: функция динамически импортирует модуль utils.js и вызывает его функцию doSomething. Если модуль не найден или выбрасывает исключение, ошибка обрабатывается в блоке catch. Этот подход используется для ленивой загрузки кода.

5. Создание генератора для ленивого создания последовательности элементов

function* createItems(start, end) {
    for (let i = start; i <= end; i++) {
        yield `Элемент ${i}`;
    }
}
const generator = createItems(1, 5);
for (const item of generator) {
    console.log(item);
}
// Также можно создать объекты с помощью генератора
const objGen = function*() {
    let id = 0;
    while (true) {
        yield { id: id++, value: Math.random() };
    }
}();
const firstObj = objGen.next().value;
console.log(firstObj); // { id: 0, value: 0.456... }

Результат: генератор createItems возвращает строки по одной, не создавая весь массив в памяти. Генератор objGen создаёт бесконечную последовательность объектов с уникальными id. Это полезно для создания больших наборов данных на лету.

Примечание: приведённые примеры демонстрируют различные аспекты создания – от DOM-элементов до абстрактных объектов. Выбор конкретного подхода зависит от задачи: для интерфейсов чаще используют createElement и шаблоны, для данных – классы и фабрики, для модульности – динамический импорт.