Bina apl nota dengan komponen JavaScript.-tutorial js-php.cn

Bina apl nota dengan komponen JavaScript.

Patricia Arquette

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

asal

883 orang telah melayarinya

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

Salin selepas log masuk

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);
}

Salin selepas log masuk

$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>

Salin selepas log masuk

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