Unduh el.js - Unduh kode sumber el.js

el.js

Komponen pihak ketiga

1.0.0

Unduh

el.js

Kerangka kerja aplikasi mikro yang masuk akal dan dapat digunakan kembali secara praktis.

Perkenalan

el.js adalah kerangka kerja yang dibangun di atas template Riot.js untuk membangun aplikasi mikro.

Apa itu aplikasi mikro ?

Kerangka web mengharuskan pengembang untuk membangun sebagian besar, jika tidak seluruh, laman web mereka menjadi aplikasi web dinamis. Hal ini memungkinkan pengembang untuk memastikan semua yang ada di halaman web mereka mematuhi satu alur rendering yang konsisten, dapat diprediksi, dan dapat mereka pertimbangkan. Namun, ada juga banyak kelemahan dibandingkan situs web statis tradisional, termasuk skema caching yang lebih kompleks, waktu buka yang lebih lama, dan masalah SEO. Microapps menawarkan solusi ampuh untuk kelemahan ini. Daripada membuat aplikasi web monolitik raksasa, buatlah aplikasi kecil dan sematkan di halaman statis Anda.

Aplikasi mikro menjalankan fungsi kecil dan cakupannya sangat ketat sehingga dapat digunakan kembali berulang kali. Aplikasi mikro tidak jauh berbeda dengan ide widget yang dapat disematkan sebelum kerangka kerja menjadi standar, namun aplikasi mikro berbeda dalam pelaksanaannya dengan menekankan ketergantungan pada kerangka kerja yang masuk akal dan dapat digunakan kembali secara praktis.

Contoh Bentuk Sederhana

HTML: indeks.html

el.js Library --> <script src="https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js"></script> <script src="my-script.js"></script> </body> </html>">

 < html >
	< head >
	<!-- Head Content -->
	< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
	</ head >
	< body >
		< my-form >
			< div >
				< label > Type Your Name </ label >
				<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
				< my-input bind =' name ' />
			</ div >
			< div >
				< span > Your Name Is </ span >
				< span > { data.name } </ span >
			</ div
		</ my-form >
		<!-- el.js Library -->
		< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
		< script src =" my-script.js " > </ script >
	</ body >
</ html >

JS: skrip-saya.js

 // window.El is the global value

// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
	constuctor ( ) {
		// data contains your state
		this . data = { 
			name : '?' , 
		}
		// your custom tag name
		this . tag = 'my-form'

		super ( )
	}
}

Form . register ( )

// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
	constructor ( ) {
		// your custom tag name
		this . tag = 'my-input'
		// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
		this . html = '<input onkeydown="{ change }" />'

		super ( )
	}
}

Input . register ( )

El . mount ( '*' )

Instalasi

HTML

Tambahkan tag ini ke bagian bawah sebelum skrip dan deps khusus Anda serta jendela referensi.El.

 < script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >

simpul:

Instal melalui NPM

 npm install el . js -- save

Mendukung CommonJS

 var El = require ' el.js '

atau impor ES6

 import El from ' el.js '

API

Jenis

Tipe Masukan

Tipe ini direferensikan oleh El.Form untuk menyimpan informasi yang digunakan untuk memvalidasi bidang yang terkait dengan name .

Properti

Nama	Jenis	Bawaan	Keterangan
konfigurasi	Fungsi Middleware atau [ Fungsi Middleware ]	belum diartikan	Tipe ini menyimpan MiddlewareFunction asli atau MiddlewareFunctions yang digunakan untuk membuat validasi()
nama	rangkaian	''	Ini adalah nama field pada properti data El.Form yang direferensikan oleh tipe lainnya.
referensi	Pohon Referensi	belum diartikan	Ini adalah tautan ke pohon data yang dapat diubah yang dapat mengambil nilai nama dengan memanggil this.ref.get( name )

Metode

Nama	Jenis	Keterangan
mengesahkan	(Pohon Referensi, string) => Janji	Metode ini memanggil semua Fungsi Middlware secara serial menggunakan janji.

Fungsi Middleware

ketik: (nilai: apa saja) => Janji atau apa saja

Tipe ini digunakan untuk mendefinisikan middleware untuk El.Form . Lakukan validasi dan sanitasi input dengan fungsi-fungsi ini seperti:

 function isRequired ( value ) {
  value = value . trim ( )
  if ( value && value != '' ) {
    return value
  }
  
  throw new Error ( 'Required' )
}

Referensi Janji

ketik: { p: Janji }

Tipe ini digunakan secara internal di beberapa tempat untuk memfasilitasi pengembalian janji dengan referensi.

Kelas

El.Lihat

Ini adalah kelas dasar untuk semua kelas El. Setiap El.View berhubungan dengan tag khusus. Perluas kelas ini untuk membuat tag khusus Anda sendiri.

Properti

