當然，您已經了解了 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中文網其他相關文章！
