Или ванильный JavaScript с двумя вспомогательными функциями?

В этой статье я расскажу, как разрабатывать повторно используемые веб-компоненты с использованием библиотеки Fusor и преимущества этого.

Из таких компонентов затем можно составить полноценные веб-приложения, аналогичные тем, которые созданы с использованием React, Angular, Vue, Solid, Svelte и других.

API Fusor состоит всего из двух основных функций:

• Создайте элемент DOM, завернутый в специальный объект.
• Обновить элемент DOM, заключенный в специальный объект.

Плюс еще несколько редко используемых функций, например:

• Получить элемент DOM из специального объекта.

Вам не нужно ничего знать об этом особом объекте.

Создайте элемент DOM

Создание через JSX

import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get

Мы использовали функции API create и get.

Альтернативное создание без JSX

import { div } from "@fusorjs/dom/html";
const message = div("Seconds ", count, " elapsed"); // Create

Обновление элемента DOM

import { getElement, update } from "@fusorjs/dom";

let count = 0;
const message = 
Seconds {() => count} elapsed
; // Create

document.body.append(getElement(message)); // Get

setInterval(() => {
  count  = 1;
  update(message); // Update
}, 1000);

Мы использовали функцию API обновления. Он обновляет элемент DOM и все его дочерние элементы рекурсивно. Он извлекает новые значения из результатов функций, делая их динамическими.

Дочерние элементы, атрибуты и свойства могут быть динамическими.

 (toggle ? "on" : "off")} />




Обновление DOM произойдет только в том случае, если новые значения отличаются от текущих.


  
  
  Настройка параметров


В большинстве случаев вы будете устанавливать параметры как обычно:







Однако иногда вам придется различать атрибуты и свойства. Чтобы указать их тип, вы можете добавить к их именам суффиксы _a или _p:







Чтобы добавить обработчик событий, вы всегда должны использовать суффикс _e:


 "event handler"} />




Существуют дополнительные типы, и некоторые из них могут принимать дополнительные опции для обеспечения полной совместимости со стандартами W3C:


 "event handler"} />





  
  
  Создайте повторно используемый компонент


Составляйте компоненты, используя специальные объекты Fusor. Инкапсулируйте состояние и параметры внутри функций. Начинайте названия компонентов с заглавной буквы.

Вот пример компонента кнопки счета:


import { getElement, update } from "@fusorjs/dom";

const CountingButton = (props) => {
  let count = props.count ?? 0; // Init State

  const self = (
     {
        count  = 1;
        update(self);
      }}
    >
      Clicked {() => count} times
    
  );

  return self;
};

const App = () => (
  

    
Three counting buttons
    
);

document.body.append(getElement(App()));




Компонент CountingButton обновляет только часть своего собственного элемента DOM, не затрагивая остальную часть приложения.

Как только вы полностью поймете, как работает вышеуказанный компонент, вы можете переписать его немного более способом, добившись того же результата:


const CountingButton = ({ count = 0 }) => (
   {
      count  = 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  
);




Каждая функция обратного вызова обработчика событий получает два аргумента: стандартный объект события и текущий специальный объект.

Еще раз: если вы поняли приведенный выше пример, посмотрите самую короткую версию того же компонента:


const CountingButton = ({ count = 0 }) => (
   (count  = 1)}>
    Clicked {() => count} times
  
);




Мы добавили опцию обновления, позволяющую обновить компонент после вызова обратного вызова обработчика событий, что эквивалентно предыдущему примеру.


  
  
  Жизненный цикл


Последний аспект, который нам нужно понять, прежде чем приступить к разработке реальных приложений, — это жизненный цикл компонента.

Он состоит всего из четырех этапов:


Создайте компонент

Подключиться к DOM

Обновить DOM

Отключиться от DOM

import { getElement, update } from "@fusorjs/dom";

const IntervalCounter = ({ count = 0 }) => {
  console.log("1. Create the component");

  return (
    
 {
        console.log("2. Connect to the DOM");

        const timerId = setInterval(() => {
          count  ;
          update(self);
          console.log("3. Update the DOM");
        }, 1000);

        return () => {
          clearInterval(timerId);
          console.log("4. Disconnect from the DOM");
        };
      }}
    >
      Since mounted {() => count} seconds elapsed
    
  );
};

const instance = ;
const element = getElement(instance);

document.body.append(element);
setTimeout(() => element.remove(), 15000);




Свойство mount имеет функцию, которая запускается при добавлении компонента в DOM. Эта функция принимает один аргумент: текущий специальный объект. Он также может возвращать другую функцию, которая запускается при удалении компонента из DOM.

Мы полностью контролируем эти четыре этапа жизненного цикла. Это позволяет нам создавать, обновлять и сравнивать компоненты, используя собственные асинхронные или параллельные методы с учетом различных стратегий и кадров анимации.


  
  
  На этом урок завершается


Как вы можете видеть из этого руководства, Fusor прост, лаконичен и понятен. Большую часть времени вы будете использовать только две функции API. Тем не менее, он также предлагает большой контроль и гибкость, когда это необходимо.

Итак, чтобы ответить на вопрос в заголовке, Fusor — это небольшая библиотека JavaScript, а не фреймворк, но она может достичь тех же результатов, что и другие фреймворки.


  
  
  Начать кодирование


Все приведенные выше примеры доступны на CodeSandbox.

Также ознакомьтесь с примером аналоговых часов SVG.

Вот реальное приложение.

Шаблоновые стартовые проекты:

Начальный уровень JavaScript
Стартер TypeScript

  
  
  Спасибо