Почти Ванильный Фронтэнд

Почти — потому что используется всего две функции из библиотеки:

1. Создать элемент DOM

2. Обновить элемент DOM

Эта библиотека упрощает использование нативных функций DOM, таких как createElement и replaceChild. Библиотека Fusor направлена на то, чтобы сделать эти функции проще и компактнее.

Ниже приведены примеры распространенных проблем. Попробуйте воспроизвести их с использованием инструментов, которые вы сейчас используете. Вы можете быть удивлены, обнаружив, что разработка с Fusor может быть наиболее компактным, гибким, легким и производительным способом создания фронтенд-приложений.

Оглавление

• Установка

• Создание и Обновление DOM

• Синтаксис Установки Параметров

• Компонент с Состоянием

• Контролируемый Компонент Ввода

• Точное Обновление DOM

• Остановка Рекурсии Обновления

• Жизненный Цикл Компонента

• Автоматическое/Реактивное Обновление

• Роутинг

• Переключение Компонентов

• Динамическое Создание и Обновление DOM

• Кеширование и Мемоизация

• Обработка Исключений

Установка

npm install @fusorjs/dom 

Или:

• JSX стартовый проект для: JavaScript или TypeScript

• CDN: https://esm.sh/@fusorjs/dom или https://cdn.skypack.dev/@fusorjs/dom

Создание и Обновление DOM

import {getElement, update} from '@fusorjs/dom'; import {section, div} from '@fusorjs/dom/html';  let count = 0;  const block = section(   {class: () => (count % 2 ? 'odd' : 'even')},    div('Seconds ', () => count, ' elapsed'),   div('Minutes ', () => Math.floor(count / 60), ' elapsed'), );  document.body.append(getElement(block));  setInterval(() => {   count++;   update(block); }, 1000); 

> запустить пример

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

Поддержка JSX

import {getElement, update} from '@fusorjs/dom';  let count = 0;  const block = (   <section class={() => (count % 2 ? 'odd' : 'even')}>     <div>Seconds {() => count} elapsed</div>     <div>Minutes {() => Math.floor(count / 60)} elapsed</div>   </section> );  document.body.append(getElement(block));  setInterval(() => {   count++;   update(block); }, 1000); 

> запустить пример

Синтаксис Установки Параметров

