CalDOM
ve++
Perpustakaan UI JavaScript Agnostik, Reaktif & Minimalis (3KB) dengan akses langsung ke DOM asli.
Alih-alih menarik Anda ke dunia magis khusus perpustakaan, Caldom membiarkan Anda sepenuhnya mengakses DOM secara langsung sambil menjaga reaktivitas ? Jadi Anda bisa memanfaatkan sepenuhnya API asli & mencampurnya dengan perpustakaan lain untuk mendapatkan kinerja & fleksibilitas yang unggul dalam proses pengembangan.
Pendekatan Virtual-Dom & No-Virtual-Virtual 2-in-Virtual jika Anda mau.
0️⃣ Nol Tooling, 0️⃣ Ketergantungan Nol, 0️⃣ Nol Sintaks Baru, Just Pure JS.
Intinya, Caldom hanyalah pembungkus di sekitar simpul/elemen asli. Penurunan kinerja keseluruhan sekitar 0,04x dibandingkan dengan vanilla/javascript murni. Ini didasarkan pada tolok ukur level unit rata-rata dalam menangani instance tunggal & elemen ganda: Lihat hasil benchmark terhadap vanilla JS, jQuery, React JS, Vue & lainnya.
Situs Resmi: Caldom.org
Dokumentasi: caldom.org/docs/
Gunakan sebagai pelari DOM yang dapat diikat dan manipulator, alternatif jQuery yang ringan.
_ ( "#output-1" )
. append (
_ ( "+h1" ) . text ( "Hello World!" )
) ;
//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; Membangun komponen reaktif. Gunakan sebagai alternatif React JS/Vue JS ringan. Tidak menggunakan kelas, mirip dengan react hook, tetapi lebih sederhana.
let app = _ ( ) . react (
{ } ,
{
render : state =>
_ ( "+h1" , `Hello ${ state . name } ` ) //This is XSS safe by design
}
)
_ ( "#output-2" , app ) ;
//Edit below line to update state
app . state . name = "World Reactively ?" ; Juga berfungsi sebagai kelas ES6 yang diperluas.
class HelloWorld extends _ . Component {
constructor ( state ) {
super ( ) ;
this . react ( state ) ;
}
render ( state ) {
return _ ( "+div" , [ //Can pass children as an array too
_ ( "+h1" , "Hello " + state . name ) ,
_ ( "+p" , [ "The time is: " , state . time ] )
] ) ;
}
tick ( ) {
this . state . time = new Date ( ) . toTimeString ( ) . substr ( 0 , 8 ) ;
}
didMount ( ) {
setInterval ( ( ) => this . tick ( ) , 1000 ) ;
}
}
let app = new HelloWorld ( { name : "World!" , time : "" } ) ;
_ ( "#output-3" , app ) ; Node Dom Asli adalah warga negara kelas satu. Juga, contoh Caldom hanyalah pembungkus di sekitar mereka. Interoperabilitas agnostik ini memungkinkan integrasi yang kuat dalam jumlah yang tak terbatas.
let app = _ ( ) . react (
{ } ,
{
render : state => {
let div = document . createElement ( "div" ) ;
let heading = document . createElement ( "h1" ) ;
heading . textContent = `I'm a reactive ${ state . name } ` ;
div . appendChild ( heading ) ;
//.elem gives you the direct Element
div . appendChild ( _ ( "+h2" , "???" ) . elem )
return div ;
}
}
)
_ ( "#output-3-1" , app ) ;
app . state . name = "native DOM Element. ?" ; Bukan penggemar rendering & virtual-dom hal? Gunakan Caldom untuk memperbarui () konten HTML yang telah ditentukan sebelumnya secara reaktif. API Caldom terinspirasi oleh jQuery.
let person_one = _ ( "#person-1" ) . react (
{ } ,
{
update : function ( state , person ) {
person . find ( ".name" ) . text ( state . name ) ;
person . find ( ".age" ) . text ( state . age ) ;
}
}
)
//CalDOM batches these 2 state updates to only render once.
person_one . state . name = "Jane Doe" ;
person_one . state . age = 22 ; Perbarui secara efisien () DOM secara langsung dan/atau lanjutkan ke virtual-dom render jika lebih cocok. Gunakan ini. $ Untuk menahan referensi simpul Dom Direct. Caldom membuat mereka tetap sinkron bahkan ketika render () secara drastis mengubah struktur DOM.
class Person extends _ . Component {
constructor ( ) {
super ( ) ;
this . react ( { name : "John" , likes : [ "SpongeBob" ] } ) ;
}
render ( state ) {
return _ ( "+div" , [
//Saving a reference to the direct DOM Element
this . $ . title = _ ( "+h1" , `I'm ${ state . name } ` ) . elem ,
_ ( "+p" , "I like " + state . likes . join ( " & " ) )
] ) ;
}
update ( state , person , changed_keys , changes_count ) {
if ( changes_count != 1 || ! ( "name" in changed_keys ) )
// Too complex to update, proceed to render.
return true ;
else //Update name directly using the DOM reference
this . $ . title
. textContent = `I'm ${ state . name } Directly. ?` ;
}
}
let user = new Person ( ) ;
_ ( "#output-4" , user ) ;
user . state . likes . push ( "Hulk" ) ; //This is handled by render()
setTimeout ( ( ) =>
user . state . name = "Jane" //This is handled by update()
, 1000 ) ; Caldom terintegrasi mulus dengan komponen web. Gunakan Caldom untuk membuat komponen web yang stateful & reaktif. Ini juga menerima komponen web sebagai input.
class CustomElement extends HTMLElement {
connectedCallback ( ) {
let title = _ ( ) . react (
{ msg : "Hello World!" } ,
{
render : state =>
_ ( "+h2" , state . msg )
}
) ;
// Appending H2 as a child, keeping root intact
// this = <custom-element>
_ ( this , title ) ;
//Just a shortcut to access state easily
this . state = title . state ;
}
doSomething ( ) {
alert ( "Cool Eh!" ) ;
}
}
//Registering custom element.
customElements . define ( "custom-element" , CustomElement ) ;
let hello = document . createElement ( "custom-element" ) ;
document . getElementById ( "output-5-1" ) . appendChild ( hello ) ;
hello . state . msg = "I'm a Reactive, Stateful & Native Web Component. " ;
//Creating a new web component using CalDOM
_ ( "#output-5-1" ) . prepend ( _ ( "+custom-element" ) )Anda dapat menggunakan elemen khusus ini dalam kode HTML secara asli seperti biasa. Perhatikan bahwa dukungan browser untuk komponen web relatif baru (95%). Masa depan terlihat cerah! ?
< custom-element onclick =" doSomething() " >
</ custom-element >
< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > Kotak Basic Building Caldom hanyalah simpul/elemen asli. Dengan demikian, membuatnya kompatibel dengan hampir semua pustaka DOM di web.
class HelloJquery extends _ . Component {
constructor ( ) {
super ( ) ;
this . react ( { prompt : "" } ) ;
}
render ( state ) {
//Creating element & attaching click event using jQuery
return $ ( "<h1></h1>" )
. text ( state . prompt )
. click ( ( ) => state . prompt = "Hello from jQuery!" ) [ 0 ] ;
}
}
let app = new HelloJquery ( ) ;
_ ( "#output-6" , app ) ;
app . state . prompt = "Click Me!" Anda dapat menggunakan pustaka seperti JS-DOM untuk mengimplementasikan konteks browser di server.
const { JSDOM } = require ( "jsdom" ) ;
//Set window in the global scope
window = new JSDOM ( ) . window ;
const _ = require ( "caldom" ) ;
class ServerApp extends _ . Component {
constructor ( ) {
super ( ) ;
this . react ( { msg : "" } ) ;
}
render ( state ) {
return _ ( "+p" , state . msg )
. css ( "color" , "#199646" )
}
}
let app = new ServerApp ( ) ;
_ ( "body" , app ) ;
app . react ( { msg : "Hello from NodeJS " + process . version } ) ;
//Saving generated HTML by the component to a file
require ( "fs" ) . writeFileSync (
"static_content.html" ,
window . document . body . innerHTML
) ;Kunjungi caldom.org untuk bereksperimen dengan banyak contoh kode langsung.
< script src =" https://unpkg.com/caldom " > </ script >Caldom menggunakan variabel '_' sebagai tangan pendek global secara default. Untuk menggunakan alias yang berbeda, atur window ['_ cal_dom_alias'] = 'berbeda_alias' sebelum memuatnya.
Caldom tidak melampirkan apa pun pada lingkungan global ketika digunakan sebagai modul.
npm install caldom //CalDOM also runs on Node JS with js-dom
const _ = require ( 'caldom' ) ; //RequireJS
requirejs ( [ "caldom" ] , function ( _ ) { } ) ; //ES6 Module
import _ from "./dist/caldom.min.mjs.js" ;Kontribusi Anda sangat disambut dan terima kasih sebelumnya. Pastikan untuk unit-test setelah perubahan.
Menerapkan tes
Dokumentasi/panduan yang ramah-pemula. Saat ini terlalu teknis.
Menerapkan output debug yang bermanfaat untuk versi pengembangan.
Tes versi browser menyeluruh.
Lebih lanjut mengoptimalkan algoritma DOM virtual DOM. Lihat Benchmark di sini
Perlu membandingkan implementasi yang lebih besar (seperti dalam spreadsheet di mana setiap sel adalah sub-komponen?)
Saat ini, seluruh kode sumber ada dalam satu file. Jadi tidak ada proses pembangunan yang besar selain menggunakan Uglify-Js untuk meminimalkannya.
Ini cukup membangun .min.js & .min.mjs.js & .Map terkait di folder ./dist/.
# Install dev dependencies
npm install
# Build
npm run buildSumber tes dan tolok ukur ada di ./tests_and_benchmarks. Caldom menggunakan kerangka pengujian unit & pembandingan baru yang disebut PFREAK. Yang dibuat sebagai proyek sampingan Caldom.
Hasil uji unit untuk bangunan terbaru tersedia di caldom.org/tests/
Memulai pfreak setelah instalasi untuk mengatur tautan sym dengan benar
pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/Tes unit
npm testatau
pfreak test ./tests_and_benchmarks/internal/Jalankan tolok ukur terhadap perpustakaan lain (ini membutuhkan banyak waktu, Anda dapat menjalankan tugas secara selektif menggunakan bendera.)
cd ./tests_and_benchmarks/external/
pfreak benchmarkRujuk bantuan PFREAK untuk detailnya
pfreak --help
