extend
extend es un método de orden superior utilizado para extender las propiedades o métodos de una instancia.
Normalmente, no se recomienda que los usuarios extiendan las propiedades o métodos de una instancia, ya que esto aumenta la curva de aprendizaje. A menos que haya un escenario especial dentro del equipo que requiera personalizar el comportamiento de la instancia, no se recomienda hacerlo.
- I am 1
- I am target
- I am 3
logger
Extensión de la capa inferior de $
De forma similar a jQuery, también puedes usar fn.extend para expandir las propiedades o métodos de la instancia base; las propiedades o métodos extendidos desde fn se aplicarán a todas las instancias.
- I am 1
- I am target
- I am 3
logger
Sintaxis de plantilla extendida
Al extender propiedades o funciones mediante extend, se puede ampliar la funcionalidad de la sintaxis de plantillas e incluso proporcionar un azúcar sintáctico de plantillas exclusivo para los componentes. Sin embargo, hay que tener en cuenta que se debe intentar no utilizar sintaxis de plantillas no oficiales, ya que esto conlleva un cierto costo de aprendizaje para los usuarios, y el uso de una gran cantidad de azúcar sintáctico no oficial puede reducir la experiencia de desarrollo.
Atributos extendidos
Puedes configurar en la plantilla usando : a través de propiedades extendidas. A continuación, extenderemos una propiedad red, cuando red sea true, el color de la fuente se volverá rojo:
$.fn.extend({
set red(bool){
if(bool){
this.css.color = "rojo";
}else{
this.css.color = '';
}
}
});
{{count}}
En este ejemplo, hemos añadido un atributo red a la sintaxis de la plantilla. Cuando count % 3 no sea 0, el color de la fuente cambiará a rojo.
Métodos de extensión
También puedes hacer que esté disponible en la sintaxis de plantilla a través del método de extensión extend. El nombre del método es la parte anterior a los dos puntos. Aquí, hemos extendido una sintaxis de plantilla color, y los parámetros que le siguen se pasarán al método de extensión definido.
Aquí se establece el atributo always como true, lo que significa que cada vez que el componente necesite actualizar la interfaz, se llamará a este método definido. Si no se establece always, esta función de sintaxis de plantilla solo se ejecutará una vez.
Entre ellos, options proporciona más parámetros que pueden ayudarte a desarrollar una sintaxis de plantillas más personalizada:
$.fn.extend({
color(value, func, options){
const bool = func();
if(bool){
this.css.color = value;
}else{
this.css.color = '';
}
}
});
$.fn.color.always = true;
{{count}}
Principios de la sintaxis de plantillas
Hasta ahora, deberías haber comprendido que gran parte de la sintaxis de plantillas en ofa.js en realidad se extiende mediante extend:
- los métodos
class,attrse ejecutan cada vez que se actualiza la vista - la vinculación de funciones como
on,onesolo se ejecuta una vez
Puedes consultar el siguiente ejemplo para comprender mejor el principio de renderizado de plantillas de ofa.js:
class siempre => {{classalways}}
attr siempre => {{attralways}}
on siempre => {{onalways}}