Практические примеры. Живые демонстрации.
Выберите пример, чтобы открыть его на весь экран с предпросмотром и исходным кодом рядом.
Основы
4Приёмы, из которых состоит каждое приложение Nuclo.
Счётчик
Измените состояние, затем вызовите update(). Динамический текст обновится.
Список задач
Используйте list() для повторяющихся элементов. После каждого изменения вызывайте update().
Поисковый фильтр
Фильтруйте массив обычным JavaScript и выводите результаты с помощью list().
Стили
Создавайте классы через css(). Для небольших условных изменений используйте cx().
Компоненты
4Обычные функции со статическими и динамическими параметрами, дочерними узлами, списками по идентичности и вложенными данными. Каждый предпросмотр считает монтирования.
Статические и динамические параметры
Параметр-значение читается один раз при создании компонента. Параметр-функция читается при каждом update(). Сам компонент в обоих случаях выполняется один раз, что подтверждает счётчик монтирований.
Дочерние узлы и модификаторы
Компонент передаёт дочерние элементы через spread: построители, текст, объекты атрибутов и модификаторы. Условные части помещены в when(), поэтому окружающий их компонент не пересоздаётся.
Идентичность в списке
list() сохраняет строку, пока её объект находится в массиве: меняйте порядок, вставляйте и переименовывайте без потери ввода и фокуса. Переключатель клонирует объекты при каждом обновлении, показывая цену потери идентичности.
Вложенные данные
Команда с участниками и задачами: один компонент на уровень, вложенные вызовы list(), производные счётчики как функции тех же объектов. Глубокое изменение затрагивает только соответствующие узлы.
API
13Небольшая демонстрация каждого строительного блока — та же, что встроена в документацию.
Построители тегов
Построитель принимает атрибуты, статические дочерние узлы и динамический текст. Rename меняет состояние, затем вызывает update().
Компоненты
Компонент — обычная функция. Каждый вызов Counter() хранит собственный счётчик.
Атрибуты
Значения атрибутов могут быть функциями. Вторая кнопка переключает busy и вызывает update(); атрибуты disabled и aria-busy кнопки Save следуют за этим значением.
События
onInput и onKeyDown — обычные атрибуты. Введите текст, затем нажмите Escape, чтобы очистить поле.
Жизненный цикл
onMount запускает интервал и возвращает функцию очистки. При размонтировании она выполняется, поэтому счётчик останавливается до следующего монтирования таймера.
Явные обновления
count++ меняет только переменную. Текст обновится при следующем update(), вызванном этой кнопкой или другим действием на странице.
Динамические значения
Измените имя. Статический текст зафиксирован при создании элемента; динамический вычисляется при каждом update(). forceUpdate() заново строит дерево, поэтому обновляется и статический текст.
update()
Каждый update() вычисляет все динамические значения, даже если их данные не изменились. Другие демонстрации на странице тоже увеличивают счётчик.
scope()
Обе кнопки добавляют элемент и переименовывают пользователя. update('cart') обновляет только панель в указанной области.
when()
Выбирается первое истинное условие; иначе выводится .else(). Новая ветвь создаётся с нуля.
list()
Строки сопоставляются по идентичности объектов. Отметьте строку и нажмите Reverse: тот же <li> переместится вместе с флажком.
region() и into()
Макет с основным и боковым регионами заполняется снаружи. Введите текст в Home, откройте и закройте диалог: текст сохранится. Article заполняет оба региона одним into().
forceUpdate()
update() обновляет только динамическую строку lang. forceUpdate() повторно вызывает App и изменяет тот же <h1>. Явная форма перестраивает только это дерево, а не всю страницу.
Стили
3Создавайте классы, объединяйте их и используйте небольшую тему.
Формы
3Проверка обычными функциями над обычным состоянием, затронутые поля, шаги и динамические строки.
Проверка поля
Правила как функция над простым состоянием, ошибки, отображаемые при касании поля, устраненная асинхронная проверка с состоянием ожидания и отправка, которая ожидает всего этого.
Многошаговый мастер
Три шага when() разветвляются по одному объекту данных. Next касается полей шага и продвигается вперед только тогда, когда они пройдут. В обзоре перечислено все со ссылками «Редактировать».
Динамические строки
Строки счета-фактуры в массиве, отображаемые с помощью list(). Каждая строка проверяет себя, сумма подсчитывает действительные строки, а строки сохраняют свои входные данные, когда другие добавляются или удаляются.
SVG
27Графики, анимации, инструменты и игры из построителей SVG, управляемые обычными данными, событиями указателя и update().
Гистограмма
Выпрямляет из массива. Их y и высота являются функциями данных, поэтому update() перемещает столбцы.
Линейный график
Путь, d которого построен из точек, с областью градиента и одним кругом на точку.
Кольцевая диаграмма
Один круг на срез. Stroke-dasharray дает каждому свою долю в кольце, аstroke-dashoffset — его начало.
SVG Анимация
SMIL в роли строителей: animateSvg управляет солнцем, animateTransformSvg вращается вокруг планеты. Динамическая длительность задает скорость.
Манометр
Дуга, заполняющаяся смещением штрих-штрих, и стрелка, поворачивающаяся с преобразованием CSS. Оба являются функциями одного числа.
Радарная диаграмма
Пять значений по пяти осям. Форма представляет собой один путь, d которого вычисляется на основе данных, поэтому update() преобразует его.
Тепловая карта
Сетка прямоугольников, непрозрачность заливки которых соответствует уровню. Щелкните ячейку, чтобы ударить ее; дочерний элемент titleSvg является его всплывающей подсказкой.
Подсказка при наведении
События указателя на элементах SVG. onPointerEnter выбирает активную точку, и к ней перемещается группа подсказок.
Редактор кривых
Перетащите маркеры кубического Безье. onPointerDown выбирает точку, onPointerMove на svg перемещает ее, и путь следует.
Часы
Стрелки — это линии, преобразование которых зависит от времени. onMount запускает отметку и возвращает очистку.
Переключение значков
Значок меню, который превращается в крест с переходами CSS, и сердце, которое появляется с SMIL-анимацией, которая начинается при щелчке.
Прямая трансляция
Две серии прокрутка влево по таймеру. Переход CSS, если один тик делает слайд плавным, а при наведении курсора читается любой образец.
Свечной график
Сорок слотов читают свою свечу. Измените таймфрейм, переключите среднее значение, наведите курсор на цифры или позвольте живой свече тикать.
Гонка гистограмм
Десять полос никогда не покидают DOM. Их ранг устанавливает translateY, поэтому переход перемещает каждый из них в свою строку при изменении значений.
Диаграмма с областями с накоплением
Четыре полосы переключаются между составной, потоковой и процентной раскладкой. Скрытие серии дает только нулевую толщину ее полосы, поэтому каждый путь сохраняет свою форму.
Древовидная карта
Квадратный макет, который можно детализировать. При переключении показателя каждая ячейка перемещается в новое поле, а щелчок по группе меняет местами ее дочерние элементы.
Живая гистограмма
Образцы поступают из четырех дистрибутивов. Ячейки пересчитываются при каждом изменении, за средним значением следует установленный колокольчик, а ползунок устанавливает количество ячеек.
Блокнот для рисования
События указателя рисуют полилинии. list() отображает один штрих за каждый штрих, а количество выполняемых штрихов увеличивается с каждым update().
Поворотная ручка
Пользовательский ползунок: угол указателя задает значение, клавиши со стрелками изменяют его, а pathLength="100" превращает значение в тире.
Цветовое колесо
Выберите оттенок по углу и насыщенность по расстоянию. Колесо состоит из девяноста клиньев, радиального градиента и темного диска.
Спирограф
Колесо вращается внутри кольца, и ручка обводит его. Каждый кадр удлиняет одно тире и обновляет только свой scope().
Прыгающие мячи
Гравитация, стены и столкновения в цикле requestAnimationFrame. Отступите и отпустите, чтобы запустить мяч.
Липкие капли
Размытие и фильтр цветовой матрицы плавят капли вместе. След из кругов следует за указателем.
График силы
Узлы отталкиваются, звенья тянут, и макет остывает, пока не упрётся. Перетащите узел или щелкните его, чтобы вырастить дочерний элемент.
Кисть и зум
Закрасьте диапазон обзора, чтобы увеличить масштаб диаграммы выше. clipPath, следующий за кистью, окрашивает выделение.
Крестики-нолики
Играй на компьютере. when() добавляет каждую метку, а анимация CSS на ее тире рисует ее.
Круговой текст
Введите значок. textPath изгибает текст вокруг круга, а textLength помещает его ровно на один виток.
Маршрутизация
6Таблицы маршрутов, сопоставление, активный маршрут, слои и загрузчики. nuclo-router — отдельный пакет: npm install nuclo nuclo-router.
Приложение с маршрутизацией
Настоящее приложение с собственным маршрутизатором, работающее в фрейме: таблица маршрутов, один outlet(), простые ссылки, состояние ожидания и ошибка 404. Щелкните вокруг, затем нажмите «Назад».
Вложенные маршруты
Docs — это макет с дочерними маршрутами. Тема отображается в ссылках outlet() и ./topic, которые разрешаются по маршруту макета. Введите заметки, затем переключите темы: макет никогда не перестраивается.
Маршрутные погрузчики
Страница сообщения экспортирует load(), который запускается до создания страницы. Наблюдайте за router.pending, пока он ждет, и за состоянием ошибки с помощью Retry, когда он выдает неработающий пост.
Слои
Форма заказа помещает страницу клиента в виде слоя и ожидает результата. Форма не отображается повторно, поэтому ее примечания сохраняются. «Сохранить» разрешает нажатие, «Отмена» или «Назад» отклоняет его.
Несколько маршрутизаторов и загрузка
Два фрезера, два спиннера. План магазина и его раздел имеют load(): они работают параллельно под одним router.pending. Боковая панель имеет собственный маршрутизатор, созданный, но никогда не запускавшийся, с собственным флагом загрузки, обновленным из onNavigate.
Сопоставление с образцом
Статические шаблоны, :param и *rest, а также таблица разделов, смонтированная под двумя родительскими элементами. Введите путь и посмотрите match(), который разрешается без загрузки чего-либо.
Приложения
15Большие программы на весь экран с настоящим исходным кодом во вкладках: рабочий стол с окнами, таблица данных, чат, игры, редакторы и библиотеки с собственным состоянием.
Конструктор страниц
Пишите прямо на странице, перетаскивайте ручки, чтобы изменить порядок блоков или перемещать их в макеты, нажимайте / для вставки и щелкните правой кнопкой мыши для выполнения действий. Создавайте стили сетки и гибких макетов, отменяйте изменения, предварительный просмотр в размере телефона и экспортируйте HTML.
Алгоритм Степпер
Механизм — простой JavaScript: генераторы, которые изменяют массив и возвращают результат после каждого шага. Игрок вызывает next() и update(); полоски представляют собой list() над одними и теми же объектами, поэтому при перестановке перемещаются два элемента.
Канбан-доска
Доска команды: добавляйте задачи, назначайте их людям, редактируйте их в диалоговом окне, фильтруйте по человеку или осуществляйте поиск, перетаскивайте их между столбцами и отменяйте удаление. Столбцы и карточки представляют собой простые массивы одних и тех же объектов; каждый ход — это splice(). Строки сопоставляются по идентификатору, поэтому при перетаскивании, сортировке, назначении или редактировании карточки повторно используется ее элемент. Количество монтировок на экране доказывает это.
инспектор three.js
Библиотека, владеющая собственным состоянием. Панель считывает позиции, цвета и флаги прямо из объектов three.js и записывает в них изменения. Цикл рендеринга вызывает update() один раз для каждого кадра; состояние нигде не дублируется.
Бесконечная прокрутка
Лента без конца: быстрый фейк fetch() генерирует каждую страницу на лету в один простой массив. В DOM находятся только строки рядом с областью просмотра: list() отображает posts.slice(start, end) между двумя разделителями, поэтому страница остается светлой при сотне тысяч сообщений. Дозорный в реальном конце запрашивает следующую страницу, прежде чем она появится в поле зрения.
Настольный компьютер
Рабочий стол с файлами, заметками, терминалом, калькулятором, таймером, канбан-доской, финансами и календарем. Создавайте и систематизируйте папки, редактируйте заметки и используйте команды оболочки на одном общем моделируемом диске, сохраненном в вашем браузере. Введите данные в калькулятор прямо с клавиатуры, щелкните в любом месте терминала, чтобы сфокусировать строку ввода, перетащите карты между столбцами на доске или сохраните бухгалтерскую книгу в электронной таблице «Финансы» и наблюдайте за перемещением ее графиков — эта книга живет в IndexedDB. Windows сохраняет свое состояние при перемещении, изменении размера и переключении между приложениями; работающий таймер заполняет лоток панели задач into().
Граф узлов
Номера проводов, текст и переключатели с помощью математических вычислений, сравнений и узлов If, а каждое значение обновляется по мере ввода. Функции тоже являются графами: их узлы ввода и вывода являются портами каждого вызова, а вызов может называть свою собственную функцию, поэтому факториал и сумма рекурсивно используют if в качестве выхода. Движок простой JavaScript: каждый узел представляет собой генератор, который запрашивает входные данные, и один цикл управляет ими из собственного стека, поэтому sum(50000) вкладывает пятьдесят тысяч вызовов глубоко примерно за десятую долю секунды, не затрагивая стек вызовов JavaScript. Только бюджет шага останавливает рекурсию без выхода. При перетаскивании записываются x и y и обновляется только область холста; подсчет прогонов показывает, что график никогда не перемещается.
Сетка данных
Рабочая таблица, содержащая более 10 000 простых объектов-строк. Поиск, фильтрация, сортировка и разбиение по страницам — это простые функции для массива, а тело таблицы — это list() для текущей страницы. Строки сопоставляются по идентификатору, поэтому при сортировке перемещаются строки, которые остаются на странице, и отредактированная строка везде является одним и тем же объектом. Подсчет построенных строк доказывает это.
Чат
Чат с тремя каналами, каждый из которых представляет собой простой объект: свою историю, курсор, ввод текста, черновик и положение прокрутки, поэтому при переключении каждый канал остается таким, каким он был, а update("chat-sidebar") обновляет только непрочитанные значки. История вечно загружается вверх с unshift() и scrollTop, который растет на добавленную высоту. Ваше сообщение отображается до того, как оно будет получено сервером, send() исправляет один и тот же объект, а функции «Повторить», «Редактировать», «Удалить» и реакции никогда не перестраивают его строку. В сообщениях код отображается жирным шрифтом, ссылками и @упоминаниями.
Живая панель управления
Карты, которые обновляются с разной частотой: от 20 раз в секунду до одного раза в секунду. Каждая карта представляет собой scope(), и ее таймер вызывает update() с идентификатором этой карты, поэтому тик оценивает только эту карту. Каждое динамическое значение подсчитывается на экране: переключитесь на простой update(), и часы оцениваются примерно сто раз в секунду, чтобы измениться один раз.
Редактор пикселей
Изображение представляет собой один простой массив из 1024 цветовых строк, из которого каждая ячейка считывает свой цвет. Штрих записывает в массив и вызывает update(); когда он заканчивается, редактор сохраняет копию с slice(). Отмена, повтор и каждый шаг в истории list() возвращали старый массив: ни хранилища, ни неизменяемых данных.
Змея
Игровой цикл — это таймер, который вызывает step() для простых объектов, а затем update() один раз за такт. Змея представляет собой list() своих объектов-ячеек, и каждый такт объекта-хвоста становится новой головой, поэтому один элемент перемещается, а ни один не строится: количество построенных сегментов увеличивается только тогда, когда змея ест. Еда появляется с анимацией keyframes().
Шаг-секвенсор
Библиотека, имеющая собственные часы. Web Audio записывает каждую ноту вперед на своей временной шкале, а шаблон представляет собой простой двумерный массив логических значений, который переворачивается сеткой и считывается планировщиком, поэтому при следующем проходе слышен щелчок. Указатель воспроизведения обновляет только свой scope() при изменении звукового шага. Звук запускается при первом воспроизведении и закрывается при очистке монтирования, поэтому выход из примера останавливает звук.
Переключатель локали
Каждая этикетка представляет собой статическое значение, записанное как в приложении с одним языком, поэтому update() никогда не читает ее снова: щелчки по корзине обновляют только количества и итоговые суммы. При переключении языка в этом дереве вызывается forceUpdate(), который снова запускает компонент и исправляет те же элементы, включая lang и dir. Деньги, множественное число, даты и списки поступают из Intl, а корзина и напечатанный купон сохраняются при переключении.
Редактор тем
Небольшая библиотека компонентов: createCss() дает имена токенам, а variants() создает из них кнопки, значки, карточки, входы, оповещения и переключатели. Токены представляют собой переменные CSS, поэтому каждый класс компилируется один раз. Каждый элемент управления записывает простой объект темы и вызывает update(), который перезаписывает текст одного элемента стиля.