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 la instancia, ya que esto aumenta el costo de aprendizaje. A menos que haya escenarios específicos dentro del equipo que requieran personalizar el comportamiento de la instancia, no se recomienda hacerlo.
- Soy 1
- Soy el objetivo
- Soy 3
registrador
Extender $ capa inferior
Similar a jQuery, también puedes extender las propiedades o métodos de la instancia subyacente mediante fn.extend; 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 ampliada
Mediante la extensión de propiedades o funciones con extend, se pueden aumentar las funcionalidades de la sintaxis de plantillas, e incluso proporcionar azúcar sintáctico exclusivo para componentes. Pero es importante tener en cuenta que no se debe usar sintaxis de plantilla no oficial, ya que imponen un cierto costo de aprendizaje para los usuarios, y una gran cantidad de azúcar sintáctico no oficial puede reducir la experiencia de desarrollo.
Propiedades extendidas
Puedes usar : en la plantilla a través de la extensión de atributos. A continuación, extenderemos un atributo red. Cuando red sea true, el color de la fuente se volverá rojo:
$.fn.extend({
set red(bool){
if(bool){
this.css.color = "red";
}else{
this.css.color = '';
}
}
});
{{count}}
En este ejemplo, agregamos un atributo red a la sintaxis de la plantilla. Cuando count % 3 no es igual a 0, el color de la fuente se vuelve rojo.
Métodos de extensión
También puedes hacerlo disponible en la sintaxis de plantilla mediante el método de extensión extend. El nombre del método es la parte antes de los dos puntos. Aquí, hemos extendido una sintaxis de plantilla color, y los parámetros que la siguen se pasarán al método de extensión definido.
Aquí se ha establecido el atributo always como true, lo que significa que cada vez que el componente necesite refrescar 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 plantilla 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}}
Principio de sintaxis de plantillas
Hasta ahora, deberías haber entendido que muchas de las sintaxis de plantillas en ofa.js en realidad se extienden a través de 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 always => {{classalways}}
attr always => {{attralways}}
on always => {{onalways}}