extend
extend est une méthode d’ordre supérieur utilisée pour étendre les propriétés ou les méthodes d’une instance.
En général, il n'est pas recommandé aux utilisateurs d'étendre les propriétés ou les méthodes d'une instance, car cela augmente le coût d'apprentissage. Sauf si des scénarios spécifiques au sein de l'équipe nécessitent un comportement personnalisé de l'instance, il est déconseillé de procéder ainsi.
- I am 1
- I am target
- I am 3
logger
Étendre $ fond
Comme jQuery, vous pouvez également étendre les propriétés ou méthodes des instances de base via fn.extend ; les propriétés ou méthodes étendues à partir de fn seront appliquées à toutes les instances.
- I am 1
- I am target
- I am 3
logger
Syntaxe de modèle étendue
En étendant des propriétés ou des fonctions via extend, vous pouvez augmenter les fonctionnalités de la syntaxe des templates, voire fournir une syntaxe de template exclusive pour les composants. Cependant, il est important de noter qu'il est préférable de ne pas utiliser de syntaxes de template non officielles, car elles imposent un certain coût d'apprentissage aux utilisateurs, et une grande quantité de syntaxes de template non officielles peut réduire l'expérience de développement.
Attributs étendus
Vous pouvez définir des propriétés étendues dans le modèle en utilisant :. Nous allons maintenant étendre une propriété red, lorsque red est true, la couleur de la police devient rouge :
$.fn.extend({
set red(bool){
if(bool){
this.css.color = "red";
}else{
this.css.color = '';
}
}
});
{{count}}
Dans cet exemple, nous avons ajouté une propriété red à la syntaxe du modèle ; lorsque count % 3 n’est pas égal à 0, la couleur de la police devient rouge.
Méthodes d'extension
Vous pouvez également utiliser la méthode d'extension extend pour la rendre disponible dans la syntaxe des modèles. Le nom de la méthode est la partie avant les deux-points. Ici, nous avons étendu une syntaxe de modèle color, et les paramètres qui suivent seront transmis à la méthode d'extension définie.
Ici, l'attribut always est défini à true, ce qui signifie que la méthode définie sera appelée à chaque fois que le composant a besoin de rafraîchir l'interface. Si always n'est pas défini, cette fonction de syntaxe de modèle ne sera exécutée qu'une seule fois.
Parmi eux, options fournit davantage de paramètres qui vous permettent de développer une syntaxe de modèle plus personnalisée :
$.fn.extend({
color(value, func, options){
const bool = func();
if(bool){
this.css.color = value;
}else{
this.css.color = '';
}
}
});
$.fn.color.always = true;
{{count}}
Principe de la syntaxe des modèles
Jusqu’à présent, tu devrais déjà comprendre que de nombreuses syntaxes de modèle sur ofa.js sont en réalité étendues via extend :
- Les méthodes
class,attrs'exécutent à chaque rafraîchissement de la vue - Les liaisons de fonctions comme
on,onene s'exécutent qu'une seule fois
Vous pouvez consulter l'exemple ci-dessous pour mieux comprendre le principe de rendu des modèles d’ofa.js :
class always => {{classalways}}
attr always => {{attralways}}
on always => {{onalways}}