Прослушивание событий

Ключевой особенностью любого фреймворка является простота прослушивания пользовательских событий.

Qwik может прослушивать различные события размещая атрибут on<Eventname>$ на элемент, который подписывается на соответствующее событие браузера.

Ваша задача - добавить орбаботчик события click на элементе <button>. Начните с добавления свойства onClick$ и привяжите его к функции, которая вызывает alert('Привет, мир!').

Понимание процессов в рантайме

Пока что это может выглядеть как обычное поведение фреймворка, однако Qwik делает всё совсем иначе, чем другие фреймворки.

Каждый раз, когда вы видите $, вы должны думать: "Здесь происходит ленивая загрузка".

Открыв инструменты разработчика в браузере, обратите внимание, что JavaScript не загружается, пока вы не нажмёте на кнопку.

Если для подписки на события браузера требуется JavaScript, как Qwik достигает этого взаимодействия без загрузки JavaScript?

Рассмотрим следующий простой HTML-код приложения, приведённого ниже:

Совет: Перейдите на вкладку HTML, чтобы увидеть реальный HTML, созданный сервером.

<html>
  <body>
    <button on:click="chunk-abc.js#App_onClick">
      Нажми меня
    </button>
    <script id="Qwikloader">....</script>
  </body>
</html>

API содержит $, чтобы оптимизатор Qwik мог преобразовать ваш код для ленивой загрузки.

Символ $ является сигналом оптимизатору для извлечения кода для ленивой загрузки;
$ - это сигнал для вас, что в этот момент "магически" происходит ленивая загрузка;
Правила TypeScript гарантируют, что вы не пропустите ни одного места, где должен появиться $.

Оптимизатор ищет $ и извлекает функцию, обёрнутую $, в отдельный лениво загружаемый фрагмент.
Когда сервер рендерит страницу, JSX выполняется и определяет там слушатель клика. Слушатель клика сериализуется в элемент <button> в виде атрибута on:click. Qwik знает, как подключить это событие снова, уже на клиенте.
Скрипт Qwikloader встраивается в HTML и устанавливает глобальный слушатель для всех событий в браузере. Qwikloader имеет размер около 1 кб и выполняется примерно за 1 мс.
Когда пользователь нажимает на кнопку, Qwikloader перехватывает событие и ищет элемент с атрибутом on:click.
Атрибут on:click содержит:

URL-адрес для загрузки ассоциированного кода.
- Чтобы избежать задержек между нажатием и выполнением, Qwik предварительно загружает код, относящийся к данному компоненту.
Символ, экспортируемый загруженным чанком, который содержит функцию, необходимую для выполнения.

После загрузки кода функция будет выполнена.

Вышеописанное поведение придаёт приложениям Qwik свойство мгновенной интерактивности (возобновляемости) без необходимости загрузки и выполнения кода и выполнения гидратации, которая является дорогостоящей.

ПРИМЕЧАНИЕ Чтобы избежать задержек между действием пользователя и ответом, Qwik делает предварительную загрузку кода в фоновом режиме.

Next: Прослушивание объектов document/window

Edit Tutorial