Créez une application de notes avec un composant JavaScript.-js tutoriel-php.cn

Créez une application de notes avec un composant JavaScript.

Patricia Arquette

Libérer： 2024-12-13 01:14:10

original

883 Les gens l'ont consulté

Bien sûr, vous avez découvert les composants Web et React, mais aujourd'hui, je vais vous montrer le composant JavaScript tel qu'introduit par koras.js.

Vous vous demandez peut-être « Qu'est-ce qu'un composant JavaScript ? ». Il s'agit d'un composant d'interface utilisateur réutilisable sans construction qui fonctionne dans les navigateurs et les serveurs sans DOM virtuel ni modèles balisés.

Il est similaire au composant React mais avec quelques rebondissements intéressants. Vous pouvez en savoir plus à ce sujet dans la documentation koras.js.

Voir, c'est croire. Créons une application de notes avec. L'image ci-dessous montre l'apparence de ce que nous allons construire et vous pouvez l'utiliser en temps réel sans aucun processus de construction sur Noteapp

Build a note app with JavaScript component.

Maintenant, écrivons le 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") ?? "";
}

Copier après la connexion

getNotes récupère les notes du stockage local ou renvoie une chaîne vide si rien n'est trouvé.

saveNote récupère tous les enfants de la balise contenant toutes les notes et les stocke dans le stockage local sous la forme d'une chaîne HTML.

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

Copier après la connexion

$select est un autre utilitaire fourni par koras.js pour accéder et manipuler facilement le DOM.

$select est utilisé, dans ce cas, pour supprimer toute note contenant « écrire une note… » pour éviter de les stocker à côté des vraies notes.

La section de retour du composant Notes est ce qui apparaît dans le DOM et c'est du HTML pur.

retour `
  <div>



<p>La balise Notes qui représente le composant est identifiée par>

</p><p>Ainsi, le composant est conçu pour ajouter une nouvelle note chaque fois que vous cliquez sur le bouton Ajouter une note ( ).</p>

<p>Tout fonctionne ensemble pour créer une application de notes avec l'extrait de code le plus minimal et le plus concis possible pour créer une application de notes en JavaScript, que vous utilisiez un framework ou du JavaScript vanille.</p>

<p>Vous vous demandez peut-être comment et pourquoi cela fonctionne ? Si vous voulez en savoir plus à ce sujet, consultez la documentation koras.js et n'oubliez pas de mettre en vedette le projet sur GitHub à koras.js.</p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!