import {getElement, update} from '@fusorjs/dom'; import {section} from '@fusorjs/dom/html';  let count = 0;  const block = section(   {     id: 'set attribute or property automatically',     title_a: 'set attribute',     style_p: 'set property',      focus_e: () => 'set bubbling event handler',     blur_e_capture_once: () => 'set capturing event handler once',      // update dynamic values in this DOM node:     click_e_update: () => count++, // same as     click_e: () => {count++; update(block);}, // same as     click_e: (event, self) => {count++; update(self);},      class: count % 2 ? 'odd' : 'even', // static     class: () => (count % 2 ? 'odd' : 'even'), // dynamic   },    'Static child ', count, ' never changes.',   'Dynamic child ', () => count, ' is wrapped in a function.', );  document.body.append(getElement(block)); 

> запустить пример

Компонент с Состоянием

import {getElement} from '@fusorjs/dom'; import {button, div} from '@fusorjs/dom/html';  const ClickCounter = (count = 0) =>   button({click_e_update: () => count++}, 'Clicked ', () => count, ' times');  const App = () => div(ClickCounter(), ClickCounter(22), ClickCounter(333));  document.body.append(getElement(App())); 

> запустить пример

Версия JSX

import {getElement} from '@fusorjs/dom';  const ClickCounter = ({count = 0}) => (   <button click_e_update={() => count++}>Clicked {() => count} times</button> );  const App = () => (   <div>     <ClickCounter />     <ClickCounter count={22} />     <ClickCounter count={333} />   </div> );  document.body.append(getElement(<App />)); 

> запустить пример

Компоненты в обеих версиях совместимы.

Тот же Компонент Разными Способами

import {button} from '@fusorjs/dom/html';  const ClickCounter = (count = 0) => {   const self = button(     {click_e: () => {count++; update(self);}},     'Clicked ', () => count, ' times',   );    return self; };  const ClickCounter = (count = 0) =>   button(     {click_e: (event, self) => {count++; update(self);}},     'Clicked ', () => count, ' times',   );  const ClickCounter = (count = 0) =>   button(     {click_e_update: () => count++},     'Clicked ', () => count, ' times',   ); 

> запустить пример

Контролируемый Компонент Ввода

Или Controlled Input в терминах React.

import {getElement} from '@fusorjs/dom'; import {input, div} from '@fusorjs/dom/html';  const UppercaseInput = (value = '') =>   input({     value: () => value.toUpperCase(),     input_e_update: (event) => (value = event.target.value),   });  document.body.append(   getElement(     div(UppercaseInput(), UppercaseInput('two'), UppercaseInput('three')),   ), ); 

> запустить пример

Точное Обновление DOM

import {getElement, update} from '@fusorjs/dom'; import {section, div} from '@fusorjs/dom/html';  let count = 0;  const seconds = div('Seconds ', () => count, ' elapsed');  const block = section(   seconds,   div('Minutes ', () => Math.floor(count / 60), ' elapsed'), );  document.body.append(getElement(block));  setInterval(() => {   count++;   update(seconds); // not minutes }, 1000); 

> запустить пример

Это обновит только секунды, а не минуты.

Остановка Рекурсии Обновления

import {getElement, update} from '@fusorjs/dom'; import {section, div} from '@fusorjs/dom/html';  let count = 0;  const seconds = div('Seconds ', () => count, ' elapsed');  const block = section(   () => seconds, // wrapped in a function to escape   div('Minutes ', () => Math.floor(count / 60), ' elapsed'), );  document.body.append(getElement(block));  setInterval(() => {   count++;   update(block); }, 1000); 

> запустить пример

Это обновит только минуты, но не секунды.

Только компоненты (seconds, block) обновляются рекурсивно. () => seconds — это функция, а не компонент.

Каждая функция из @fusorjs/dom/html возвращает компонент, если он содержит динамические значения. То же самое относится и к определениям JSX.

Жизненный Цикл Компонента

1. Создать компонент

2. Подключить к DOM

3. Обновить DOM

4. Отключить от DOM

import {getElement, update} from '@fusorjs/dom'; import {div} from '@fusorjs/dom/html';  const IntervalCounter = (count = 0) => {   console.log('1. Create component');    return div(     {       mount: (self) => {         console.log('2. Connect to DOM');          const timerId = setInterval(() => {           count++;           update(self);           console.log('3. Update DOM');         }, 1000);          const unmount = () => {           clearInterval(timerId);           console.log('4. Disconnect from DOM');         };          return unmount;       },     },      'Since mounted ', () => count, ` seconds elapsed`,   ); };  const instance = IntervalCounter(); // 1. Create component const element = getElement(instance);  document.body.append(element); // 2. Connect to DOM setTimeout(() => element.remove(), 15000); // 4. Disconnect from DOM 

> запустить пример

> запустить SVG Analog Clock

Автоматическое/Реактивное Обновление

Автоматические/реактивные обновления в больших фреймворках — это не что иное, как реализация паттерна Observable. Это включает в себя State в React, Signals в Solid, Redux, MobX и многие другие. В Fusor вы можете использовать любую из этих библиотек.

Здесь мы обсуждаем универсальное решение:

Библиотека Роутинга

import {update} from '@fusorjs/dom'; import {Observable} from 'Any/Observable/Signal/Redux/Mobx...';  // Modern routing handling const observable = new Observable(); const read = () => location.hash.substring(1); // omit "#" let route = read(); window.addEventListener(   'popstate',   () => {     const next = read();     if (route === next) return;     route = next;     observable.notify();   },   false, );  // Fusor integration export const getRoute = () => route; export const mountRoute = (self) => {   const callback = () => update(self);   observable.subscribe(callback);   return () => observable.unsubscribe(callback); }; 

Реактивный Компонент

Переключение компонентов, когда выбран текущий маршрут.

import {span, a} from '@fusorjs/dom/html'; import {getRoute, mountRoute} from './router';  export const RouteLink = (title, route) =>   span({mount: mountRoute}, () =>     getRoute() === route       ? title // when selected       : a({href: `#${route}`}, title),   ); 

Динамическое Создание и Обновление DOM

import {getElement} from '@fusorjs/dom'; import {ul, li} from '@fusorjs/dom/html'; import {RouteLink} from './RouteLink';  const block = ul(   [...Array(10)].map((v, i) =>     li(RouteLink(`${i + 1}. Section`, `url-to-${i + 1}-section`)),   ), );  document.body.append(getElement(block)); 

> запустить пример

Кеширование и Мемоизация

Тяжелый компонент создается только один раз.

import {div, br} from '@fusorjs/dom/html';  let isVisible = true; // can change  const block = div(   (     (cache = HeavyComponent()) =>     () =>       isVisible && cache   )(),    br(),    () => RecreatedEveryUpdate(), ); 

> запустить пример

Обработка Исключений

import {section, p} from '@fusorjs/dom/html';  const Value = (value) => {   if (value === undefined) throw new Error(`provide a value`);    return p(value); };  const block = section(   p('Before'),    (() => {     try {       return [         Value(1),         Value(), // will throw         Value(3),       ];     } catch (error) {       if (error instanceof Error) return p('Exception: ', error.message);        return p('Exception: unknown');     }   })(),    p('After'), ); 

> запустить пример

Заключение

Теперь вы знаете все, что нужно для начала разработки современных фронтенд-приложений с Fusor.

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