bay.js
1.0.0
Bay.js es una biblioteca frontend diseñada para facilitar la creación de componentes web reutilizables, así como para agregar estado e interactividad a HTML. Para verlo en acción, puede visitar bayjs.org y explorar sus ejemplos.
<template> en el DOM como fuente de plantilla.Bay.js se puede usar a través de una etiqueta de script o importar como un módulo.
< script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >Ejemplo de etiqueta 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 ( ) ; Es posible que desee agregar un número de versión como este para evitar cambios de ruptura: '//cdn.jsdelivr.net/npm/@dunks1980/bay.js@ <versión> /bay.min.mjs' El número de versión es opcional y se puede adquirir para ir a la página del paquete NPM. O si usa node_modules: './node_modules/@dunks1980/bay.js/bay.min.mjs';
Ejemplo del módulo ES
npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;Ejemplo 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 > La configuración solo se puede configurar con los módulos ES o NPM, deben ser cadenas y solo se pueden configurar una vez antes de crear componentes. Las variables de configuración se pueden usar en cualquier lugar dentro de las plantillas.
Ejemplo de configuración
Hay algunas formas de definir un componente en Bay.js:
En su HTML, cree una plantilla en línea y aplique el atributo de la bahía y cualquier otro accesorio:
< template bay =" my-component-name " message >
< h1 > ${this.message} </ h1 >
</ template >
< my-component-name message =" Hello world! " > </ my-component-name > En su HTML, cree una plantilla en línea y una bahía de suministros. JS el ID de plantillas:
< template id =" my-template " >
< h1 > ${this.message} </ h1 >
</ template >
< my-component bay =" #my-template " message =" Hello world! " > </ my-component > Cree un archivo y suministro bay.js la URL (no envuelva el contenido del archivo en la plantilla). La extensión del archivo puede ser cualquier cosa que desee siempre que su contenido esté en formato 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 > Pase bay.js la plantilla importada:
import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ; O crear plantilla y pasarla: ($ y `Dentro de la cadena necesitará escapar si cadena 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 > En su HTML, cree un elemento en línea con una plantilla en el interior, luego agregue la bay-hidrato al elemento que contiene:
< 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 > Los accesorios no estarán disponibles utilizando este método, pero puede usar la configuración. El contenido se representa al DOM principal para que los estilos no se encapsulen y las etiquetas <style> definidas dentro de la plantilla no tendrán ningún efecto.
En su html, cree un elemento en línea con una plantilla en el interior, luego agregue bay = "dsd" al elemento y shadowrootmode = "abierto" al elemento de plantilla:
< 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 > Los elementos serán visibles mientras Bay se carga, pero no si están envueltos en etiquetas Noscript. Los elementos de DSD y sus hijos serán eliminados una vez que se cree el componente y se eliminarán los elementos de NoScript, pero su contenido permanecerá y su contenido se analizará y difundirá. Los accesorios no estarán disponibles utilizando este método, pero puede usar la configuración. El contenido se representa al DOM principal para que los estilos no se encapsulen.
Se puede usar un componente en cualquier lugar del HTML, pero las plantillas en línea deben estar en el cuerpo del documento. "My-Component" puede ser cualquier cosa que desee, pero debe tener un tablero en el nombre según la especificación del elemento personalizado.
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
<if this="this.xxx">...</if> | Declaración if, presenta solo el contenido entre las etiquetas <if> si es este atributo es verdadero. | Condicional |
<else-if this="this.xxx">...</else-if> | De lo contrario, si hace que solo el contenido entre las etiquetas <else-if> si es este atributo es verdadero y anterior <if> <else-if> es falso. | Condicional |
<else>...</else> | De lo contrario, representa solo el contenido entre las etiquetas <else> si todas las etiquetas anteriores <if> <else-if> son falsas. | Condicional |
<show this="this.xxx">...</show> | Muestre, cuando necesite mantener el código en el DOM y alternar su pantalla. Agregar duración <show this="this.xxx" duration=".5s"> para un efecto de desvanecimiento. | Espectáculo |
<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch> | Declaración de interruptor, para condicionales más complejos. | Cambiar |
<map array="this.arr">...</map> | Mapear, para iterar sobre una matriz <map params="item, i, array" array="this.arr" join="<hr>"> Los parámetros y unir son opcionales, los parámetros predeterminados son: element, index, array . | Iteración |
<for array="this.arr">...</for> | Bucle foreach, para iterar sobre una matriz <for params="item, i, array" array="this.arr"> Los parámetros son opcionales, los parámetros predeterminados son: element, index, array . | Iteración |
<for this="let i = 0; i < this.arr.length; i++">...</for> | Para bucle, para iterar con condiciones. | Iteración |
<inner-html>...</inner-html> | Para renderizar a la luz dom. Si el atributo inner-html está presente en el componente, hará dentro de ese elemento:<my-comp bay="..." inner-html="#render-target"> . Si el atributo Inner-HTML no está presente en el componente, puede usar una ranura para ver el contenido interno-HTML. | HTML interno |
<slot name="slot1">...</slot> | Se usa para definir una ranura según el componente web estándar. | Ranura |
<route href="/xxx/var">...</route> | La ruta crea la ruta para la etiqueta del enrutador, está destinada a una aplicación de una sola página (SPA). | Ruta |
<router this="/xxx/:xxx">...</router> | El enrutador coincide con la URL actual :xxx se usan para variables. | Ruta |
<define this="myEl">...</define> <myEl></myEl> | Defina un bloque de código para ser reutilizado. | Definir |
<include this="https://..."></include> | Incluya el código en la plantilla de una URL. | Incluir |
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
this.xxx = 'xxx'; | Asignar this.xxx Un valor activará un render de componente de la bahía.Para obtener/establecer este valor desde fuera del componente: document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx'; | Local |
$global = 'xxx'; | Asignar $global.xxx Un valor activará el renderizado en todos los componentes de la bahía que contienen $global .Para obtener/establecer este valor fuera de los componentes: bay.global.xxx = 'hello'; console.log(bay.global); | Global |
$bay.querySelector('xxx'); | Use $bay para apuntar a la Sombra Dom. Shadow Dom vs. Light Dom | Variables |
$el.querySelector('xxx'); | Use $el para apuntar a la luz DOM. Shadow Dom vs. Light Dom | Variables |
$parent.xxx = 'xxx'; | Asignar $parent.xxx Un valor actualizará this.xxx en el padre si el padre es otro componente de la bahía y se desencadena un render. | Padre |
$details.changed;$details.element; | Detalles del atributo de script de slotchange en cuanto a lo que cambió. | Ranura |
$route | Detalles desde la ubicación de la ventana. | Enrutador |
$path | : variables de la ruta de búsqueda :xxx/:xxx . | Enrutador |
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
bay="#my-template"bay="/my-template.html"bay="dsd" | Cuando se define en <custom-element bay="..."> Etiqueta será la plantilla que se puede usar, puede ser una identificación de plantillas o una ruta a un archivo, DSD es experimental. | Uso de identificación Uso de archivo DSD |
bay="my-template-name" | Cuando se define en A <template bay="custom-element"> será el nombre de la etiqueta <custom-element> . | Uso de nombre |
fouc | Se usa para ocultar la luz DOM dentro del componente hasta que esté completamente cargado. | Fuco |
inner-html="#render-target" | Se usa para decirle al componente dónde debe representar el contenido <inner-html>...</inner-html> . | HTML interno |
xxx="value" | Cualquier otro atributo se pasa al componente y se convierte en accesorios a los que se puede acceder a través de this.xxx , siendo xxx el nombre del atributo. | Accesorios |
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
:style="color: red; display: ${this.display}" | Aplicar estilos de datos en línea. | Estilos |
:click="console.log('clicked')" | Cualquier evento de JavaScript que comience con (OnClick en este ejemplo) simplemente reemplace con: ( oninput="xxx" -> :input="xxx" ). | Eventos |
:my-event="console.log('my custom event')" | Escucha cualquier evento personalizado y dispara el código cuando detecta que ese evento se ha activado desde cualquier lugar. | Evento personalizado |
bind="this.xxx" | Se utiliza para la unión de datos de 2 vías en <inputs> , <selects> y <textareas> . | Unir |
slot="slot-name" | Se usa para definir una ranura según el componente web estándar. | Ranura |
ref="xxx" | $ref('xxx').onclick = (e) => {...Vea las funciones internas a continuación para su uso. | Árbitro |
this-attribute="xxx" | Reemplazará this-attribute = "xxx" con lo que se devuelve de su valor de atributo. | Este atributo |
:click.prevent="xxx" | Modificadores de eventos .passive, .capture, .once, .stop, .prevent,. | Modificadores de eventos |
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
<script imports>...</script> | Definir scripts de importación del módulo. | Importaciones |
<script mounted>...</script> | El script se ejecuta después de que la plantilla se monta en DOM. | Montado |
<script props>...</script> | Script que se ejecuta cuando cambian los accesorios. | Accesorios |
<script render>...</script> | Script que renderiza su valor de retorno en su lugar. | Prestar |
<script slotchange>...</script> | Script que se ejecuta en cambios de contenido de ranura. | Cambio de ranura |
<script update>...</script> | Script que se ejecuta en cada actualización. | Actualizar |
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
bay(); | Se utiliza para inicializar bay.js si el módulo importado. | Instalación |
bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]); | Crear un componente. | Crear |
bay.refresh(); | Refresh Bay después de que un nuevo elemento personalizado se aplique dinámicamente al DOM. | Refrescar |
| Sintaxis | Descripción | Ejemplo |
|---|---|---|
$bay.encode('string'); | Codificar/escapar una cadena. | Codificar |
$bay.decode('string'); | Decodificar/sin escalar una cadena. | Descodificar |
$bay.emit('custom-event', {key: value}); | Emitir un evento personalizado. (en todos los componentes) | Emitir |
$bay.on('custom-event', (e) => {console.log(e.detail);}); | Escuche un evento personalizado. (en todos los componentes) | Emitir |
$ref('xxx').onclick = (e) => {...$ref('xxx').forEach((el) => {... | Obtiene elementos con el atributo ref = "xxx". Solo se puede usar en script montado. | Árbitro |
