Rumah >hujung hadapan web >tutorial js >Bina apl nota dengan komponen JavaScript.

Bina apl nota dengan komponen JavaScript.

Patricia Arquetteasal: 2024-12-13 01:14:10888semak imbas

Pasti, anda telah mempelajari tentang web dan komponen React tetapi hari ini, saya akan menunjukkan kepada anda komponen JavaScript seperti yang diperkenalkan oleh koras.js.

Anda mungkin tertanya-tanya "Apakah komponen JavaScript?". Ia ialah komponen UI boleh guna semula tanpa binaan yang berfungsi dalam penyemak imbas dan pelayan tanpa DOM maya atau templat berteg.

Ia serupa dengan komponen React tetapi dengan beberapa kelainan yang menarik. Anda boleh mengetahui lebih lanjut mengenainya daripada koras.js docs.

Melihat adalah percaya. Mari bina apl nota dengannya. Imej di bawah menunjukkan rupa perkara yang akan kami bina dan anda boleh menggunakannya dalam masa nyata tanpa sebarang proses pembinaan di Noteapp

Build a note app with JavaScript component.

Sekarang, mari tulis kod.

<!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 mendapat nota daripada storan setempat atau mengembalikan rentetan kosong jika tiada apa yang ditemui.

saveNote mengambil semua kanak-kanak tag yang mengandungi semua nota dan menyimpannya dalam storan setempat dalam bentuk rentetan HTML.

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

$select ialah satu lagi utiliti yang disediakan oleh koras.js untuk mengakses dan memanipulasi DOM dengan mudah.

$select digunakan, dalam kes ini, untuk memadam sebarang nota yang mengandungi “tulis nota…” untuk mengelak daripada menyimpannya bersama nota sebenar.

Bahagian kembali komponen Nota ialah apa yang muncul dalam DOM dan ia adalah HTML tulen.

kembali `
  <div>



<p>Teg nota yang mewakili komponen dikenal pasti dengan>

</p><p>Jadi, komponen itu direka untuk menambah nota baharu apabila butang tambah nota ( ) diklik.</p>

<p>Semuanya berfungsi bersama untuk membuat apl nota dengan coretan kod yang minimum dan paling ringkas yang mungkin untuk mencipta apl nota dalam JavaScript sama ada anda menggunakan rangka kerja atau JavaScript vanila.</p>

<p>Anda mungkin tertanya-tanya bagaimana dan mengapa ini berfungsi? Jika anda ingin mengetahui lebih lanjut tentang itu, semak dokumen koras.js dan jangan lupa bintangkan projek pada GitHub di koras.js.</p>

Atas ialah kandungan terperinci Bina apl nota dengan komponen JavaScript.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html String if select delete JS dom this github ui everything Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mendapatkan Nilai Butang Radio Terpilih dalam JavaScript?Artikel seterusnya：Bagaimanakah Saya Boleh Mendapatkan Nilai Butang Radio Terpilih dalam JavaScript?

Artikel berkaitan

Lihat lagi