bay.js
1.0.0
Bay.js adalah perpustakaan frontend yang dirancang untuk memfasilitasi penciptaan komponen web yang dapat digunakan kembali, serta menambah keadaan dan interaktivitas ke HTML. Untuk melihatnya beraksi, Anda dapat mengunjungi Bayjs.org dan menjelajahi contoh -contohnya.
<template> di DOM sebagai sumber template.Bay.js dapat digunakan melalui tag skrip atau mengimpor sebagai modul.
< script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >Contoh Tag Script
< script type =" module " src =" main.js " > </ script > // In main.js
import bay from '//cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.mjs' ;
bay ( ) ; Anda mungkin ingin menambahkan nomor versi seperti ini untuk mencegah perubahan perubahan: '//cdn.jsdelivr.net/npm/@dunks1980/bay.js@ <version> /bay.min.mjs' Nomor versi adalah opsional dan dapat diperoleh dari masuk ke halaman paket NPM. Atau jika menggunakan node_modules: './node_modules/@dunks1980/bay.js/bay.min.mjs';
Contoh modul ES
npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;Contoh NPM
import bay from ...
bay ( {
text : `<h1 :style="margin: 1rem;">Settings</h1>` ,
} ) ; < template id =" my-template " >
%{text} <!-- becomes: --> < h1 :style =" margin: 1rem; " > Settings </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component > Pengaturan hanya dapat diatur dengan modul ES atau NPM, harus string, dan mereka hanya dapat diatur sekali sebelum membuat komponen. Variabel pengaturan dapat digunakan di mana saja dalam templat.
Contoh Pengaturan
Ada beberapa cara untuk mendefinisikan komponen di Bay.js:
Di HTML Anda, buat templat inline dan terapkan atribut teluk dan alat peraga lainnya:
< template bay =" my-component-name " message >
< h1 > ${this.message} </ h1 >
</ template >
< my-component-name message =" Hello world! " > </ my-component-name > Di html Anda, buat template inline dan persediaan bay. ID template:
< template id =" my-template " >
< h1 > ${this.message} </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component > Buat file dan pasokan bay.js URL (jangan bungkus konten file dalam template). Ekstensi file dapat berupa apa saja yang Anda sukai selama isinya dalam format HTML:
< my-component bay =" /url/to/my/components.html " message =" Hello world! " > </ my-component >
<!-- or -->
< my-component bay =" /url/to/my/components.php " message =" Hello world! " > </ my-component > <!-- in component file -->
< h1 > ${this.message} </ h1 > Pass Bay.js Template yang diimpor:
import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ; Atau buat template dan lulus: ($ dan `di dalam string akan membutuhkan melarikan diri jika string literal)
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , `<h1>${this.message}</h1>` , [ "message" ] ) ; <!-- Anywhere in the HTML including other components -->
< my-component message =" Hello world! " > </ my-component > Di HTML Anda, buat elemen inline dengan templat di dalamnya, lalu tambahkan bay-hidrat ke elemen yang mengandung:
< div bay-hydrate >
< h1 > This will be replaced once bay creates the component. </ h1 >
< template >
< h1 > ${this.message} </ h1 >
< script > this . message = 'Hello World!' </ script >
</ template >
</ div > Alat peraga tidak akan tersedia menggunakan metode ini, tetapi Anda dapat menggunakan pengaturan. Konten diterjemahkan ke DOM utama sehingga gaya tidak akan dienkapsulasi dan tag <style> yang didefinisikan dalam templat tidak akan berpengaruh.
Di HTML Anda, buat elemen inline dengan templat di dalamnya, lalu tambahkan bay = "DSD" ke elemen dan shadowrootmode = "buka" ke elemen template:
< my-component bay =" dsd " >
< template shadowrootmode =" open " >
< dsd >
< h1 id =" title " > loading... </ h1 >
</ dsd >
< noscript >
< h1 id =" title " > ${this.header_text} </ h1 >
</ noscript >
< script mounted >
this . header_text = "Hello World" ;
</ script >
</ template >
</ my-component > Elemen akan terlihat saat Bay memuat tetapi tidak jika mereka dibungkus dengan tag noscript. Elemen DSD dan anak -anak mereka akan dihapus setelah komponen dibuat dan elemen noscript akan dihapus tetapi konten mereka akan tetap dan konten mereka akan diuraikan dan diffed. Alat peraga tidak akan tersedia menggunakan metode ini, tetapi Anda dapat menggunakan pengaturan. Konten diterjemahkan ke DOM utama sehingga gaya tidak akan dienkapsulasi.
Komponen dapat digunakan di mana saja di HTML tetapi templat inline harus di badan dokumen. "Komponen saya" bisa apa saja yang Anda suka tetapi harus memiliki tanda hubung dalam nama per spesifikasi elemen khusus.
| Sintaksis | Keterangan | Contoh |
|---|---|---|
<if this="this.xxx">...</if> | Jika pernyataan, hanya membuat konten antara <if> tag jika atribut ini benar. | Persyaratan |
<else-if this="this.xxx">...</else-if> | Selain itu jika, hanya membuat konten antara <else-if> tag jika atribut ini benar dan sebelumnya <if> <else-if> false. | Persyaratan |
<else>...</else> | Selain itu, hanya membuat konten antara <else> tag jika semua tag <if> <else-if> sebelumnya FALSE. | Persyaratan |
<show this="this.xxx">...</show> | Tunjukkan, ketika Anda perlu menyimpan kode di DOM dan beralih tampilannya. Tambahkan durasi <show this="this.xxx" duration=".5s"> untuk efek pudar. | Menunjukkan |
<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch> | Pernyataan beralih, untuk kondisional yang lebih kompleks. | Mengalihkan |
<map array="this.arr">...</map> | Peta, untuk mengulangi di atas array <map params="item, i, array" array="this.arr" join="<hr>"> params dan gabung adalah opsional, param default adalah: element, index, array . | Iterasi |
<for array="this.arr">...</for> | Foreach loop, untuk mengulangi di atas array <for params="item, i, array" array="this.arr"> params adalah opsional, param default adalah: element, index, array . | Iterasi |
<for this="let i = 0; i < this.arr.length; i++">...</for> | Untuk loop, untuk beralih dengan kondisi. | Iterasi |
<inner-html>...</inner-html> | Untuk membuat dom cahaya. Jika atribut inner-html hadir pada komponen yang akan diterjemahkan di dalam elemen itu:<my-comp bay="..." inner-html="#render-target"> . Jika atribut batin-html tidak ada pada komponen, Anda dapat menggunakan slot untuk melihat konten batin-HTML. | Html batin |
<slot name="slot1">...</slot> | Digunakan untuk mendefinisikan slot sesuai komponen web standar. | Slot |
<route href="/xxx/var">...</route> | Rute membuat rute untuk tag router, dimaksudkan untuk aplikasi satu halaman (SPA). | Rute |
<router this="/xxx/:xxx">...</router> | Router cocok dengan URL saat ini , :xxx digunakan untuk variabel. | Rute |
<define this="myEl">...</define> <myEl></myEl> | Tentukan blok kode untuk digunakan kembali. | Mendefinisikan |
<include this="https://..."></include> | Sertakan kode ke dalam template dari URL. | Termasuk |
| Sintaksis | Keterangan | Contoh |
|---|---|---|
this.xxx = 'xxx'; | Menetapkan this.xxx Nilai akan memicu render komponen teluk.Untuk mendapatkan/mengatur nilai ini dari luar komponen: document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx'; | Lokal |
$global = 'xxx'; | Menetapkan $global.xxx Nilai akan memicu render pada semua komponen teluk yang berisi $global .Untuk mendapatkan/mengatur nilai ini dari luar komponen: bay.global.xxx = 'hello'; console.log(bay.global); | Global |
$bay.querySelector('xxx'); | Gunakan $bay untuk menargetkan DOM bayangan. Shadow Dom vs. Light Dom | Variabel |
$el.querySelector('xxx'); | Gunakan $el untuk menargetkan DOM cahaya. Shadow Dom vs. Light Dom | Variabel |
$parent.xxx = 'xxx'; | Menetapkan $parent.xxx Nilai akan memperbarui this.xxx di Parent jika induk adalah komponen teluk lain dan Inturn memicu render. | Induk |
$details.changed;$details.element; | Detail dari atribut skrip slotchange tentang apa yang berubah. | Slot |
$route | Detail dari lokasi jendela. | Router |
$path | : variabel dari jalur pencarian :xxx/:xxx . | Router |
| Sintaksis | Keterangan | Contoh |
|---|---|---|
bay="#my-template"bay="/my-template.html"bay="dsd" | Bila didefinisikan pada tag <custom-element bay="..."> itu akan menjadi templat untuk digunakan, dapat berupa ID templat atau jalur ke file, DSD bersifat eksperimental. | Menggunakan id Menggunakan file DSD |
bay="my-template-name" | Bila didefinisikan pada <template bay="custom-element"> itu akan menjadi nama tag <custom-element> . | Menggunakan nama |
fouc | Digunakan untuk menyembunyikan DOM cahaya di dalam komponen sampai terisi penuh. | Fouc |
inner-html="#render-target" | Digunakan untuk memberi tahu komponen di mana ia harus membuat konten <inner-html>...</inner-html> . | Html batin |
xxx="value" | Atribut lain apa pun diteruskan ke dalam komponen dan menjadi alat peraga yang dapat diakses melalui this.xxx , xxx menjadi nama atribut. | Alat peraga |
| Sintaksis | Keterangan | Contoh |
|---|---|---|
:style="color: red; display: ${this.display}" | Terapkan gaya yang digerakkan oleh data yang diastrasi. | Gaya |
:click="console.log('clicked')" | Setiap peristiwa JavaScript yang dimulai dengan ON (onClick dalam contoh ini) cukup ganti dengan: ( oninput="xxx" -> :input="xxx" ). | Acara |
:my-event="console.log('my custom event')" | Mendengarkan acara khusus dan memicu kode ketika mendeteksi acara itu telah dipicu dari mana saja. | Acara khusus |
bind="this.xxx" | Digunakan untuk pengikatan data 2 arah pada <inputs> , <selects> dan <textareas> . | Mengikat |
slot="slot-name" | Digunakan untuk mendefinisikan slot sesuai komponen web standar. | Slot |
ref="xxx" | $ref('xxx').onclick = (e) => {...Lihat fungsi internal di bawah ini untuk penggunaan. | Ref |
this-attribute="xxx" | Akan menggantikan ini-attribut = "xxx" dengan apa yang dikembalikan dari nilai atributnya. | Atribut ini |
:click.prevent="xxx" | Pengubah Acara .Passive, .Capture, .Nce, .Stop, .prevent, .Self | Pengubah Acara |
| Sintaksis | Keterangan | Contoh |
|---|---|---|
<script imports>...</script> | Tentukan skrip impor modul. | Impor |
<script mounted>...</script> | Script berjalan setelah template dipasang ke DOM. | Dipasang |
<script props>...</script> | Skrip yang berjalan saat alat peraga berubah. | Alat peraga |
<script render>...</script> | Script yang membuat nilai pengembaliannya di tempat. | Memberikan |
<script slotchange>...</script> | Skrip yang berjalan pada perubahan konten slot. | Perubahan slot |
<script update>...</script> | Skrip yang berjalan pada setiap pembaruan. | Memperbarui |
| Sintaksis | Keterangan | Contoh |
|---|---|---|
bay(); | Digunakan untuk menginisialisasi Bay.js jika modul yang diimpor. | Instalasi |
bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]); | Buat komponen. | Membuat |
bay.refresh(); | Refresh Bay Setelah elemen khusus baru diterapkan secara dinamis ke DOM. | Menyegarkan |
| Sintaksis | Keterangan | Contoh |
|---|---|---|
$bay.encode('string'); | Encode/Escape a String. | Menyandi |
$bay.decode('string'); | Decode/lepaskan string. | Membaca sandi |
$bay.emit('custom-event', {key: value}); | Memancarkan acara khusus. (di semua komponen) | Memancarkan |
$bay.on('custom-event', (e) => {console.log(e.detail);}); | Dengarkan acara khusus. (di semua komponen) | Memancarkan |
$ref('xxx').onclick = (e) => {...$ref('xxx').forEach((el) => {... | Mendapat elemen dengan atribut ref = "xxx". Hanya dapat digunakan dalam skrip yang dipasang. | Ref |
