Rangka Kerja Hadapan Baharu?

Atau JavaScript Vanila dengan Dua Fungsi Pembantu?

Dalam artikel ini, saya akan membincangkan cara membangunkan web boleh guna semula komponen menggunakan perpustakaan Fusor dan faedah berbuat demikian.

Komponen sedemikian kemudiannya boleh digubah menjadi aplikasi web lengkap setanding dengan yang dibuat menggunakan React, Angular, Vue, Solid, Svelte dan lain-lain.

API Fusor hanya terdiri daripada dua fungsi utama:

• Buat elemen DOM yang dibalut dengan objek khas.
• Kemas kini elemen DOM yang dibalut dengan objek khas.

Tambahan beberapa lagi fungsi yang jarang digunakan seperti:

• Dapatkan elemen DOM daripada objek khas.

Anda tidak perlu tahu apa-apa tentang objek istimewa ini.

Buat Elemen DOM

Penciptaan melalui JSX

import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = <div>Seconds {count} elapsed</div>;

document.body.append(getElement(message)); // Get

Kami menggunakan fungsi buat dan dapatkan.

Penciptaan Bukan JSX Alternatif

import { div } from "@fusorjs/dom/html";
const message = div("Seconds ", count, " elapsed"); // Create

Kemas kini Elemen DOM

import { getElement, update } from "@fusorjs/dom";

let count = 0;
const message = <div>Seconds {() => count} elapsed</div>; // Create

document.body.append(getElement(message)); // Get

setInterval(() => {
  count += 1;
  update(message); // Update
}, 1000);

Kami menggunakan fungsi API kemas kini. Ia mengemas kini elemen DOM dan semua anak-anaknya secara rekursif. Ia mendapatkan semula nilai baharu daripada hasil fungsi, menjadikannya dinamik.

Kanak-kanak, atribut dan sifat semuanya boleh menjadi dinamik.

<div class={() => (toggle ? "on" : "off")} />

Kemas kini DOM akan berlaku hanya jika nilai baharu berbeza daripada nilai semasa.

Menetapkan Parameter

Kebanyakan masa, anda akan menetapkan parameter seperti biasa:

<div style="padding:1em" />

Walau bagaimanapun, kadangkala anda perlu membezakan antara atribut dan sifat. Untuk menentukan jenis mereka, anda boleh menambah akhiran _a atau _p pada nama mereka:

<div name1_a="attribute" name2_p="property" />

Untuk menambah pengendali acara, anda mesti sentiasa menggunakan akhiran _e:

<div click_e={() => "event handler"} />

Terdapat jenis tambahan, dan sesetengah daripadanya boleh mengambil tambahan pilihan untuk memastikan keserasian W3C penuh:

<div click_e_capture_once={() => "event handler"} />

Buat Komponen Boleh Guna Semula

Karang komponen anda menggunakan objek khas Fusor. Merangkum keadaan dan parameter di dalam fungsi. Gunakan huruf besar nama komponen anda.

Berikut ialah contoh komponen butang mengira:

import { getElement, update } from "@fusorjs/dom";

const CountingButton = (props) => {
  let count = props.count ?? 0; // Init State

  const self = (
    <button
      click_e={() => {
        count += 1;
        update(self);
      }}
    >
      Clicked {() => count} times
    </button>
  );

  return self;
};

const App = () => (
  <div style="padding:1em">
    <p>Three counting buttons</p>
    <CountingButton />
    <CountingButton count={22} />
    <CountingButton count={333} />
  </div>
);

document.body.append(getElement(App()));

Komponen CountingButton hanya mengemas kini sebahagian elemen DOMnya sendiri tanpa menjejaskan seluruh aplikasi.

Setelah anda memahami sepenuhnya cara komponen di atas berfungsi, anda boleh menulis semula dengan cara yang lebih pendek sambil mencapai hasil yang sama:

const CountingButton = ({ count = 0 }) => (
  <button
    click_e={(event, self) => {
      count += 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  </button>
);

Setiap fungsi panggil balik pengendali acara menerima dua argumen: objek acara standard dan objek khas semasa.

Sekali lagi, jika anda memahami contoh di atas, lihat versi terpendek komponen yang sama:

const CountingButton = ({ count = 0 }) => (
  <button click_e_update={() => (count += 1)}>
    Clicked {() => count} times
  </button>
);

Kami menambah pilihan kemas kini untuk memuat semula komponen selepas panggilan balik pengendali acara dipanggil, yang bersamaan dengan contoh sebelumnya.

Kitaran hayat

Aspek terakhir yang perlu kita fahami sebelum terjun ke dalam membangunkan aplikasi dunia sebenar ialah kitaran hayat komponen.

Ia hanya terdiri daripada empat peringkat:

1. Buat komponen
2. Sambung ke DOM
3. Kemas kini DOM
4. Putuskan sambungan daripada DOM

import { getElement, update } from "@fusorjs/dom";

const IntervalCounter = ({ count = 0 }) => {
  console.log("1. Create the component");

  return (
    <div
      mount={(self) => {
        console.log("2. Connect to the DOM");

        const timerId = setInterval(() => {
          count++;
          update(self);
          console.log("3. Update the DOM");
        }, 1000);

        return () => {
          clearInterval(timerId);
          console.log("4. Disconnect from the DOM");
        };
      }}
    >
      Since mounted {() => count} seconds elapsed
    </div>
  );
};

const instance = <IntervalCounter />;
const element = getElement(instance);

document.body.append(element);
setTimeout(() => element.remove(), 15000);

Harta pelekap mempunyai fungsi yang berjalan apabila komponen ditambahkan pada DOM. Fungsi ini mengambil satu hujah: objek khas semasa. Ia juga boleh mengembalikan fungsi lain yang berjalan apabila komponen dialih keluar daripada DOM.

Kami mengawal sepenuhnya empat peringkat kitaran hayat ini. Ini membolehkan kami membuat, mengemas kini dan membandingkan komponen menggunakan kaedah tak segerak atau serentak tersuai, dengan mengambil kira strategi dan bingkai animasi yang berbeza.

Ini mengakhiri Tutorial

Seperti yang anda boleh lihat daripada tutorial ini, Fusor adalah ringkas, ringkas dan jelas. Selalunya, anda hanya akan menggunakan dua fungsi APInya. Walau bagaimanapun, ia juga menawarkan banyak kawalan dan fleksibiliti apabila diperlukan.

Jadi, untuk menjawab soalan dalam tajuk, Fusor ialah perpustakaan JavaScript yang kecil, bukan rangka kerja, tetapi ia boleh mencapai hasil yang sama seperti rangka kerja lain.

Mulakan Pengekodan

Semua contoh di atas tersedia di CodeSandbox.

Selain itu, lihat contoh Jam Analog SVG.

Berikut ialah aplikasi dunia sebenar.

Projek pemula boilerplate:

• JavaScript Starter
• Pemula TypeScript

Terima kasih

Atas ialah kandungan terperinci Rangka Kerja Hadapan Baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!