Nadie pregunta por qué se necesitan funciones, porque esto es algo obvio y útil en programación. Las funciones le permiten reutilizar su código y mejorar la arquitectura de su aplicación.
¿Por qué no utilizar la misma capacidad en las plantillas de componentes? Hoy en día, muchos marcos permiten que los componentes se utilicen dentro de otros componentes. Pero esto es más como conectar un módulo que solo funciones. Después de todo, un componente, además de una plantilla, puede tener su propio código JavaScript, sus propios estilos y está muy aislado (lo cual es bueno).
Para este caso, Malina.js tiene, por así decirlo , "funciones" para plantillas de "fragmentos" , te permiten reutilizar diferentes fragmentos de la plantilla, son mucho más livianos que los componentes, no necesitan ser movidos a un archivo separado (lo que a menudo es necesario con los componentes), y tienen algunos características que tienen las funciones ordinarias, por ejemplo, recursividad y cierres, porque el fragmento como resultado se compila en una función ordinaria.
1. Reutilización de un fragmento de una plantilla
Cuando trabaja en una plantilla de componente, especialmente si es un formulario, elementos de entrada, paneles, etc., es posible que tenga bloques duplicados que podrían reutilizarse. A continuación se muestra una parte de la plantilla de js-framework-benchmark , en la que hay varios botones idénticos:
Al usar "fragment" , podría verse así:
aquí
buttonse declara un fragmento con dos argumentos id, namey se envía un evento "click" desde el botón @click. Esta fila de botones se podría hacer usando una directiva for/each, pero un fragmento no solo se puede usar en una línea.
2. Cierres
Porque un fragmento se compila en una función, lo que significa que puede declararse en casi cualquier lugar, incluso dentro de un bucle
for/each, por lo que puede usar cierres. En el siguiente ejemplo, el fragmento boxtiene un argumento text, una variable de ciclo cerrado colory una referencia a una función clickdesde la raíz del componente que se llama al hacer clic:@click={click(text, color)}
3. Recurrencia
"Fragmento" puede llamarse a sí mismo lo que permite hacer recursividad y construir árboles, también "fragmento" se puede ubicar en la parte inferior del componente, porque en JavaScript, una función está disponible en todo el ámbito (actual), incluso si se declara al final.
A continuación, se muestra un ejemplo de un fragmento
drawque se llama a sí mismo y crea un árbol:
Conclusión
Un "fragmento" es una "pieza" ligera de plantilla que se puede reutilizar dentro de un componente, ayuda a que el componente sea más compacto con una mejor estructura.
Todos los ejemplos se pueden probar en el editor REPL en línea , ejemplos en la esencia .
Gracias por su atención.