ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript コンポーネントを使用してメモ アプリを構築します。
JavaScript コンポーネントを使用してメモ アプリを構築します。
- Patricia Arquetteオリジナル
- 2024-12-13 01:14:10885ブラウズ
Web コンポーネントと React コンポーネントについては学習しましたが、今日は koras.js によって導入された JavaScript コンポーネントについて説明します。
「JavaScript コンポーネントとは何ですか?」と疑問に思われるかもしれません。これは、仮想 DOM やタグ付きテンプレートなしでブラウザーやサーバーで動作する、ビルド不要の再利用可能な UI コンポーネントです。
これは React コンポーネントに似ていますが、興味深い工夫がいくつかあります。詳細については、koras.js ドキュメントを参照してください。
百聞は一見にしかず。これを使ってメモアプリを作ってみましょう。下の画像はこれから構築するものの外観を示しており、Noteapp
で構築プロセスなしでリアルタイムで使用できます。
それでは、コードを書いてみましょう。
<!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 によって提供されるもう 1 つのユーティリティです。
$select は、この場合、実際のメモと一緒に保存されるのを避けるために、「write note…」を含むメモを削除するために使用されます。
Notes コンポーネントの return セクションは DOM に表示されるものであり、純粋な HTML です。
リターン `
<div>
<p>コンポーネントを表す Notes タグは次のように識別されます>
</p>
<p>コンポーネントは、メモの追加ボタン ( ) がクリックされるたびに新しいメモを追加するように設計されています。</p>
<p>すべてが連携して、フレームワークを使用するかバニラ JavaScript を使用するかに関係なく、JavaScript でメモ アプリを作成するために可能な最小限で最も簡潔なコード スニペットを使用してメモ アプリを作成します。</p>
<p>これがどのように、そしてなぜ機能するのか疑問に思われるかもしれません。これについて詳しく知りたい場合は、koras.js のドキュメントを確認し、GitHub の koras.js でプロジェクトにスターを付けることを忘れないでください。</p>
</div>
以上がJavaScript コンポーネントを使用してメモ アプリを構築します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。