Nama	Jenis	Bawaan	Keterangan
css	rangkaian	''	Ini adalah string yang mewakili css tag. Itu disuntikkan satu kali per kelas di bagian bawah tag saat dipasang.
data	Pohon Referensi	belum diartikan	Properti ini menyimpan status tag.
html	rangkaian	''	Ini adalah string yang mewakili html bagian dalam tag.
akar	Elemen HTML	belum diartikan	Properti ini menyimpan referensi ke tag di halaman web Anda yang terikat dengan tampilan terpasang.
menandai	rangkaian	''	Ini adalah nama tag khusus.

Metode

Nama	Jenis	Keterangan
sebelumInit	() =>	Kode di sini dijalankan sebelum tag diinisialisasi.
inisiasi	() =>	Kode di sini dijalankan ketika tag diinisialisasi tetapi sebelum dipasang. Direkomendasikan - Jika Anda perlu mengikat siklus hidup tag, lakukan di sini.
pembaruan jadwal	() => Janji	Metode ini menjadwalkan panggilan pembaruan asinkron. Ini mengelompokkan panggilan pembaruan pada tampilan paling atas jika ada tampilan bertumpuk. Ini mengembalikan janji ketika pembaruan dijalankan
memperbarui	() =>	Metode ini memperbarui tag. Ini disebut secara implisit setelah kejadian dipicu dari halaman web. Lihat onkeydown di 'Contoh Formulir Sederhana' untuk kasus seperti itu. Panggil metode ini secara manual untuk memperbarui tag. Direkomendasikan - Disarankan untuk memanggil scheduleUpdate() secara manual untuk mencegah kaskade pembaruan yang sinkron.

Metode yang Diwarisi dari Riot Observable (aktif, satu, nonaktif, pemicu)

Setiap El.View adalah pemancar peristiwa. Lihat kerusuhan.observable untuk dokumentasi lebih lanjut, http://riotjs.com/api/observable/

Metode Statis

Nama	Jenis	Keterangan
El.View.register	() =>	Ini mendaftarkan tag khusus saat ini dengan mesin rendering. Sebut saja setelah Anda menentukan tag

El.Form memperluas El.View

Kelas ini digunakan untuk merepresentasikan formulir serta aplikasi mikro berbasis IO yang lebih kompleks. Kelas ini menyediakan validasi formulir umum dan logika pengiriman formulir.

Properti

Nama	Jenis	Bawaan	Keterangan
konfigurasi	Obyek	belum diartikan	Menyediakan peta nama ke MiddlewareFunction atau array MiddlewareFunctions . Lihat MiddlewareFunction untuk informasi lebih lanjut.
masukan	Obyek	batal	Setiap elemen di configs diubah menjadi elemen di inputs . Memodifikasi ini secara langsung tidak disarankan.

Metode

Nama	Jenis	Keterangan
inisiasi	() =>	Kode di sini dijalankan ketika tag diinisialisasi tetapi sebelum dipasang. Memanggil initInputs() jadi panggil itu secara manual - atau panggil super() di ES6. Direkomendasikan - Jika Anda perlu mengikat siklus hidup tag, lakukan di sini.
initInput	() =>	Kompilasi konfigurasi dan tetapkan struct yang dipancarkan ke inputs . input seperti configs berisi referensi ke bidang bernama di data .
kirim	(Acara) => Janji	Metode ini memicu validasi untuk setiap bidang dalam data seperti yang ditentukan dalam configs . Metode ini harus disebut sebagai event handler/listener. Ia memanggil submit() jika validasi berhasil, mengembalikan janji ketika validasi berhasil/gagal
_kirim	() =>	Kode di sini dijalankan ketika formulir divalidasi selama panggilan submit()

El.Input memperluas El.View

Ini adalah kelas dasar untuk membuat input formulir dan kontrol IO.

Properti

Nama	Jenis	Bawaan	Keterangan
mengikat	rangkaian	''	Properti ini menentukan bidang mana dalam data formulir induk yang akan diikat.
pencarian	rangkaian	''	Sama seperti bind , tidak digunakan lagi .
pesan kesalahan	rangkaian	''	Properti ini disetel ke pesan kesalahan pertama yang ditangkap oleh janji yang dikembalikan this.input.validate.
masukan	Tipe Masukan	batal	Properti ini diambil dari properti inputs formulir induk berdasarkan apa yang ditentukan oleh pengikatan bidang data induk.
sah	bodoh	PALSU	Properti ini digunakan untuk menentukan status validasi input. Properti ini disetel ketika this.input.validate dipanggil, properti ini hanya disetel ke true jika janji yang dikembalikan this.input.validate dijalankan sepenuhnya.

Metode

