Заполнение шаблонов данными
📅
Заполнение шаблонов данными
HTML Templates становятся мощнее при динамическом заполнении данными. Рассмотрим основные подходы.
1. Базовое заполнение через JavaScript
const template = document.getElementById('user-template');
const clone = template.content.cloneNode(true);
// Заполнение текстового контента
clone.querySelector('.user-name').textContent = user.name;
clone.querySelector('.user-email').textContent = user.email;
// Установка атрибутов
clone.querySelector('img').setAttribute('src', user.avatar);
clone.querySelector('.card').setAttribute('data-user-id', user.id);
container.appendChild(clone);
2. Работа с HTML-контентом
// Для безопасного HTML (рекомендуется)
clone.querySelector('.bio').textContent = user.bio;
// Для HTML-разметки (осторожно!)
clone.querySelector('.content').innerHTML = user.formattedContent;
3. Обработка коллекций данных
const users = [...]; // Массив данных
const fragment = document.createDocumentFragment();
users.forEach(user => {
const clone = template.content.cloneNode(true);
clone.querySelector('.name').textContent = user.name;
fragment.appendChild(clone);
});
container.appendChild(fragment);
4. Шаблонизация с помощью функции
function createUserCard(user) {
const clone = template.content.cloneNode(true);
clone.querySelector('.name').textContent = user.name;
clone.querySelector('.avatar').src = user.avatar;
clone.querySelector('.card').classList.add(user.isActive ? 'active' : 'inactive');
return clone;
}
// Использование
container.appendChild(createUserCard(userData));
5. Оптимизация производительности
// Плохо: множественные обращения к DOM
clone.querySelector('.name').textContent = user.name;
clone.querySelector('.email').textContent = user.email;
clone.querySelector('.phone').textContent = user.phone;
// Лучше: кэширование элементов
const element = clone.querySelector('.user-card');
element.querySelector('.name').textContent = user.name;
element.querySelector('.email').textContent = user.email;
element.querySelector('.phone').textContent = user.phone;
6. Подготовка к Web Components
// Паттерн, который пригодится для компонентов
class UserCard {
constructor(user) {
this.template = document.getElementById('user-template');
this.user = user;
}
render() {
const clone = this.template.content.cloneNode(true);
// Заполнение данных...
return clone;
}
}
Рекомендации по безопасности
- Всегда валидируйте данные перед вставкой
- Избегайте innerHTML для пользовательского контента
- Используйте textContent по умолчанию
// Безопасное заполнение
const safeContent = sanitizeHTML(userInput);
element.textContent = safeContent; // Лучше
// element.innerHTML = safeContent; // Только если необходимо