PrepBro
← Назад к вопросам

Как сборщик помогает при разработке?

2.0 Middle🔥 141 комментариев
#Инструменты и DevOps

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

ID и URL: навигация по якорям (anchors)

В HTML элементу можно присвоить атрибут id, а затем создать ссылку на этот ID через URL-якорь (anchor). Это позволяет делать навигацию внутри страницы и создавать глубокие ссылки.

Базовый механизм

<!-- Определяем элемент с ID -->
<h2 id="about">О компании</h2>
<p>Текст про компанию...</p>

<h2 id="services">Услуги</h2>
<p>Описание услуг...</p>

<!-- Ссылаемся на эти ID через # (hash) -->
<nav>
  <a href="#about">О компании</a>
  <a href="#services">Услуги</a>
</nav>

<!-- Можно ссылаться с других страниц -->
<a href="/company#about">О нас</a>
<a href="https://example.com/page#services">Услуги</a>

Когда пользователь кликает на ссылку с якорем:

  1. Браузер находит элемент с этим ID
  2. Скроллит страницу так, чтобы элемент был в viewport
  3. Фокус переходит на элемент

Как работает в JavaScript

// Получить текущий якорь из URL
const currentHash = window.location.hash;
console.log(currentHash); // "#services"

// Получить ID без #
const elementId = window.location.hash.slice(1); // "services"

// Найти элемент по ID
const element = document.getElementById(elementId);
if (element) {
  element.scrollIntoView({ behavior: 'smooth' });
}

// Изменить якорь программно
window.location.hash = '#about'; // переход на элемент с id="about"

// Или без перезагрузки страницы
history.pushState(null, null, '#new-section');

Практический пример: навигация по разделам

<!DOCTYPE html>
<html>
<head>
  <title>Документация</title>
  <style>
    section {
      height: 100vh;
      scroll-behavior: smooth;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#intro">Введение</a>
    <a href="#installation">Установка</a>
    <a href="#usage">Использование</a>
    <a href="#api">API</a>
  </nav>

  <section id="intro">
    <h1>Введение</h1>
    <p>Содержание...</p>
  </section>

  <section id="installation">
    <h1>Установка</h1>
    <p>Содержание...</p>
  </section>

  <section id="usage">
    <h1>Использование</h1>
    <p>Содержание...</p>
  </section>

  <section id="api">
    <h1>API</h1>
    <p>Содержание...</p>
  </section>
</body>
</html>

Работа с событиями при изменении якоря

// Реагирование на изменение якоря
window.addEventListener('hashchange', (event) => {
  const newHash = window.location.hash;
  console.log('Якорь изменился на:', newHash);
  
  // Можно закрыть меню, обновить активный пункт навигации и т.д.
  updateActiveNavigation(newHash);
});

function updateActiveNavigation(hash) {
  // Удаляем класс active со всех ссылок
  document.querySelectorAll('a').forEach(link => {
    link.classList.remove('active');
  });
  
  // Добавляем к нужной ссылке
  const activeLink = document.querySelector(`a[href="${hash}"]`);
  if (activeLink) {
    activeLink.classList.add('active');
  }
}

React: роутинг с якорями

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function Documentation() {
  const location = useLocation();

  useEffect(() => {
    // Обработка якоря при загрузке
    const id = location.hash.slice(1);
    if (id) {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [location.hash]);

  return (
    <>
      <nav>
        <a href="#intro">Введение</a>
        <a href="#api">API</a>
      </nav>

      <section id="intro">
        <h1>Введение</h1>
      </section>

      <section id="api">
        <h1>API</h1>
      </section>
    </>
  );
}

Глубокие ссылки (Deep linking)

// Можно делиться ссылками, которые ведут на конкретный раздел
const shareableLink = `${window.location.origin}${window.location.pathname}#services`;
console.log(shareableLink); // https://example.com/page#services

// Когда пользователь перейдёт по этой ссылке:
// 1. Загружается страница
// 2. JavaScript обрабатывает якорь
// 3. Браузер скроллит к нужному разделу

Важные моменты

ID должны быть уникальными

<!-- Плохо — два элемента с одинаковым ID -->
<div id="section">Первый</div>
<div id="section">Второй</div> <!-- Это нарушает HTML спецификацию -->

<!-- Хорошо -->
<div id="section-1">Первый</div>
<div id="section-2">Второй</div>

ID не должны содержать пробелы и специальные символы

<!-- Плохо -->
<div id="my section">...</div>
<div id="section@1">...</div>

<!-- Хорошо -->
<div id="my-section">...</div>
<div id="section-1">...</div>

История и состояние

// Использование history API для сохранения якоря
window.history.pushState(
  { section: 'about' },
  '',
  '#about'
);

// Обработка события popstate (кнопка назад)
window.addEventListener('popstate', (event) => {
  console.log('Пользователь нажал назад:', event.state);
});

SEO и доступность

<!-- Хорошо для SEO: уникальные, описательные ID -->
<section id="product-features">
  <h2>Особенности продукта</h2>
</section>

<!-- Хорошо для доступности: якорь указывает на правильный заголовок -->
<a href="#product-features">Перейти к особенностям</a>

<!-- Очень хорошо: комбинация с aria атрибутами -->
<section id="features" aria-label="Основные особенности">
  <h2>Особенности</h2>
</section>

Правила для ID

  • ID должно начинаться с буквы (A-Z, a-z)
  • Содержать только буквы, цифры, дефисы (-) и подчеркивания (_)
  • Быть уникальным на странице
  • Быть описательным и понятным
  • Использовать kebab-case для читаемости

Якоря — это мощный инструмент для создания удобной навигации и глубокого линкинга.

Как сборщик помогает при разработке? | PrepBro