JavaScript 구성 요소를 사용하여 메모 앱을 구축합니다.-JS 튜토리얼-php.cn

JavaScript 구성 요소를 사용하여 메모 앱을 구축합니다.

Patricia Arquette

풀어 주다： 2024-12-13 01:14:10

원래의

942명이 탐색했습니다.

물론 웹과 리액트 컴포넌트에 대해서 배웠지만 오늘은 koras.js에서 소개하는 자바스크립트 컴포넌트를 보여드리겠습니다.

'자바스크립트 컴포넌트란 무엇인가?'라고 궁금하실 수도 있습니다. 가상 DOM이나 태그가 지정된 템플릿 없이 브라우저와 서버에서 작동하는 빌드가 필요 없는 재사용 가능한 UI 구성요소입니다.

React 구성 요소와 유사하지만 몇 가지 흥미로운 변형이 있습니다. koras.js 문서에서 이에 대해 자세히 알아볼 수 있습니다.

보는 것이 곧 믿는 것입니다. 그걸로 노트 앱을 만들어 봅시다. 아래 이미지는 우리가 빌드할 내용의 모습을 보여주며 노트앱에서 별다른 빌드 과정 없이 실시간으로 사용할 수 있습니다

Build a note app with JavaScript component.

이제 코드를 작성해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>



<p>The code above shows the HTML structure of the app. The code below is for the main operations.<br>
</p>

<pre class="brush:php;toolbar:false">import {
  $render,
  $register
} from "https://cdn.jsdelivr.net/npm/@codingnninja/koras/dist/esm/koras.min.js";

function Notes() {
  function getNotes() {
    return localStorage.getItem("notes") ?? "";
  }


  function saveNote(event) {
    $select(".note[delete|textContent=write note...]");
    const notes = $select("#notes");
    localStorage.setItem("notes", notes.innerHTML);
  }


  return `
    <div>



<p>Though the code is self explanatory, let’s explain it a bit. We import $render and $register from koras.js to render our note app without any build process.</p>

<p>$register is used to prepare JavaScript components for rendering with $render. That means we need to register a component before rendering it.</p>

<p>Notes component contains two local functions named getNotes and saveNotes.<br>
</p>

<pre class="brush:php;toolbar:false">function getNotes() {
  return localStorage.getItem("notes") ?? "";
}

로그인 후 복사

getNotes는 로컬 저장소에서 메모를 가져오거나 아무것도 발견되지 않으면 빈 문자열을 반환합니다.

saveNote는 모든 노트가 포함된 태그의 모든 하위 항목을 가져와 HTML 문자열 형식으로 로컬 저장소에 저장합니다.

function saveNote(event) {
  $select(".note[delete|textContent=write note...]");
  const notes = $select("#notes");
  localStorage.setItem("notes", notes.innerHTML);
}

로그인 후 복사

$select는 DOM에 쉽게 접근하고 조작할 수 있도록 koras.js에서 제공하는 또 다른 유틸리티입니다.

이 경우 $select는 "write note…"가 포함된 메모를 삭제하여 실제 메모와 함께 저장되는 것을 방지하는 데 사용됩니다.

Notes 구성요소의 반환 섹션은 DOM에 나타나는 것으로 순수 HTML입니다.

반환 `
  <div>



<p>구성요소를 나타내는 Notes 태그는 다음으로 식별됩니다.>

</p><p>그래서 컴포넌트는 노트 추가 버튼( )을 클릭할 때마다 새 노트를 추가하도록 설계되었습니다.</p>

<p>모든 것이 함께 작동하여 프레임워크를 사용하든 바닐라 JavaScript를 사용하든 관계없이 JavaScript로 노트 앱을 만들 수 있는 최소한의 가장 간결한 코드 조각으로 노트 앱을 만듭니다.</p>

<p>이것이 어떻게, 왜 작동하는지 궁금하실 것입니다. 이에 대해 더 알고 싶으시면 koras.js 문서를 확인하고 GitHub의 koras.js에서 프로젝트에 별표를 표시하는 것을 잊지 마세요.</p>

로그인 후 복사

위 내용은 JavaScript 구성 요소를 사용하여 메모 앱을 구축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!