새로운 프런트엔드 프레임워크?

아니면 두 개의 도우미 기능이 있는 바닐라 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 = <div>Seconds {count} elapsed</div>;

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 = <div>Seconds {() => count} elapsed</div>; // Create

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

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

update API 함수를 사용했습니다. DOM 요소와 모든 하위 요소를 재귀적으로 업데이트합니다. 함수 결과에서 새로운 값을 검색하여 동적으로 만듭니다.

하위 항목, 속성, 속성은 모두 동적일 수 있습니다.

<div class={() => (toggle ? "on" : "off")} />

DOM 업데이트는 새 값이 현재 값과 다른 경우에만 발생합니다.

매개변수 설정

대부분의 경우 평소와 같이 매개변수를 설정합니다.

<div style="padding:1em" />

그러나 때로는 속성과 속성을 구별해야 할 때도 있습니다. 유형을 지정하려면 이름에 _a 또는 _p 접미사를 추가할 수 있습니다.

<div name1_a="attribute" name2_p="property" />

이벤트 핸들러를 추가하려면 항상 _e 접미사를 사용해야 합니다.

<div click_e={() => "event handler"} />

추가 유형이 있으며 그 중 일부는 완전한 W3C 표준 호환성을 보장하기 위해 추가 옵션을 취할 수 있습니다.

<div click_e_capture_once={() => "event handler"} />

재사용 가능한 구성 요소 만들기

Fusor의 특수 개체를 사용하여 구성 요소를 구성해 보세요. 함수 내부에 상태와 매개변수를 캡슐화합니다. 구성 요소 이름을 대문자로 입력하세요.

다음은 계산 버튼 구성 요소의 예입니다.

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

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

  const self = (
    <button
      click_e={() => {
        count += 1;
        update(self);
      }}
    >
      Clicked {() => count} times
    </button>
  );

  return self;
};

const App = () => (
  <div style="padding:1em">
    <p>Three counting buttons</p>
    <CountingButton />
    <CountingButton count={22} />
    <CountingButton count={333} />
  </div>
);

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

CountingButton 구성 요소는 애플리케이션의 나머지 부분에 영향을 주지 않고 자체 DOM 요소의 부분만 업데이트합니다.

위 구성요소의 작동 방식을 완전히 이해하고 나면 동일한 결과를 얻으면서 약간 더 짧게 다시 작성할 수 있습니다.

const CountingButton = ({ count = 0 }) => (
  <button
    click_e={(event, self) => {
      count += 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  </button>
);

모든 이벤트 핸들러 콜백 함수는 표준 이벤트 개체와 현재 특수 개체라는 두 가지 인수를 받습니다.

다시 한 번 위의 예를 이해했다면 동일한 구성요소의 가장 짧은 버전을 확인하세요.

const CountingButton = ({ count = 0 }) => (
  <button click_e_update={() => (count += 1)}>
    Clicked {() => count} times
  </button>
);

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

수명주기

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

단 4개의 스테이지로 구성됩니다:

1. 구성요소생성
2. DOM에 연결
3. 업데이트 DOM
4. DOM에서 연결 해제

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

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

  return (
    <div
      mount={(self) => {
        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
    </div>
  );
};

const instance = <IntervalCounter />;
const element = getElement(instance);

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

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

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

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

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

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

코딩 시작

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

SVG 아날로그 시계 예시도 확인해 보세요.

실제 적용 사례는 다음과 같습니다.

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

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

감사합니다

위 내용은 새로운 프런트엔드 프레임워크?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!