Componentes

Framework frontend para aumentar la productividad sin complejidad al: organizar, desarrollar, incluir, sincronizar y ejecutar componentes reutilizables HTML, CSS y JavaScript.

Versión: 1.1.0

Instalación gratis

Características

Programación directa con: HTML, CSS o JavaScript
Sintaxis en idioma español
Sin dependencias aparte del browser y ECMAScript 6
Carga asíncrona de componentes HTML, CSS o JavaScript
Sincronización automática de todos los componentes cargados
Interconexión entre componentes basada en eventos de fácil acceso con JavaScript
Sin clases, ni contextos complejos ni metodologías de comunicación entre componentes
Reutilización de componentes y caché de componentes precargados
Compatibilidad para crear manejadores independientes de: eventos, formularios, etc.
Compatibilidad para funcionar (en general) sin interferencias con otros frameworks

Limitaciones:

Sin manejadores integrados de eventos (en su lugar addEventListener nativo)
Sin manejadores integrados de formularios (como ngModel)
Sin manejadores integrados de condiciones o bucles (como ngIf o ngFor)
Ejecutar más de una vez el inicializador cargarComponentes aislará los componentes cargados en cada ejecución.

Instalación

Realizar la instalación requiere conocimientos básicos de diseño y desarrollo web frontend.

En frontend:

1. Inserte en la etiqueta <head> de los archivos HTML raíces:

<script src="https://componentes.okzgn.com/componentes-v-1-1-0.js"></script>

2. A continuación, inicialice la función principal para cargar componentes:

<script>	
onDOMLoad(function(){
	cargarComponentes.fuente="./carpeta_de_componentes/";
	cargarComponentes();
});
</script>

O para usar la carpeta relativa por defecto ("./componentes/"):

<script>
onDOMLoad(function(){
	cargarComponentes();
});
</script>

3. Cree componentes e insértelos en cualquier etiqueta HTML mediante atributos:

data-componente="nombre_componente"

Instrucciones

Seguir las instrucciones requiere conocimientos básicos de diseño y desarrollo web frontend.

Crear componentes:

1. Cree una carpeta para el componente exactamente con el mismo nombre del atributo HTML:
- Carpeta: ./carpeta_de_componentes/nombre_componente/
- Elemento y atributo HTML:
```
<div data-componente="nombre_componente"></div>
```
2. Cree al menos uno de los siguientes archivos en la carpeta del componente:
- Estas son las partes de cada componente.
- estilo.css ./carpeta_de_componentes/nombre_componente/estilo.css
- componente.html ./carpeta_de_componentes/nombre_componente/componente.html
- funcionalidad.js ./carpeta_de_componentes/nombre_componente/funcionalidad.js

Programar componentes:

1. estilo.css:
- Escriba código CSS válido, recuerde que se insertará en el archivo HTML raíz, podría sobreescribir las reglas CSS anteriores y aplicarse a todo el documento (si no lo necesita, coloque identificadores y use selectores específicos en el HTML y CSS del componente).
- Para seleccionar el HTML del componente use el selector CSS: [data-componente-cargado="nombre_componente"]
2. componente.html:
- Escriba código HTML válido. Coloque identificadores, clases o atributos únicos en el HTML si necesita seleccionar partes específicas con CSS o JavaScript.
- Puede incluir subcomponentes con el mismo atributo: data-componente="nombre_subcomponente"
3. funcionalidad.js:
- Escriba código JavaScript válido. El contexto de ejecución del código no es global.
- El contexto de ejecución del código incluye dos variables predefinidas: componentes y componente
  - componentes
    Referencia a todos los componentes cargados en la misma inicialización.
    - componentes.otro_componente
      Referencia a uno o varios componentes con el nombre especificado ("otro_componente"). Si no existe, se evalúa como false; si hay varios componentes iguales, hace referencia a un array; si solo hay uno, hace referencia a un object.
    - componentes.otro_componente.onLoad.componente
      Evento (function) que se ejecutará al cargar el componente HTML.
      
      Ejemplo:
```
componentes.otro_componente.onLoad.componente = function(){ alert('Tiene componente HTML.'); }
```
    - componentes.otro_componente.onElse.componente
      Evento (function) que se ejecutará si no tiene componente HTML.
      
      Ejemplo:
```
componentes.otro_componente.onElse.componente = function(){ alert('No tiene componente HTML.'); }
```
    - componentes.otro_componente.onLoad.estilo
      Evento (function) que se ejecutará al cargar el componente CSS.
    - componentes.otro_componente.onElse.estilo
      Evento (function) que se ejecutará si no tiene componente CSS.
    - componentes.otro_componente.onLoad.funcionalidad
      Evento (function) que se ejecutará al cargar el componente JavaScript.
    - componentes.otro_componente.onElse.funcionalidad
      Evento (function) que se ejecutará si no tiene componente JavaScript.
  - componente
    Referencia al mismo componente: elemento HTML y CSS (nodos DOM), entre otras referencias.
    - componente.elementoInicial
      Referencia al elemento nodo del DOM donde se colocó el atributo: data-componente="nombre_componente"
    - componente.componente
      Referencia al elemento nodo del DOM contenedor (<div> parentNode) del componente HTML. Si no existe, se evalúa como false.
    - componente.estilo
      Referencia al elemento nodo del DOM del estilo CSS del componente. Si no existe, se evalúa como false.
    - componente.funcionalidad
      Referencia al object que contiene el retorno (componente.funcionalidad.retorno) del JavaScript ejecutado del componente. Si no existe, se evalúa como false.

Para saber más cómo utilizar o sobre la documentación solicite ayuda o soporte gratuito.

Ejemplos

Básico (vea el código)