Nama	Jenis	Keterangan
mengubah	(Acara) =>	Metode ini memperbarui masukan dan kemudian memvalidasinya. Metode ini harus dipanggil oleh event handler/listener.
berubah	() =>	Metode ini dipanggil ketika janji yang dikembalikan this.input.validate dijalankan sepenuhnya.
jelasKesalahan	() =>	Metode ini menyetel errorMessage ke '' dan dipanggil sebelum validasi.
kesalahan	(Kesalahan) =>	Metode ini menyetel errorMessage dan dipanggil ketika validasi gagal.
dapatkanNilai	(Acara) => apa saja	Metode ini mendapatkan nilai dari input. Secara default, metode ini mengembalikan target.value Event .
mengesahkan	(PromiseReference?) => Janji	Metode ini memvalidasi masukan, mengembalikan Janji yang mewakili keberhasilan dan kegagalan validasi baik berdasarkan referensi (diperlukan secara internal) dan berdasarkan nilai.

Fungsi

Nama	Jenis	Keterangan
El.scheduleUpdate	() =>	Jadwalkan pembaruan untuk semua aplikasi mikro di halaman.

Diwarisi dari Riot (El.mount, El.update, dll)

Fungsi siklus hidup el.js diwarisi dari Riot.js.

Pohon yang Dapat Diubah Secara Default yang Dapat Diamati

el.js menggunakan Pohon Referensi untuk menyimpan data formulirnya.

(BYODS) Bawalah Struktur Data Anda Sendiri

Terapkan metode dapatkan, setel, aktifkan, sekali, nonaktifkan dari referensial di sekitar struktur data Anda sendiri dan masukkan sebagai properti data.

Praktik Terbaik

Gunakan Wadah dan Kontrol

Penampung adalah tag khusus yang menyediakan metode untuk digunakan pada templat internalnya dan kontennya dapat ditimpa seluruhnya (hanya berisi konten dalam satu atau beberapa tag). Kontrol adalah komponen yang berinteraksi dengan pengguna untuk tujuan menampilkan informasi dengan cara yang menarik atau mendapatkan masukan seperti masukan, pemilihan, atau penyematan GoogleMaps.

Daripada membuat widget secara berpasangan, dekomposisi widget ke dalam wadah dan kontrol untuk memaksimalkan penggunaan kembali. Susun html internal dengan cara apa pun yang paling masuk akal. Kemudian, lepaskan widget, wadah, dan kontrol Anda yang telah selesai kepada pengguna sehingga mereka dapat menyesuaikan widget tersebut untuk berbagai kebutuhan mereka.

Dengan mengabstraksi elemen UI Anda seperti ini, akan lebih mudah bagi orang lain untuk menggunakan kembali dan menyesuaikan kode Anda. Lihat shop.js untuk implementasinya.

Gunakan Toko Negara Tunggal

Cara terbaik adalah menggunakan satu penyimpanan negara bagian tingkat tinggi untuk menyederhanakan penyimpanan dan pemulihan status untuk halaman web atau seluruh situs web Anda.

Hal ini dapat dicapai dengan menyediakan bidang data yang sama untuk semua penampung tingkat atas di halaman. melalui panggilan pemasangan awal

 var data = {
	state0 : 0 ,
	state1 : 1 ,
}

El . mount ( '*' , { data : data } )

Penggunaan Tingkat Lanjut

Warisan Protipikal Bersarang

Berbeda dengan rendering Riot pada umumnya, el.js mengizinkan pengaksesan nilai secara implisit pada this.parent dan this.parent...parent melalui pewarisan prototipikal dari konteks rendering. Hal ini dilakukan untuk menghindari penerusan data yang sama berulang kali melalui container yang disarangkan karena rawan kesalahan dan terlalu bertele-tele. Hal ini juga mempermudah pembuatan container dan kontrol.

Melewati variabel data secara eksplisit:

 < my-container-1 >
	< my-container-2 data =' { data } ' >
		< my-container-3 data =' { data } ' >
			value: { data.value1 }
		</ my-container-3 >
		< my-container-3 data =' { data } ' >
			value: { data.value2 }
		</ my-container-3 >
	</ my-container-2 >
	< my-container-2 data =' { data } ' >
		< my-container-3 data =' { data } ' >
			value: { data.value3 }
		</ my-container-3 >
		< my-container-3 data =' { data } ' >
			value: { data.value4 }
		</ my-container-3 >
	</ my-container-2 >
</ my-container-1 >

 // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )

Setara dengan mereferensikan variabel data secara implisit.

 < my-container-1 >
	< my-container-2 >
		< my-container-3 >
			value: { data.value1 }
		</ my-container-3 >
		< my-container-3 >
			value: { data.value2 }
		</ my-container-3 >
	</ my-container-2 >
	< my-container-2 >
		< my-container-3 >
			value: { data.value3 }
		</ my-container-3 >
		< my-container-3 >
			value: { data.value4 }
		</ my-container-3 >
	</ my-container-2 >
</ my-container-1 >

 // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )