HyperApp : 프론트 엔드 앱을 구축하기위한 1 KB JavaScript 라이브러리

<: :> HyperApp : 기능이 풍부한 웹 애플리케이션을 구축하기위한 간소화 된 JavaScript 라이브러리 HyperApp은 기능이 풍부한 웹 애플리케이션을 구축하기위한 가벼운 JavaScript 라이브러리입니다. 그것은 다른 라이브러리에 의존하지 않고도 주요 업데이트 및 라이프 사이클 이벤트를 지원하는 VDOM 엔진과 실용적이고 Elm에서 영감을 얻은 상태를 결합합니다. 소스 코드 크기가 최소화되고 GZIP 압축이 약 1KB입니다.

이 튜토리얼은 HyperApp을 소개하고 일부 코드 예제를 신속하게 시작할 수 있도록 도와줍니다. HTML과 JavaScript에 대한 이해가 있다고 가정하지만 다른 프레임 워크를 사용한 경험이 필요하지 않습니다.

키 포인트

HyperApp은 개발자가 상태 관리를 가상 DOM 엔진과 약 1KB의 가상 DOM 엔진과 결합하는 웹 응용 프로그램을 구축 할 수있는 소형 JavaScript 라이브러리입니다.

HyperApp으로 구축 된 응용 프로그램은 단일 상태 객체, 상태를 수정하는 작업 및 상태 및 작업을 사용자 인터페이스로 변환하는 뷰로 구성됩니다. 상태는 응용 프로그램의 데이터 모델을 설명하고 불변의 일반적인 JavaScript 객체입니다.

HyperApp은 각 렌더링 사이클에서 처음부터 처음부터 생성 된 실제 DOM의 모습에 대한 설명 인 가상 DOM을 사용합니다. 일반적으로 변경 해야하는 노드 만 있으므로 고효율이 높아집니다.

HyperApp은 JSX (동적 HTML을 나타내는 JavaScript 언어 확장) 또는 단독으로 사용할 수 있습니다. UNPKG와 같은 CDN에서 HyperApp을로드 할 수도 있으며 Window.hyperApp 객체를 통해 전 세계적으로 사용할 수 있습니다. HyperApp은 React 또는 VUE와 같은 다른 라이브러리에 비해 단순하며 작고 웹 애플리케이션을 구축하기위한 완벽한 솔루션이기 때문입니다. 또한 상태 기능으로보기 개념을 개발하고 ELM에서 영감을 얻은 주정부 관리 솔루션이 내장되어 있습니다.

안녕하세요 세계

• 우리는 모든 구성 요소가 함께 작동하는 것을 보여주는 간단한 데모로 시작합니다. 이 코드를 온라인으로 시도 할 수도 있습니다.
• 이것은 대략적으로 각 HyperApp 응용 프로그램의 모습입니다. 단일 상태 객체, 상태를 채우는 작업 및 상태 및 작업을 사용자 인터페이스로 변환하는 견해입니다.
• 기능 내에서, 우리는 귀하의 상태와 운영을 복사하고 (소유하지 않는 객체를 수정하는 것은 무례합니다)와 견해로 전달합니다. 또한 상태가 변경 될 때마다 응용 프로그램이 다시 렌더링되도록 귀하의 행동을 마무리합니다.
• 상태는 응용 프로그램 데이터 모델을 설명하는 일반적인 JavaScript 객체입니다. 또한 불변입니다. 그것을 변경하려면 조치를 정의하고 전화해야합니다.
• 보기에서, 상태의 속성을 표시하고이를 사용하여 UI의 어떤 부분을 표시하거나 숨겨야하는지를 결정할 수 있습니다.

도 DOM 이벤트에 작업을 첨부하거나 자신의 인라인 이벤트 처리기에서 작업을 호출 할 수 있습니다.

import { h, app } from "hyperapp";
// @jsx h

const state = { count: 0 };

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
};

const view = (state, actions) => (
  <div>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
);

app(state, actions, view, document.body);

운영은 상태를 직접 수정하지는 않지만 국가의 새 클립을 반환합니다. 행동으로 상태를 수정 한 다음 반환하려고하면 예상대로 뷰가 다시 나타나지 않습니다.

<🎜 🎜> <<> 통화는 상태 업데이트 뷰 렌더링 사이클에 연결된 작동 오브젝트를 반환합니다. 또한보기 기능 및 작업 에서이 객체를받습니다. 다른 프로그램, 프레임 워크 또는 기본 JavaScript에서 응용 프로그램과 상호 작용할 수 있기 때문에이 개체를 외부 세계에 노출시키는 것이 매우 유용합니다.

app(state, actions, view, document.body);

app <<> (나머지 내용은 비슷하지만 문장은 동의어와 문장 구조 조정으로 대체되어 원래 의미를 변경하지 않고 길이가 너무 길고 여기에서 생략)

const state = { count: 0 };

요약 : HyperApp은 매우 작은 크기와 단순한 디자인으로 효율적인 웹 애플리케이션을 구축하기위한 경량 솔루션을 제공합니다. 학교 관리 및 가상 DOM에서 강력한 기능을 제공하면서 학습하기 쉬운 기능을 유지하고 사용 기능을 유지합니다. 소규모 프로젝트이든 대규모 응용 프로그램이든 HyperApp은 효율적이고 유연한 개발 경험을 제공 할 수 있습니다.

(그림은 원래 형식으로 남아 있고 위치가 변경되지 않음)

위 내용은 HyperApp : 프론트 엔드 앱을 구축하기위한 1 KB JavaScript 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!