el.js
1.0.0
Un marco de microaplicación razonable con reutilización práctica.
el.js es un marco creado sobre plantillas de Riot.js para crear microaplicaciones.
Los marcos web requieren que los desarrolladores creen la mayoría, si no todas, sus páginas web para que sean aplicaciones web dinámicas. Esto permite a los desarrolladores asegurarse de que todo en su página web obedezca a un único flujo de representación consistente y predecible sobre el que puedan razonar. Sin embargo, también existen muchas desventajas en comparación con los sitios web estáticos tradicionales, incluidos esquemas de almacenamiento en caché más complejos, tiempos de carga más prolongados y problemas de SEO. Las microaplicaciones ofrecen una solución poderosa para estos inconvenientes. En lugar de crear aplicaciones web monolíticas gigantes, cree aplicaciones pequeñas e incrústelas en sus páginas que de otro modo serían estáticas.
Una microaplicación realiza una funcionalidad pequeña y de alcance muy limitado que se puede reutilizar una y otra vez. Las microaplicaciones no difieren mucho de la idea de widgets integrables antes de que los marcos se convirtieran en el estándar, pero difieren en la ejecución al enfatizar la dependencia de marcos razonables y la reutilización práctica.
HTML: índice.html
< html >
< head >
<!-- Head Content -->
< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
</ head >
< body >
< my-form >
< div >
< label > Type Your Name </ label >
<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
< my-input bind =' name ' />
</ div >
< div >
< span > Your Name Is </ span >
< span > { data.name } </ span >
</ div
</ my-form >
<!-- el.js Library -->
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
< script src =" my-script.js " > </ script >
</ body >
</ html >JS: mi-script.js
// window.El is the global value
// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
constuctor ( ) {
// data contains your state
this . data = {
name : '?' ,
}
// your custom tag name
this . tag = 'my-form'
super ( )
}
}
Form . register ( )
// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
constructor ( ) {
// your custom tag name
this . tag = 'my-input'
// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
this . html = '<input onkeydown="{ change }" />'
super ( )
}
}
Input . register ( )
El . mount ( '*' ) Agregue esta etiqueta en la parte inferior antes de sus scripts y departamentos personalizados y la ventana de referencia.
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >Instalar a través de NPM
npm install el . js -- saveSoporta CommonJS
var El = require ' el.js 'o importaciones de ES6
import El from ' el.js 'El.Form hace referencia a este tipo para almacenar la información utilizada para validar el campo asociado con el nombre .
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| configuración | Función Middleware o [ Función Middleware ] | indefinido | Este tipo almacena la MiddlewareFunction o MiddlewareFunctions originales utilizadas para crear validar() |
| nombre | cadena | '' | Este es el nombre de un campo en la propiedad de datos de El.Form al que hace referencia el resto de este tipo. |
| árbitro | Árbol referencial | indefinido | Este es un enlace al árbol de datos mutables que puede recuperar el valor del nombre llamando a this.ref.get( nombre ). |
| Nombre | Tipo | Descripción |
|---|---|---|
| validar | (Árbol referencial, cadena) => Promesa | Este método llama a todas las MiddlwareFunctions en serie mediante promesas. |
Este tipo se utiliza para definir middleware para El.Form . Realizar validación y sanitización de insumos con estas funciones como:
function isRequired ( value ) {
value = value . trim ( )
if ( value && value != '' ) {
return value
}
throw new Error ( 'Required' )
} Este tipo se utiliza internamente en algunos lugares para facilitar la devolución de promesas por referencia.
Esta es la clase base para todas las clases de El. Cada El.View se corresponde con una etiqueta personalizada. Amplíe esta clase para crear sus propias etiquetas personalizadas.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| CSS | cadena | '' | Esta es una cadena que representa el CSS de la etiqueta. Se inyecta una vez por clase en la parte inferior de la etiqueta cuando se monta. |
| datos | Árbol referencial | indefinido | Esta propiedad almacena el estado de la etiqueta. |
| HTML | cadena | '' | Esta es una cadena que representa el html interno de la etiqueta. |
| raíz | Elemento HTML | indefinido | Esta propiedad almacena una referencia a la etiqueta en su página web a la que está vinculada la vista montada. |
| etiqueta | cadena | '' | Este es el nombre de la etiqueta personalizada. |
| Nombre | Tipo | Descripción |
|---|---|---|
| antes de iniciar | () => | El código aquí se ejecuta antes de que se inicialice la etiqueta. |
| inicio | () => | El código aquí se ejecuta cuando se inicializa la etiqueta pero antes de montarla. Recomendado : si necesita vincularse al ciclo de vida de la etiqueta, hágalo aquí. |
| programaractualizar | () => Promesa | Este método programa una llamada de actualización asincrónica. Realiza llamadas de actualización por lotes en la vista superior si hay vistas anidadas. Devuelve una promesa para cuando se ejecute la actualización. |
| actualizar | () => | Este método actualiza la etiqueta. Esto se llama implícitamente después de eventos desencadenados desde una página web. Consulte onkeydown en Un 'Ejemplo de formulario simple' para tal caso. Llame manualmente a este método para actualizar la etiqueta. Recomendado : se recomienda llamar manualmente a ScheduleUpdate() para evitar cascadas de actualizaciones sincrónicas. |
Cada El.View es un emisor de eventos. Consulte riot.observable para obtener más documentación, http://riotjs.com/api/observable/
| Nombre | Tipo | Descripción |
|---|---|---|
| El.View.registro | () => | Esto registra la etiqueta personalizada actual con el motor de renderizado. Llámalo después de definir una etiqueta |
Esta clase se utiliza para representar formularios y microaplicaciones impulsadas por IO más complejas. Esta clase proporciona validación de formularios y lógica de envío de formularios comunes.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| configuraciones | Objeto | indefinido | Proporcione un mapa de nombres a una MiddlewareFunction o una matriz de MiddlewareFunctions . Consulte Función Middleware para obtener más información. |
| entradas | Objeto | nulo | Cada elemento en las configuraciones se convierte en un elemento en las entradas . No se recomienda modificar esto directamente. |
| Nombre | Tipo | Descripción |
|---|---|---|
| inicio | () => | El código aquí se ejecuta cuando se inicializa la etiqueta pero antes de montarla. Llama a initInputs(), así que llámalo manualmente, o llama a super() en ES6. Recomendado : si necesita vincularse al ciclo de vida de la etiqueta, hágalo aquí. |
| initEntradas | () => | Compile las configuraciones y asigne la estructura emitida a las entradas . las entradas como las configuraciones contienen referencias al campo nombrado en data . |
| entregar | (Evento) => Promesa | Este método activa la validación para cada campo de datos como se define en configs . Este método debe llamarse como controlador/escucha de eventos. Llama a enviar () si la validación es exitosa, devuelve una promesa para cuando la validación sea exitosa o falle. |
| _entregar | () => | El código aquí se ejecuta cuando el formulario se valida durante la llamada de envío () |
Esta es la clase base para crear entradas de formulario y controles IO.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| unir | cadena | '' | Esta propiedad determina a qué campo de los datos del formulario principal se vincula. |
| buscar | cadena | '' | Igual que bind , en desuso . |
| mensaje de error | cadena | '' | Esta propiedad se establece en el primer mensaje de error que detecta la promesa devuelta por this.input.validate. |
| aporte | Tipo de entrada | nulo | Esta propiedad se toma de la propiedad de entradas del formulario principal en función de lo que especifica el enlace del campo de datos principal. |
| válido | booleano | FALSO | Esta propiedad se utiliza para determinar el estado de validación en el que se encuentra la entrada. Se establece cuando se llama a this.input.validate, solo se establece en verdadero si la promesa devuelta por this.input.validate se ejecuta por completo. |
| Nombre | Tipo | Descripción |
|---|---|---|
| cambiar | (Evento) => | Este método actualiza la entrada y luego la valida. Este método debe ser llamado por un controlador/escucha de eventos. |
| cambió | () => | Este método se llama cuando la promesa devuelta por this.input.validate se ejecuta por completo. |
| borrarError | () => | Este método establece errorMessage en '' y se llama antes de la validación. |
| error | (Error) => | Este método establece errorMessage y se llama cuando falla la validación. |
| obtenerValor | (Evento) => cualquiera | Este método obtiene el valor de la entrada. De forma predeterminada, este método devuelve el valor objetivo del evento . |
| validar | (¿Referencia de promesa?) => Promesa | Este método valida la entrada, devuelve una Promesa que representa el éxito y el fracaso de la validación tanto por referencia (necesaria internamente) como por valor. |
| Nombre | Tipo | Descripción |
|---|---|---|
| El.scheduleUpdate | () => | Programe la actualización para todas las microaplicaciones de la página. |
Las funciones del ciclo de vida de el.js se heredan de Riot.js.
el.js utiliza árboles de referencia para almacenar los datos de su formulario.
Implemente los métodos get, set, on, once y off del referencial en su propia estructura de datos y colóquelos como propiedad de datos.
Un contenedor es una etiqueta personalizada que proporciona métodos para usar en su plantilla interna y cuyo contenido se puede sobrescribir por completo (solo contiene contenido en una o más etiquetas). Un control es un componente que interactúa con el usuario con el fin de mostrar información de una manera interesante u obtener información como una entrada, una selección o una inserción de GoogleMaps.
En lugar de crear widgets de forma estrechamente acoplada, descomponga el widget en contenedores y controles para maximizar la reutilización. Estructura el HTML interno de la forma que tenga más sentido. Luego, entregue su widget, contenedor y controles completos a sus usuarios para que puedan personalizar el widget según sus diversos requisitos.
Al abstraer los elementos de su interfaz de usuario de esta manera, es mucho más fácil para otra persona reutilizar y personalizar su código. Consulte shop.js para ver una implementación.
Es mejor utilizar un único almacén de estado de alto nivel para simplificar el guardado y la restauración del estado de su página web o de todo el sitio web.
Esto se puede lograr proporcionando a todos los contenedores de nivel superior de la página el mismo campo de datos . a través de la llamada de montaje inicial
var data = {
state0 : 0 ,
state1 : 1 ,
}
El . mount ( '*' , { data : data } )A diferencia del renderizado normal de Riot, el.js permite el acceso implícito a valores en this.parent y this.parent...parent a través de la herencia prototípica del contexto de renderizado. Esto se hace para evitar pasar repetidamente los mismos datos a través de contenedores anidados porque es propenso a errores y demasiado detallado. Esto también facilita la construcción de contenedores y controles.
Pasando explícitamente la variable de datos:
< my-container-1 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value1 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value3 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )Equivale a hacer referencia implícita a la variable de datos.
< my-container-1 >
< my-container-2 >
< my-container-3 >
value: { data.value1 }
</ my-container-3 >
< my-container-3 >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 >
< my-container-3 >
value: { data.value3 }
</ my-container-3 >
< my-container-3 >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) BSD
