Unduh Cample.js - Unduh Kode Sumber Cample.js

Cample.js

Komponen pihak ketiga

3.2.1-beta.1

Unduh

bercekcok

Cample.js - Salah satu kerangka kerja tercepat tanpa dom virtual di internet!

Situs Web • Dokumentasi • Contoh • Sumber Contoh

Versi Alpha

Tentang cample.js?

Cample.js adalah kerangka kerja JavaScript open source untuk membuat antarmuka pengguna. Kerangka kerja ini bekerja pada pendekatan berbasis komponen, di mana setiap komponen dapat saling berhubungan dengan mengimpor dan mengekspor keadaan saat ini. Cample.js tidak menggunakan DOM virtual untuk berinteraksi dengan DOM nyata, yang membuat proses reaktivitas lebih cepat.

Keuntungan utama

Diagram kinerja kerangka dan perpustakaan JavaScript.
Hasil berdasarkan rilis 123

Instalasi

Untuk membuat aplikasi, lebih baik menggunakan perintah cample-start resmi untuk menghasilkan "titik awal", memilih dari dua templat yang tersedia saat ini.

npx cample-start

Dua templat utama didasarkan pada dua bundler modul seperti Webpack dan Parcel. Untuk memilih salah satu dari mereka dari daftar di terminal, Anda dapat memilih yang paling cocok. Semuanya mendapat dukungan resmi.

Juga, untuk menginstal hanya kerangka kerja, Anda dapat menggunakan perintah berikut:

npm i cample

Dengan instalasi ini, fungsi masih akan tersedia langsung dari modul. Instalasi Menggunakan Cample-Start Cukup menentukan file start untuk aplikasi.

Memulai

Setelah mengatur titik awal aplikasi, file JS akan berisi kode berikut, atau yang sama, tetapi dengan impor HTML.

Javascript

 const newComponent = component (
  "new-component" ,
  `<div class="component">
    <div class="clicks" data-value="{{dynamicData}}">Clicks:{{dynamicData}}</div>
    <button class="button">Click</button>
  </div>` ,
  {
    script : ( { element , functions } ) => {
      const button = element . querySelector ( ".button" ) ;
      const updateFunction = ( ) => {
        functions ?. updateClicks ( ( data ) => {
          return data + 1 ;
        } ) ;
      } ;
      button . addEventListener ( "click" , updateFunction ) ;
    } ,
    data : ( ) => {
      return {
        dynamicData : 0 ,
      } ;
    } ,
    dataFunctions : {
      updateClicks : "dynamicData"
    } ,
  }
) ;
cample ( "#app" , {
  trimHTML : true ,
} ) . render (
`<template data-cample="new-component">
</template>` ,
  {
    newComponent
  }
) ;

Html

 < div id =" app " > </ div >

Anda dapat mengubah kode ini ke yang lain yang Anda inginkan. Kode ini disajikan sebagai contoh bagaimana kerangka kerja bekerja.

Artikel Tautan: Memulai.

Reaktivitas

Reaktivitas dalam kerangka dipahami sebagai kemampuan, sebagai respons terhadap perubahan data, untuk secara otomatis memperbarui bagian -bagian dari kode JavaScript atau node HTML yang menggunakan data ini.

Diagram ini menunjukkan bahwa data diperbarui ketika Anda menggunakan fungsi yang memperbaruinya. Artinya, seolah-olah pembaruan data utuh tunggal sedang dibuat. Dalam versi mendatang, struktur dapat berubah sedikit karena pemrosesan data asinkron.

Artikel Tautan: Reaktivitas.