Erstellen Sie eine Notiz-App mit einer JavaScript-Komponente.-js-Tutorial-php.cn

Erstellen Sie eine Notiz-App mit einer JavaScript-Komponente.

Patricia Arquette

Freigeben： 2024-12-13 01:14:10

Original

883 Leute haben es durchsucht

Sicher, Sie haben etwas über Web- und React-Komponenten gelernt, aber heute zeige ich Ihnen die JavaScript-Komponente, wie sie von koras.js eingeführt wurde.

Sie fragen sich vielleicht: „Was ist eine JavaScript-Komponente?“. Es handelt sich um eine wiederverwendbare UI-Komponente ohne Build, die in Browsern und Servern ohne virtuelles DOM oder getaggte Vorlagen funktioniert.

Es ähnelt der React-Komponente, weist jedoch einige interessante Wendungen auf. Weitere Informationen hierzu finden Sie in den Dokumenten zu koras.js.

Sehen ist Glauben. Lassen Sie uns damit eine Notiz-App erstellen. Das Bild unten zeigt das Aussehen dessen, was wir erstellen werden, und Sie können es in Echtzeit ohne Bauprozess bei Noteapp verwenden

Build a note app with JavaScript component.

Jetzt schreiben wir den Code.

<!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") ?? "";
}

Nach dem Login kopieren

getNotes ruft Notizen aus dem lokalen Speicher ab oder gibt eine leere Zeichenfolge zurück, wenn nichts gefunden wird.

saveNote erfasst alle untergeordneten Elemente des Tags, das alle Notizen enthält, und speichert sie im lokalen Speicher in Form einer HTML-Zeichenfolge.

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

Nach dem Login kopieren

$select ist ein weiteres von koras.js bereitgestelltes Dienstprogramm zum einfachen Zugriff und Bearbeiten des DOM.

$select wird in diesem Fall verwendet, um alle Notizen zu löschen, die „Notiz schreiben…“ enthalten, um zu vermeiden, dass sie zusammen mit den echten Notizen gespeichert werden.

Der Rückgabeabschnitt der Notes-Komponente wird im DOM angezeigt und ist reines HTML.

Zurück `
  <div>



<p>Notes-Tag, das die Komponente darstellt, wird mit> identifiziert

</p><p>Die Komponente ist also so konzipiert, dass sie immer dann eine neue Notiz hinzufügt, wenn auf die Schaltfläche „Notiz hinzufügen“ ( ) geklickt wird.</p>

<p>Alles arbeitet zusammen, um eine Notiz-App mit dem minimalen und prägnantesten Code-Snippet zu erstellen, das jemals möglich war, um eine Notiz-App in JavaScript zu erstellen, unabhängig davon, ob Sie ein Framework oder Vanilla-JavaScript verwenden.</p>

<p>Sie fragen sich vielleicht, wie und warum das funktioniert? Wenn Sie mehr darüber erfahren möchten, schauen Sie sich die Dokumente zu koras.js an und vergessen Sie nicht, das Projekt auf GitHub unter koras.js zu markieren.</p>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Notiz-App mit einer JavaScript-Komponente.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!