아니면 두 개의 도우미 기능이 있는 바닐라 JavaScript인가요?

이 기사에서는 Fusor 라이브러리를 사용하여 재사용 가능한 웹 구성 요소를 개발하는 방법과 그 이점에 대해 논의하겠습니다.

그러한 구성요소는 React, Angular, Vue, Solid, Svelte 등을 사용하여 생성된 것과 동등한 완전한 기능을 갖춘 웹 애플리케이션으로 구성될 수 있습니다.

Fusor API는 두 가지 주요 기능으로만 구성됩니다:

• 특수 객체로 래핑된 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

우리는 create 및 get API 함수를 사용했습니다.

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
  
);




이벤트 핸들러 콜백이 호출된 후 구성 요소를 새로 고치는 업데이트 옵션을 추가했는데, 이는 이전 예제와 동일합니다.


  
  
  수명주기


실제 애플리케이션 개발을 시작하기 전에 이해해야 할 마지막 측면은 구성 요소 수명 주기입니다.

단 4단계로 구성됩니다:


구성요소 생성

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);




마운트 속성에는 구성 요소가 DOM에 추가될 때 실행되는 기능이 있습니다. 이 함수는 하나의 인수, 즉 현재 특수 개체를 사용합니다. 또한 구성요소가 DOM에서 제거될 때 실행되는 다른 함수를 반환할 수도 있습니다.

우리는 라이프사이클의 4가지 단계를 완전히 제어합니다. 이를 통해 다양한 전략과 애니메이션 프레임을 염두에 두고 사용자 정의 비동기 또는 동시 방법을 사용하여 구성 요소를 생성, 업데이트 및 비교할 수 있습니다.


  
  
  이로써 튜토리얼이 종료됩니다.


이 튜토리얼에서 볼 수 있듯이 Fusor는 간단하고 간결하며 명시적입니다. 대부분의 경우 두 가지 API 함수만 사용합니다. 그러나 필요한 경우에는 많은 제어력과 유연성도 제공합니다.

그래서 제목의 질문에 답하자면, Fusor는 프레임워크는 아니지만 작은 JavaScript 라이브러리이지만 다른 프레임워크와 동일한 결과를 얻을 수 있습니다.


  
  
  코딩 시작


위의 모든 예시는 CodeSandbox에서 확인할 수 있습니다.

또한 SVG 아날로그 시계 예시를 확인해 보세요.

여기 실제 애플리케이션이 있습니다.

보일러플레이트 시작 프로젝트:

자바스크립트 스타터
TypeScript 스타터

  
  
  감사합니다