bay.js
1.0.0
Bay.js est une bibliothèque de frontend conçue pour faciliter la création de composants Web réutilisables, ainsi que pour ajouter l'état et l'interactivité au HTML. Pour le voir en action, vous pouvez visiter Bayjs.org et explorer ses exemples.
<template> dans le DOM comme source de modèle.Bay.js peut être utilisé via une balise de script ou l'importation de module.
< script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >Exemple de balise de 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 ( ) ; Vous souhaiterez peut-être ajouter un numéro de version comme celui-ci pour éviter les modifications de rupture: '//cdn.jsdelivr.net/npm/@dunks1980/bay.js@ <version> /bay.min.Min.mjs Le numéro de version est facultatif et peut être acquis à partir de la page de package NPM. Ou si vous utilisez node_modules: './node_modules/@dunks1980/bay.js/bay.min.mjs';
Exemple du module ES
npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;Exemple de 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 > Les paramètres ne peuvent être définis qu'avec des modules ES ou NPM, doivent être des chaînes et ne peuvent être définis qu'une seule fois avant de créer des composants. Les variables de paramètres peuvent être utilisées n'importe où dans les modèles.
Exemple des paramètres
Il existe plusieurs façons de définir un composant dans Bay.js:
Dans votre HTML, créez un modèle en ligne et appliquez l'attribut Bay et tout autre accessoire:
< template bay =" my-component-name " message >
< h1 > ${this.message} </ h1 >
</ template >
< my-component-name message =" Hello world! " > </ my-component-name > Dans votre HTML, créez un modèle en ligne et fournit une baie.js L'ID des modèles:
< template id =" my-template " >
< h1 > ${this.message} </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component > Créez un fichier et fournit une baie.js L'URL (n'enveloppez pas le contenu du fichier dans le modèle). L'extension de fichier peut être tout ce que vous aimez tant que son contenu est au 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 le modèle importé:
import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ; Ou créez un modèle et passez-le: ($ et `dans la chaîne auront besoin de s'échapper si la chaîne littérale)
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 > Dans votre HTML, créez un élément en ligne avec un modèle à l'intérieur, puis ajoutez un hydrate de baie à l'élément contenant:
< 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 > Les accessoires ne seront pas disponibles en utilisant cette méthode, mais vous pouvez utiliser les paramètres. Le contenu est rendu au DOM principal afin que les styles ne soient pas encapsulés et que les balises <style> définies dans le modèle n'auront aucun effet.
Dans votre HTML, créez un élément en ligne avec un modèle à l'intérieur, puis ajoutez bay = "dsd" à l'élément et shadowrootmode = "ouvrir" à l'élément de modèle:
< 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 > Les éléments seront visibles pendant que Bay charge mais pas s'ils sont enveloppés dans les balises noscript. Les éléments DSD et leurs enfants seront supprimés une fois le composant créé et que les éléments noscript seront supprimés, mais leur contenu restera et leur contenu sera analysé et diffusé. Les accessoires ne seront pas disponibles en utilisant cette méthode, mais vous pouvez utiliser les paramètres. Le contenu est rendu au DOM principal afin que les styles ne soient pas encapsulés.
Un composant peut être utilisé n'importe où dans le HTML mais les modèles en ligne doivent être dans le corps du document. "My-composant" peut être tout ce que vous voulez, mais il doit avoir un tableau de bord dans le nom selon la spécification de l'élément personnalisé.
| Syntaxe | Description | Exemple |
|---|---|---|
<if this="this.xxx">...</if> | Si l'instruction, ne rend que le contenu entre <if> les balises si c'est cet attribut est vrai. | Conditionnels |
<else-if this="this.xxx">...</else-if> | Sinon, si, ne rend que le contenu entre <else-if> balises si cet attribut est vrai et précédent <if> <else-if> est faux. | Conditionnels |
<else>...</else> | Sinon, ne rend que le contenu entre les balises <else> si toutes les balises <if> <else-if> précédentes sont fausses. | Conditionnels |
<show this="this.xxx">...</show> | Afficher, lorsque vous devez conserver le code dans le DOM et basculer son affichage. Ajoutez de la durée <show this="this.xxx" duration=".5s"> pour un effet de fondu. | Montrer |
<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch> | Instruction de commutation, pour des conditions plus complexes. | Changer |
<map array="this.arr">...</map> | Map, pour itérer sur un array <map params="item, i, array" array="this.arr" join="<hr>"> Params et join sont facultatifs, les paramètres par défaut sont: element, index, array . | Itérations |
<for array="this.arr">...</for> | Foreach Loop, pour itérer sur un tableau <for params="item, i, array" array="this.arr"> Les params sont facultatifs, les paramètres par défaut sont: element, index, array . | Itérations |
<for this="let i = 0; i < this.arr.length; i++">...</for> | Pour la boucle, pour itérer avec les conditions. | Itérations |
<inner-html>...</inner-html> | Pour rendre au Dom léger. Si l'attribut inner-html est présent sur le composant, il rendra à l'intérieur de cet élément:<my-comp bay="..." inner-html="#render-target"> . Si l'attribut Inner-HTML n'est pas présent sur le composant, vous pouvez utiliser un emplacement pour voir le contenu intérieur-HTML. | Html intérieur |
<slot name="slot1">...</slot> | Utilisé pour définir une fente selon le composant Web standard. | Machines à sous |
<route href="/xxx/var">...</route> | La route crée l'itinéraire pour la balise du routeur, est destinée à une application de page (SPA). | Itinéraire |
<router this="/xxx/:xxx">...</router> | Le routeur correspond à l'URL actuelle,: :xxx sont utilisés pour les variables. | Itinéraire |
<define this="myEl">...</define> <myEl></myEl> | Définissez un bloc de code à réutiliser. | Définir |
<include this="https://..."></include> | Incluez le code dans le modèle d'une URL. | Inclure |
| Syntaxe | Description | Exemple |
|---|---|---|
this.xxx = 'xxx'; | Attribution de this.xxx Une valeur déclenchera un rendu de composant baie.Pour obtenir / définir cette valeur de l'extérieur du composant: document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx'; | Locale |
$global = 'xxx'; | Attribution de $global.xxx Une valeur déclenchera le rendu sur tous les composants de la baie contenant $global .Pour obtenir / définir cette valeur de l'extérieur des composants: bay.global.xxx = 'hello'; console.log(bay.global); | Mondial |
$bay.querySelector('xxx'); | Utilisez $bay pour cibler l'ombre DOM. Shadow Dom vs Light Dom | Variables |
$el.querySelector('xxx'); | Utilisez $el pour cibler le Dom léger. Shadow Dom vs Light Dom | Variables |
$parent.xxx = 'xxx'; | L'attribution de $parent.xxx Une valeur mettra à jour this.xxx dans Parent si le parent est un autre composant de baie et qu'Inturn déclenche un rendu. | Mère |
$details.changed;$details.element; | Détails de l'attribut de script SLOCKANGE quant à ce qui a changé. | Machines à sous |
$route | Détails de l'emplacement de la fenêtre. | Routeur |
$path | : Variables du chemin de recherche :xxx/:xxx . | Routeur |
| Syntaxe | Description | Exemple |
|---|---|---|
bay="#my-template"bay="/my-template.html"bay="dsd" | Lorsqu'il est défini sur la <custom-element bay="..."> Ce sera le modèle à utiliser, peut être un ID de modèles ou un chemin vers un fichier, DSD est expérimental. | Utilisation d'ID Utilisation du fichier DSD |
bay="my-template-name" | Lorsqu'il est défini sur un <template bay="custom-element"> ce sera le nom de balise <custom-element> . | En utilisant le nom |
fouc | Utilisé pour masquer le Dom léger dans le composant jusqu'à ce qu'il soit complètement chargé. | Fouc |
inner-html="#render-target" | Utilisé pour dire au composant où il devrait rendre le contenu <inner-html>...</inner-html> . | Html intérieur |
xxx="value" | Tous les autres attributs sont transmis dans le composant et deviennent des accessoires accessibles via this.xxx , xxx étant le nom d'attribut. | Accessoires |
| Syntaxe | Description | Exemple |
|---|---|---|
:style="color: red; display: ${this.display}" | Appliquez des styles basés sur les données en ligne. | Styles |
:click="console.log('clicked')" | Tout événement JavaScript qui commence par ON (onClick dans cet exemple) remplace simplement par: ( oninput="xxx" -> :input="xxx" ). | Événements |
:my-event="console.log('my custom event')" | Écoute tout événement personnalisé et déclenche du code lorsqu'il détecte cet événement a été déclenché de n'importe où. | Événement personnalisé |
bind="this.xxx" | Utilisé pour la liaison des données à deux voies sur <inputs> , <selects> et <textareas> . | Lier |
slot="slot-name" | Utilisé pour définir une fente selon le composant Web standard. | Machines à sous |
ref="xxx" | $ref('xxx').onclick = (e) => {...Voir les fonctions internes ci-dessous pour l'utilisation. | Référence |
this-attribute="xxx" | Remplacera this-attribut = "xxx" par ce qui est renvoyé de sa valeur d'attribut. | Cet attribut |
:click.prevent="xxx" | Modificateurs d'événements .Passive, .Capture, .once, .stop, .prevent,. | Modificateurs d'événements |
| Syntaxe | Description | Exemple |
|---|---|---|
<script imports>...</script> | Définissez les scripts d'importation du module. | Importations |
<script mounted>...</script> | Le script s'exécute après que le modèle soit monté sur DOM. | Monté |
<script props>...</script> | Script qui s'exécute lorsque les accessoires changent. | Accessoires |
<script render>...</script> | Script qui rend sa valeur de retour en place. | Rendre |
<script slotchange>...</script> | Script qui s'exécute sur les changements de contenu de l'emplacement. | Changement de fente |
<script update>...</script> | Script qui s'exécute à chaque mise à jour. | Mise à jour |
| Syntaxe | Description | Exemple |
|---|---|---|
bay(); | Utilisé pour initialiser Bay.js si le module importé. | Installation |
bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]); | Créer un composant. | Créer |
bay.refresh(); | Refresh Bay après un nouvel élément personnalisé est appliqué dynamiquement au DOM. | Rafraîchir |
| Syntaxe | Description | Exemple |
|---|---|---|
$bay.encode('string'); | Encoder / échapper à une chaîne. | Encoder |
$bay.decode('string'); | Décoder / un-escape une chaîne. | Décoder |
$bay.emit('custom-event', {key: value}); | Émettez un événement personnalisé. (dans tous les composants) | Émettre |
$bay.on('custom-event', (e) => {console.log(e.detail);}); | Écoutez un événement personnalisé. (dans tous les composants) | Émettre |
$ref('xxx').onclick = (e) => {...$ref('xxx').forEach((el) => {... | Obtient des éléments avec l'attribut ref = "xxx". Ne peut être utilisé que dans le script monté. | Référence |
