Choo js

by Agas
Read time: 55 minutes
 Choo js
Kerangka kerja 4kb untuk membuat aplikasi frontend yang kokoh

Stabilitas API Versi NPM Status Bangun Cakupan Tes Unduh Standar

 Situs web | Buku Pegangan | Ekosistem | Berkontribusi | Reddit | Obrolan

Kerangka kecil yang bisa. Dibangun dengan ❤︎ oleh Yoshua Wuyts dan kontributor

 Daftar Isi

 fitur

  • ukuran minimal: beratnya 4kb , Choo adalah kerangka kecil kecil
  • berbasis acara: sistem acara pemain kami memudahkan penulisan aplikasi
  • api kecil: dengan hanya 6 metode tidak banyak yang bisa dipelajari
  • tooling minimal: dibangun untuk kompiler browserify terdepan
  • isomorfik: merender dengan mulus di Node dan browser
  • sangat lucu: choo choo!

 Contoh

  var html = membutuhkan ( ' choo / html ' )
 var devtools = membutuhkan ( ' choo-devtools ' )
 var choo = membutuhkan ( ' choo ' )

 var app = choo ()
 aplikasi .  gunakan ( devtools ())
 aplikasi .  gunakan (countStore)
 aplikasi .  rute ( ' / ' , mainView)
 aplikasi .  mount ( ' body ' )

 function mainView ( state , emit ) {
   return html `
 < tubuh >
 < h1 > hitungannya adalah $ { state .  hitung } </ h1 >
 < button onclick = $ {onclick} > Peningkatan </ button >
 </ body >
 `

   function onclick () {
     emit ( ' increment ' , 1 )
   }
 }

 function countStore ( status , emitor ) {
   negara .  hitung = 0
   emitor .  on ( ' increment ' , function ( count ) {
     negara .  count + = count
     emitor .  emit ( ' render ' )
   })
 } 

Ingin melihat lebih banyak contoh? Lihatlah buku pegangan Choo .

 Filsafat

Kami percaya pemrograman harus menyenangkan dan ringan, tidak keras dan membuat stres. Itu keren untuk menjadi lucu;menggunakan kata-kata serius tanpa menjelaskannya tidak membuat hasil yang lebih baik - jika ada yang membuat orang takut. Kami tidak ingin menjadi menakutkan, kami ingin menjadi baik dan menyenangkan, dan kemudian dengan santaimenjadi pilihan terbaik. Santai dengan santai.

Kami percaya kerangka kerja harus sekali pakai, dan komponen dapat didaur ulang. Kami tidak ingin jaring tempat kebun bertembok dengan cemburu saling bersaing. Dengan menjadikan DOM sebagai common denominator terendah, beralih dari satu kerangka kerja ke kerangka kerja lainnya menjadi tanpa gesekan. Choo sederhana dalam desainnya; kami tidak percaya itu akan menjadi yang terbaik di kelas selamanya, jadi kami membuatnya mudah untuk dilepas begitu juga dengan menjemputnya.

Kami tidak percaya bahwa lebih besar lebih baik. API besar, kompleksitas besar, file panjang - kami melihatnya sebagai pertanda kompleksitas pengguna lahan yang akan datang. Kami ingin semua orang di tim, terlepas dari ukurannya, untuk sepenuhnya memahami bagaimana aplikasi diajukan. Dan sekali aplikasi dibangun, kami ingin itu kecil, performan dan mudah untuk dipertimbangkan. Semua itu membuat kode debug mudah, hasil lebih baik, dan wajah yang super tersenyum.

 Acara

Pada intinya Choo adalah sebuah emitor acara, yang digunakan untuk kedua logika aplikasi tetapi juga untuk antarmuka dengan kerangka itu sendiri. Paket yang kami gunakan untuk ini adalah nanobus .

Anda dapat mengakses emitor melalui app.use(state, emitter, app) , app.route(route, view(state, emit)) app.emitterapp.route(route, view(state, emit)) atau app.emitter . Rute hanya memiliki akses ke metode emitter.emit untuk mendorong orang untuk memisahkan logika bisnis dari logika render.

Tujuan dari emitor adalah dua kali lipat: memungkinkan pengkabelan kode aplikasi bersama-sama, dan membaginya dengan baik - tetapi juga memungkinkan berkomunikasi dengan kerangka kerja Choo itu sendiri. Semua acara dapat dibaca sebagai konstanta dari state.events . Choo dikirimkan dengan acara-acara berikut bawaan:

 'DOMContentLoaded' | state.events.DOMCONTENTLOADED

Choo memancarkan ini ketika DOM siap. Mirip dengan acara DOM 'DOMContentLoaded' , kecuali itu akan dipancarkan bahkan jika pendengar ditambahkan setelah DOM menjadi siap. Menggunakan dokumen-siap di bawah tenda.

 'render' | state.events.RENDER

Acara ini harus dipancarkan untuk membuat kembali DOM. Pola umum adalah memperbarui objek state , dan kemudian memancarkan acara 'render' setelahnya. Perhatikan bahwa 'render' hanya akan berpengaruh setelah peristiwa DOMContentLoaded dipecat.

 'navigate' | state.events.NAVIGATE

Choo memancarkan acara ini setiap kali rute berubah. Ini dipicu oleh 'pushState' , 'replaceState' atau 'popState' .

 'pushState' | state.events.PUSHSTATE

Acara ini harus dipancarkan untuk menavigasi ke rute baru. Rute baru ditambahkan ke tumpukan riwayat browser, dan akan memancarkan 'navigate' dan 'render' . Mirip dengan history.pushState .

 'replaceState' | | state.events.REPLACESTATE

Acara ini harus dipancarkan untuk menavigasi ke rute baru. Rute baru menggantikan entri saat ini di tumpukan riwayat browser, dan akan memancarkan 'navigate' dan 'render' . Mirip dengan history.replaceState .

 'popState' | state.events.POPSTATE

Acara ini dipancarkan ketika pengguna menekan tombol 'kembali' di browser mereka. Rute baru akan menjadi entri sebelumnya di tumpukan riwayat browser, dan segera sesudahnya acara 'navigate' dan 'render' akan dipancarkan. Mirip dengan history.popState . (Perhatikan bahwa emit('popState') tidak akan menyebabkan tindakan popState - gunakan history.go(-1) untuk itu - ini berbeda dari perilaku pushState dan replaceState !)

 'DOMTitleChange' | state.events.DOMTITLECHANGE

Acara ini harus dipancarkan setiap kali document.title perlu diperbarui. Ini akan mengatur document.title dan state.title . Nilai ini dapat digunakan saat server melakukan render untuk memasukkan tag