Nanny State와의 JavaScript의 간단한 국가 관리

<: :> Nanny State : 간소화 된 바닐라 JS 주 관리 도서 Nanny State는 기본 JavaScript를 사용하여 상태 기반 웹 응용 프로그램을 구축하는 프로세스를 단순화하도록 설계된 미니 라이브러리입니다. 반응과 비슷하지만 오버 헤드가 적 으면 새로운 구문을 배울 필요가 없습니다. 각 구성 요소에 고유 한 상태를 갖도록하는 대신 단일 응용 프로그램 전체 상태 객체를 사용합니다. HyperApp에서 영감을 얻었으며 Elm과 많은 유사점이 있습니다.

이 기사는 Nanny State의 작동 방식을 설명하고 몇 가지 예를 통해 기능을 보여줍니다.

키 포인트 :

Nanny State 소개 : Nanny State는 Native JavaScript를 사용하여 상태 기반 웹 응용 프로그램을 구축하기위한 미니멀리스트 라이브러리입니다. HyperApp 및 Elm에서 영감을 얻은 각 구성 요소의 단일 상태가 아닌 단일 응용 프로그램 전체 상태 객체를 사용하며 새로운 구문을 배우지 않고 쉽게 채택 할 수 있도록 설계되었습니다.

일원 데이터 흐름 모델 : 이 라이브러리는 단방향 데이터 흐름 모델을 기반으로하며 세 가지 핵심 부분으로 구성됩니다 : 상태 (모든 응용 프로그램 데이터를 보유하는 객체) 및보기 (AN 현재 상태를 기준으로 반환). 이 모델은 상태 객체를 사실의 유일한 원천으로서 단순성을 강조하여 결정론, 일관성 및 응용 행동 행동의 예측 가능성을 보장합니다.

실제 사례 및 확장 성 :

실기 예제 (기본 "Hello Nanny State"응용 프로그램 및보다 복잡한 True and False Q & A 게임 포함)를 통해이 기사는 Nanny State Simplicity 및 효율성으로 역동적 인 반응을 구축하는 것을 보여줍니다. 스타일 웹 응용 프로그램의. 최소한의 코드로 대화 형 애플리케이션을 만들 수있는 라이브러리의 잠재력과 Q & A 게임을 확장하기위한 제안, Nanny State의 다목적 성 및 로컬 스토리지 및 라우팅과 같은 고급 기능에 대한 지원을 강조합니다.

일방 통과 데이터 흐름

Nanny State는 세 부분으로 구성된 단방향 데이터 흐름 모델을 사용합니다.
1. 상태 : 모든 애플리케이션 데이터를 저장하는 객체입니다. 보기 (보기) : 현재 상태에 따라 html 문자열을 반환하는 함수. 업데이트 :
주를 변경하고보기를 다시 렌더링 할 수있는 유일한 함수.
2. Nanny State에서는 주가 전부입니다. 상태 객체는 응용 프로그램의 유일한 사실입니다. 애플리케이션 데이터의 일부는이 개체의 속성입니다. 보기에 사용되는 이벤트 핸들러조차도 상태 객체의 속성입니다.
보기는 HTML로서 상태를 표현한 것입니다. 상태가 변경 될 때 변경되고 사용자가 응용 프로그램과 상호 작용할 수 있습니다.
3. 업데이트 기능은 상태를 변경하는 유일한 방법입니다. 상태를 업데이트하기위한 단일 진입 지점이며 변경이 결정적이고 일관되며 예측 가능하도록합니다.

   Nanny State 응용 프로그램을 구축하려면이 세 부분 만 필요합니다. 실제로, 그것은 다음 세 가지 질문으로 요약 될 수 있습니다 :

   내 애플리케이션은 어떤 데이터를 저장해야합니까? 이것은 상태 객체의 속성을 형성합니다.

   페이지에서 응용 프로그램 데이터를 어떻게 렌더링하기를 원합니까? 이렇게하면보기 기능을 만드는 데 도움이됩니다.
   사용자가 응용 프로그램과 상호 작용할 때 애플리케이션 데이터는 어떻게 변경됩니까? 이를 위해서는 기능을 업데이트해야합니다.
   Hello Nanny State! Nanny State의 작동 방식을 이해하는 가장 쉬운 방법은 일부 코드를 작성하는 것입니다! 우리는 기본적인 예로 시작하여 더 복잡한 것을 만들려고 노력할 것입니다.
   2. 다음 예제를 실행하는 가장 쉬운 방법은 Codepen과 같은 온라인 코드 편집기를 사용하거나 Nodejs를 사용하여 Nanny-State 패키지를 설치하여 로컬로 실행할 수 있습니다.
   코드 펜의 JS 부분에 다음 코드를 복사하십시오. <li> <the> 이것은 유모 상태의 세 부분이 어떻게 협력하는지 보여줍니다. 각 섹션을 자세히 살펴 보겠습니다 </the> </li> <uses> nanny state는 µhtml을 사용하여 html을 렌더링합니다. 뷰 함수 </uses>
   항상

   는 상태 객체를 고유

   매개 변수로 허용합니다. 그런 다음 µhtml에서 제공하는 HTML 함수를 사용하여 매개 변수로 제공된 템플릿 리터럴을 기반으로 HTML을 만듭니다.

   템플릿 리터럴을 사용한다는 것은

   기호를 사용하여 상태의 속성을보기에 삽입 할 수 있음을 의미합니다. 이 예에서는 이름 속성의 값을

   요소에 삽입하는 데 사용합니다.

   상태 객체는 모든 응용 프로그램 데이터가 저장되는 곳입니다. 여기에는이 예제의 이름 속성과 같이 응용 프로그램 수명에 따라 변경 될 수있는보기에 표시 될 속성과 값이 포함되어 있습니다.

   보기는 또한 객체 약어 표기법을 사용하는 상태의 속성이기도합니다.

   import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';
   
   const View = state => html`<h1>Hello ${state.name}</h1>`;
   
   const State = {
     name: "Nanny State",
     View
   };
   
   const Update = Nanny(State);

   상태를 기억하십시오. 상태는 모든 것입니다.
   마지막 줄은 업데이트 기능을 보모 함수의 반환 값으로 정의합니다. 이것은 이제 상태의 모든 속성 값을 업데이트하는 데 사용할 수 있습니다. 실제로 이것은 상태의 모든 속성을 업데이트하는 유일한 방법입니다. 또한 상태로 제공된 값에 따라보기의 초기 렌더링을 수행합니다. 이것은 아래 코드펜에 표시된 것처럼 "Hello Nanny State"라는 단어로 제목이 표시 될 것임을 의미합니다. ... (후속 내용은 언어와 표현이 조정되고 원본 텍스트는 변경되지 않으며 모든 그림과 그 형식이 유지된다는 것을 제외하고는 원본 텍스트와 유사합니다.)

   const View = state => html`<h1>Hello ${state.name}</h1>`;

위 내용은 Nanny State와의 JavaScript의 간단한 국가 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!