Noor JS Pustaka UI JavaScript Baharu

NoorJs rangka kerja JavaScript UI yang ringan direka bentuk untuk membantu anda membina aplikasi yang pantas, cekap dan berskala. NoorJs dibina berdasarkan konsep First-Time-Rendering, yang bermaksud komponen anda dipaparkan sekali pada permulaan dan tidak akan dipaparkan semula melainkan anda memilihnya secara eksplisit. Anda mempunyai kawalan penuh ke atas masa dan cara komponen anda dipaparkan, membolehkan prestasi yang dioptimumkan.

Tidak seperti rangka kerja lain, NoorJs memaparkan komponen terus ke DOM tanpa bergantung pada DOM Maya (VDOM). Anda boleh mengubah suai paparan komponen anda dengan mudah dengan memanggil fungsi mudah, tanpa mencetuskan pemaparan semula.

NoorJs juga memperkenalkan cara yang berkuasa untuk mengurus negeri. Anda boleh mendengar perubahan kepada keadaan tertentu dan bertindak balas dengan sewajarnya, memastikan komponen anda kekal segerak dengan data anda. Selain itu, fungsi kitar hayat membolehkan anda melaksanakan tugas seperti mengambil data atau menyatakan kemas kini pada titik penting dalam kitaran hayat komponen anda.

Perkongsian data antara komponen dibuat dengan sangat mudah dengan API Saluran. Sama ada anda menghantar data kepada komponen anak, komponen induk atau komponen di luar skop langsung, API Saluran membenarkan aliran data yang lancar dan cekap.

Teruskan membaca dokumen ini untuk meneroka cara NoorJs boleh mengubah pendekatan anda untuk membina aplikasi web moden.

Ciri Utama :

• Perpustakaan Ringan
• Pemberian Kali Pertama
• Komponen Berasaskan Elemen
• Perenderan DOM Langsung
• Pengubahsuaian Pandangan yang Mudah
• Pengurusan Negeri Berkuasa
• API Saluran
• Kawalan Rendering Eksplisit
• Menyediakan ciri rangka kerja moden seperti JSX

Apl kaunter mudah ini akan menunjukkan kepada anda kuasa NoorJs

import { createRoot, renderRoot, element, Component } from "@noorjs/core";

// app component
function App(this: Component) {
  // initializing the component by call the element plug function and setting the component HTML tag
  element("div", this);
  // setting a counter state
  const { getCounter, setCounter } = this.state(0);

  // adding an event listener to increase the counter state whenever the component is clicked
  this.setEvent("onClick", () => {
    // increasing the counter state
    setCounter((c) => c + 1);
    // rerendering the app when the counter is clicked
    this.render();
  });

  console.log("This runs once");

  // returning an arrow function that returns the JSX to be rendered
  return () => <h2>{getCount()}</h2>;
}

// creating the root
const root = createRoot();

// render the component
renderRoot(root, [<App />]);

Dalam apl pembilang mudah ini kami memulakan komponen Apl kami dengan menggunakan fungsi palam elemen kemudian kami mencipta keadaan pembilang dengan 0 sebagai nilai awal, kemudian kami menambah pendengar acara onClick dengan fungsi setEvent untuk meningkatkan keadaan pembilang dan menyusun semula komponen dengan kaedah this.render (This Is The Power Of NoorJs. Render It When You Need It) kemudian kami kembalikan JSX.

NoorJs menganggap setiap komponen sebagai elemen HTML yang anda pilih apabila anda memulakan komponen anda. Untuk lebih banyak contoh lihat Dokumentasi

? NoorJs masih dalam pembangunan dan ia mempunyai banyak pepijat serta isu serta memerlukan bantuan dan sumbangan anda untuk menjadikannya stabil

Sila lihat Isu dan mulakan dengan menyumbang kepadanya

GITHUB
https://github.com/MESSELMIyahya/NoorJs

Atas ialah kandungan terperinci Noor JS Pustaka UI JavaScript Baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!