使用 JavaScript 组件构建一个笔记应用程序。
- Patricia Arquette原创
- 2024-12-13 01:14:10885浏览
当然，您已经了解了 Web 和 React 组件，但今天我将向您展示 koras.js 介绍的 JavaScript 组件。
您可能想知道“什么是 JavaScript 组件？”。它是一个无需构建的可重用 UI 组件，可以在没有虚拟 DOM 或标记模板的浏览器和服务器中工作。
它与 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 是 koras.js 提供的另一个实用程序，用于轻松访问和操作 DOM。
在本例中，$select 用于删除任何包含“write note...”的注释，以避免将它们与真实注释存储在一起。
Notes 组件的返回部分是出现在 DOM 中的部分，它是纯 HTML。
返回`
<div>
<p>表示组件的注释标记用>
</p>
<p>因此，该组件旨在每当单击添加注释按钮 ( ) 时添加新注释。</p>
<p>无论您使用框架还是普通 JavaScript，一切都可以共同使用尽可能少且最简洁的代码片段来创建一个笔记应用程序，从而在 JavaScript 中创建一个笔记应用程序。</p>
<p>您可能想知道这是如何以及为何有效的？如果您想了解更多信息，请查看 koras.js 文档，并且不要忘记在 GitHub 上的 koras.js 上为该项目加注星标。</p>
</div>
以上是使用 JavaScript 组件构建一个笔记应用程序。的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn