bay.js
1.0.0
Bay.js ist eine Frontend-Bibliothek, die die Erstellung wiederverwendbarer Webkomponenten ermöglicht und HTML Zustand und Interaktivität verleiht. Um es in Aktion zu sehen, können Sie BayJs.org besuchen und seine Beispiele erkunden.
<template> im DOM als Vorlagenquelle.Bay.js kann über ein Skript -Tag oder ein Importieren als Modul verwendet werden.
< script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >Beispiel für Skript -Tag
< script type =" module " src =" main.js " > </ script > // In main.js
import bay from '//cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.mjs' ;
bay ( ) ; Möglicherweise möchten Sie eine Versionsnummer wie diese hinzufügen, um Bruchänderungen zu verhindern: '//cdn.jsdelivr.net/npm/@dunks1980/bay.js@ <version> /bay.min Oder wenn Sie node_modules verwenden: './node_modules/@dunks1980/bay.js/bay.min.mjs';
ES -Modulbeispiel
npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;Npm Beispiel
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 > Einstellungen können nur mit ES- oder NPM -Modulen festgelegt werden, müssen Zeichenfolgen sein und nur einmal eingestellt werden, bevor sie Komponenten erstellen. Einstellungsvariablen können überall in den Vorlagen verwendet werden.
Einstellungen Beispiel
Es gibt einige Möglichkeiten, eine Komponente in Bay.js zu definieren:
Erstellen Sie in Ihrem HTML eine Inline -Vorlage und anwenden Sie Bay Attribut und alle anderen Requisiten an:
< template bay =" my-component-name " message >
< h1 > ${this.message} </ h1 >
</ template >
< my-component-name message =" Hello world! " > </ my-component-name > Erstellen Sie in Ihrem HTML eine Inline -Vorlage und Supply Bay.js Die Vorlagen -ID:
< template id =" my-template " >
< h1 > ${this.message} </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component > Erstellen Sie eine Datei und liefern Bay.js Die URL (wickeln Sie den Dateiinhalt in Vorlage nicht ein). Die Dateierweiterung kann alles sein, was Sie mögen, solange der Inhalt im HTML -Format liegt:
< 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 die importierte Vorlage:
import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ; Oder erstellen Sie Vorlage und übergeben Sie sie: ($ und `Innerhalb der Zeichenfolge muss entkommen, wenn 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 > Erstellen Sie in Ihrem HTML ein Inline-Element mit einer Vorlage im Inneren und fügen Sie dann dem enthaltenden Element Bay-Hydrate hinzu:
< 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 > Requisiten sind mit dieser Methode nicht verfügbar, aber Sie können Einstellungen verwenden. Der Inhalt wird dem Hauptdom gerendert, sodass die Styles nicht eingekapselt sind und die in der Vorlage definierten <style> -Tags keinen Einfluss haben.
Erstellen Sie in Ihrem HTML ein Inline -Element mit einer Vorlage im Inneren und fügen Sie das Element und ShadowRootMode = "Öffnen" zum Vorlagenelement zu "DSD" hinzu:
< 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 > Die Elemente sind sichtbar, während die Bucht geladen wird, aber nicht, wenn sie in NoScript -Tags eingewickelt sind. DSD -Elemente und ihre Kinder werden entfernt, sobald die Komponente erstellt wurde und NoScript -Elemente entfernt werden, aber ihr Inhalt bleibt bleiben und ihr Inhalt wird analysiert und verbreitet. Requisiten sind mit dieser Methode nicht verfügbar, aber Sie können Einstellungen verwenden. Der Inhalt wird dem Hauptdom gerendert, sodass die Stile nicht eingekapselt werden.
Eine Komponente kann überall in der HTML verwendet werden, aber Inline -Vorlagen müssen sich im Körper des Dokuments befinden. "My-component" kann alles sein, was Sie mögen, aber es muss einen Armaturenbrett im Namen gemäß der benutzerdefinierten Elementspezifikation haben.
| Syntax | Beschreibung | Beispiel |
|---|---|---|
<if this="this.xxx">...</if> | Wenn Anweisung, rendert nur den Inhalt zwischen <if> tags, wenn es dieses Attribut wahr ist. | Bedingungen |
<else-if this="this.xxx">...</else-if> | Andernfalls, wenn es nur den Inhalt zwischen <else-if> Tags rendert, wenn dieses Attribut wahr ist, und früher <if> <else-if> ist falsch. | Bedingungen |
<else>...</else> | Andernfalls rendern Sie nur den Inhalt zwischen <else> Tags, wenn alle vorherigen <if> <else-if> Tags falsch sind. | Bedingungen |
<show this="this.xxx">...</show> | Zeigen Sie, wenn Sie den Code im DOM behalten und seine Anzeige umschalten müssen. Dauer hinzufügen <show this="this.xxx" duration=".5s"> für einen Fade -Effekt. | Zeigen |
<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch> | Switch -Anweisung für komplexere Bedingungen. | Schalten |
<map array="this.arr">...</map> | Karte, um über ein Array <map params="item, i, array" array="this.arr" join="<hr>"> element, index, array und join iterieren zu iterieren. | Iterationen |
<for array="this.arr">...</for> | Foreach Loop, um über ein Array <for params="item, i, array" array="this.arr"> params sind optional, Standardparameter sind: element, index, array . | Iterationen |
<for this="let i = 0; i < this.arr.length; i++">...</for> | Für Schleife, um mit Bedingungen zu iterieren. | Iterationen |
<inner-html>...</inner-html> | Zum leichten Dom rendern. Wenn in der Komponente inner-html Attribut vorhanden ist, wird es in diesem Element rendern:<my-comp bay="..." inner-html="#render-target"> . Wenn das Inner-HTML-Attribut in der Komponente nicht vorhanden ist, können Sie einen Slot verwenden, um den Inhalt des Inner-HTML zu sehen. | Innere HTML |
<slot name="slot1">...</slot> | Wird verwendet, um einen Steckplatz gemäß Standard-Webkomponenten zu definieren. | Slots |
<route href="/xxx/var">...</route> | Die Route erstellt die Route für das Router -Tag, ist für eine einzelne Seitenanwendung (SPA) vorgesehen. | Route |
<router this="/xxx/:xxx">...</router> | Router entspricht der aktuellen URL :xxx werden für Variablen verwendet. | Route |
<define this="myEl">...</define> <myEl></myEl> | Definieren Sie einen Codeblock, der wiederverwendet wird. | Definieren |
<include this="https://..."></include> | Codes in Vorlage aus einer URL eingeben. | Enthalten |
| Syntax | Beschreibung | Beispiel |
|---|---|---|
this.xxx = 'xxx'; | Wenn Sie this.xxx zuweisen.XXX Ein Wert löst einen Buchtkomponenten -Render aus.Um diesen Wert von außerhalb der Komponente zu erhalten/festzulegen: document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx'; | Lokal |
$global = 'xxx'; | Das Zuweisen von $global.xxx Ein Wert auslöst Rendern an allen Buchtkomponenten, die $global enthalten.Um diesen Wert von außerhalb der Komponenten zu erhalten/festzulegen: bay.global.xxx = 'hello'; console.log(bay.global); | Global |
$bay.querySelector('xxx'); | Verwenden Sie $bay , um den Shadow Dom abzurichten. Shadow Dom vs. Light Dom | Variablen |
$el.querySelector('xxx'); | Verwenden Sie $el , um den leichten Dom abzurichten. Shadow Dom vs. Light Dom | Variablen |
$parent.xxx = 'xxx'; | Zuweisen von $parent.xxx Ein Wert aktualisiert this.xxx in übergeordnet, wenn der Elternteil eine weitere Buchtkomponente ist und Inturn einen Render auslöst. | Elternteil |
$details.changed;$details.element; | Details aus dem Drehbuch -Skriptattribut, was sich geändert hat. | Slots |
$route | Details aus dem Fensterort. | Router |
$path | : Variablen aus dem Suchpfad :xxx/:xxx . | Router |
| Syntax | Beschreibung | Beispiel |
|---|---|---|
bay="#my-template"bay="/my-template.html"bay="dsd" | Wenn Sie auf dem Tag <custom-element bay="..."> definiert sind, kann es die zu verwendende Vorlage sein, kann eine Vorlagen-ID oder ein Pfad zu einer Datei sein, dsd ist experimentell. | Verwenden von ID Verwenden von Datei DSD |
bay="my-template-name" | Wenn Sie auf einem <template bay="custom-element"> definiert sind, ist dies der <custom-element> -Tagname. | Verwenden von Namen |
fouc | Wird verwendet, um das helle Dom in der Komponente zu verbergen, bis sie voll beladen ist. | Fouc |
inner-html="#render-target" | Wird verwendet, um die Komponente zu sagen, wo sie <inner-html>...</inner-html> Inhalt rendern sollte. | Innere HTML |
xxx="value" | Alle anderen Attribute werden in die Komponente übergeben und werden zu Requisiten, auf die über this.xxx zugegriffen werden kann.xxx, wobei XXX der Attributname ist. | Requisiten |
| Syntax | Beschreibung | Beispiel |
|---|---|---|
:style="color: red; display: ${this.display}" | Wenden Sie eingeführte datengesteuerte Stile an. | Stile |
:click="console.log('clicked')" | Jedes JavaScript -Ereignis, das mit On (Onclick in diesem Beispiel) beginnt, ersetzen Sie einfach eins durch: ( oninput="xxx" -> :input="xxx" ). | Ereignisse |
:my-event="console.log('my custom event')" | Hört auf jeden benutzerdefinierten Ereignis und löst Code aus, wenn er erkennt, dass von überall ausgelöst wurde. | Benutzerdefinierte Veranstaltung |
bind="this.xxx" | Wird für die 2-Wege-Datenbindung für <inputs> , <selects> und <textareas> verwendet. | Binden |
slot="slot-name" | Wird verwendet, um einen Steckplatz gemäß Standard-Webkomponenten zu definieren. | Slots |
ref="xxx" | $ref('xxx').onclick = (e) => {...Weitere Informationen finden Sie unten für die Verwendung der internen Funktionen. | Ref |
this-attribute="xxx" | Ersetzt dieses Attribute = "xxx" durch das, was von seinem Attributwert zurückgegeben wurde. | Dieses Attribut |
:click.prevent="xxx" | Ereignismodifikatoren .Passive, .Capture, .once, .stop,. | Ereignismodifikatoren |
| Syntax | Beschreibung | Beispiel |
|---|---|---|
<script imports>...</script> | Definieren Sie das Modul -Import -Skripte. | Importe |
<script mounted>...</script> | Das Skript läuft nach der Vorlage, die nach DOM montiert ist. | Montiert |
<script props>...</script> | Skript, das ausgeführt wird, wenn sich die Requisiten ändern. | Requisiten |
<script render>...</script> | Drehbuch, das den Rückgabewert an Ort und Stelle macht. | Machen |
<script slotchange>...</script> | Skript, das auf Slot -Inhalten ausgeführt wird, ändert sich. | Slotänderung |
<script update>...</script> | Skript, das auf jedem Update ausgeführt wird. | Aktualisieren |
| Syntax | Beschreibung | Beispiel |
|---|---|---|
bay(); | Wird verwendet, um bay.js zu initialisieren, wenn importiert wird. | Installation |
bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]); | Erstellen Sie eine Komponente. | Erstellen |
bay.refresh(); | Der Aktualisieren von Bay, nachdem ein neues benutzerdefiniertes Element dynamisch auf das DOM angewendet wurde. | Aktualisieren |
| Syntax | Beschreibung | Beispiel |
|---|---|---|
$bay.encode('string'); | Codieren/entkommen einer Zeichenfolge. | Kodieren |
$bay.decode('string'); | Decodieren/enttäuschen Sie eine Schnur. | Dekodieren |
$bay.emit('custom-event', {key: value}); | Eine benutzerdefinierte Veranstaltung abgeben. (über alle Komponenten hinweg) | Emittieren |
$bay.on('custom-event', (e) => {console.log(e.detail);}); | Hören Sie sich eine benutzerdefinierte Veranstaltung an. (über alle Komponenten hinweg) | Emittieren |
$ref('xxx').onclick = (e) => {...$ref('xxx').forEach((el) => {... | Ruft Elemente mit dem Attribut REF = "XXX" ab. Kann nur im montierten Skript verwendet werden. | Ref |
