Браузерное окружение #

Браузерное окружение — это набор объектов, которые JavaScript получает при выполнении на странице. Глобальный объект window представляет вкладку; document — загруженный HTML-документ. Вместе они образуют точку входа для любого UI-кода в JSFlow: от виджета «Активные сессии» до плеера плейлиста.

window — глобальная область вкладки #

В браузере глобальные переменные и функции становятся свойствами window:

window.JSFlow = { version: '1.0' }

function pingDashboard() {
  console.log('dashboard alive')
}

window.pingDashboard === pingDashboard // true

window также даёт доступ к размерам области просмотра и прокрутке:

const viewportWidth = window.innerWidth
const scrollY = window.scrollY

window.scrollTo({ top: 0, behavior: 'smooth' })

Таймеры и анимационные циклы тоже живут на window:

const timerId = window.setTimeout(() => {
  console.log('обновить KPI через 2 с')
}, 2000)

window.clearTimeout(timerId)

document — корень DOM #

document — объект, через который скрипт читает и изменяет разметку. Он доступен как свойство window.document и как глобальная переменная:

document.title = 'JSFlow — Дашборд'
const root = document.documentElement // <html>
const body = document.body

Типичный старт UI-модуля — дождаться готовности DOM и найти контейнер:

const playlistRoot = document.getElementById('playlist-panel')
if (!playlistRoot) {
  console.warn('контейнер плейлиста не найден')
}

Подробнее о дереве узлов — в уроке DOM-дерево и навигация.

BOM: краткий обзор #

Browser Object Model (BOM) — объекты браузера вокруг документа. Полного стандарта у BOM нет, но набор API де-факто одинаков в современных движках.

Пример: сохранить последний открытый раздел дашборда в URL без перезагрузки:

const params = new URLSearchParams(location.search)
params.set('tab', 'analytics')

history.pushState({ tab: 'analytics' }, '', `?${params}`)

Для оформления заказа часто читают query-параметры кампании:

const promo = new URLSearchParams(location.search).get('promo')
// checkout?promo=spring-26 → "spring-26"

Связь окружения и DOM #

Схема зависимостей в типичной странице JSFlow:

window
 ├── document          ← DOM-дерево страницы
 ├── location          ← адрес и параметры
 ├── history           ← стек навигации
 ├── localStorage      ← настройки UI между визитами
 └── setTimeout/...    ← отложенные задачи

Скрипт с type="module" всё ещё выполняется в контексте window, но верхнеуровневый this не равен window. Глобальные объявления let/const не становятся свойствами window — только var и явные присваивания window.name = ....

Итог #

• window — глобальный объект вкладки: таймеры, прокрутка, размеры.
• document — точка доступа к HTML и DOM.
• BOM (location, history, navigator, storage) дополняет документ навигацией и персистентностью.
• UI-код JSFlow обычно начинается с поиска контейнера в document и при необходимости синхронизации состояния с location или localStorage.

См. также #

• DOM-дерево и навигация
• Поиск элементов
• DOMContentLoaded и загрузка