На первый взгляд оба скрипта делают одно и то же загружают список видео пользователя и выводят их на страницу. Но если копнуть глубже, становится видно, это не просто разные версии кода. Это два разных подхода к работе интерфейса.
Старый вариант работает по классической схеме:
Как он работает:
1. Проверяет userId
2. Загружает кэш из localStorage (если есть)
3. Один раз делает fetch
Если данные отличаются перерисовывает
Особенности:
1. Нет нормализации URL
2. Нет контроля скорости загрузки
3. Нет защиты от лишних перерисовок
4. DOM создаётся через createElement (медленнее и громоздко)
5. Кэш хранит только “данные и количество”, без времени
6. Нет retry-механизма
Поведение:
Скрипт живёт по принципу:
Один раз загрузил и ладно.
Если сеть тормозит или сервер временно лагает пользователь это видит.
Новый скрипт: мини-система внутри страницы
1. Новая версия это уже не просто рендер списка.
2. Это самостоятельный UI-движок внутри блока видео.
Мгновенный отклик (важное отличие)
Код
const cached = loadCache();
render(cached);
Пользователь сразу видит видео из кэша, без ожидания сервера.
В старом тоже есть кэш, но он:
1. не учитывает время
2. не защищён от устаревших данных
3. и работает менее предсказуемо
Умная проверка изменений
Код
function isDifferent(a,b){
for(...)
if(a[i].link !== b[i].link) return true;
}
Сравнение идёт не по длине массива, а по содержимому.
Это важный момент:
1. старый скрипт сравнивает только length
2. новый проверяет реальные изменения контента
Нормализация URL (скрытая гигиена данных)
Код
function normalize(url){
u.search = '';
u.hash = '';
}
Убираются:
1. UTM-метки
2. лишние параметры
3. якоря
Итог:
один и тот же ролик не считается разным из-за мелких параметров URL
Продвинутый кэш
Новый кэш:
1. хранит данные
2. хранит время (LS_TIME)
3. позволяет в будущем расширить TTL-логику
Старый:
1. хранит просто JSON
2. без времени жизни
3. без контроля устаревания
UI как продукт уровня VK
Новый рендер:
1. empty state с SVG
2. кнопка Добавить видео
3. ограничение MAX_SHOW = 2
4. overlay play icon
5. кликабельные карточки
Это уже не список данных, а интерфейс поведения пользователя
Асинхронная устойчивость (retry + load delay)
Код
setTimeout(update, 300);
setTimeout(update, 3000);
Даже если:
1. страница загрузилась криво
2. сеть медленная
3. сервер задержался
скрипт сам повторит попытку.
Старый этого не умеет.
Защита от пустых состояний
Новый скрипт не просто пишет 0 видео, он:
1. показывает иконку
2. объясняет состояние
3. даёт кнопку действия
Это уже UX-логика, а не просто вывод данных.
Главный вывод
Старый скрипт это:
1. просто показать видео
Новый скрипт это уже:
система, которая следит за состоянием, кэширует, обновляет и сама исправляет сбои
Позже я упакую скрипт и CSS-стили в единый модуль, приведу архитектуру к более компактному и структурированному виду и сделаю реализацию максимально сдержанной и унифицированной по стилю.
Исходник..
Доступно только для пользователей
Видео . .
