extend
extend est une méthode d'ordre supérieur servant à étendre les propriétés ou les méthodes d'une instance.
En règle générale, il n'est pas recommandé aux utilisateurs d'étendre les propriétés ou méthodes des instances, car cela augmente le coût d'apprentissage. Sauf si l'équipe a besoin de personnaliser le comportement des instances dans un scénario particulier, il n'est pas recommandé de le faire.
- I am 1
- I am target
- I am 3
logger
Étendre le $ sous-jacent
Similaire à jQuery, vous pouvez également étendre les propriétés ou méthodes de l'instance sous-jacente via fn.extend ; les propriétés ou méthodes étendues à partir de fn s'appliquent à toutes les instances.
- I am 1
- I am target
- I am 3
logger
Syntaxe de modèle étendue
En étendant les attributs ou fonctions via extend, on peut enrichir la syntaxe des modèles, voire offrir à un composant sa propre « syntaxe sucrée ». Il faut toutefois veiller à ne pas utiliser de syntaxes non officielles : elles imposent un coût d’apprentissage et, en grand nombre, dégradent l’expérience de développement.
Attributs étendus
Vous pouvez utiliser les attributs d’extension et les définir dans le modèle avec :. Ci-dessous, nous étendons l’attribut red : lorsque red vaut true, la couleur de la police devient rouge :
$.fn.extend({
set red(bool){
if(bool){
this.css.color = "rouge";
}else{
this.css.color = '';
}
}
});
{{count}}
Dans cet exemple, nous avons ajouté un attribut 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 précédant les deux-points. Ici, nous avons étendu une syntaxe de modèle color, et les paramètres qui suivent seront passés à la méthode d'extension définie.
Ici, l'attribut always est défini sur true, ce qui signifie que cette 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 template ne s'exécutera qu'une seule fois.
Parmi ceux-ci, options fournit plus de paramètres, ce qui peut vous aider à 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 templates
Jusqu’à présent, vous devriez 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 fonctions de liaison 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 :
classe toujours => {{classalways}}
attribut toujours => {{attralways}}
on toujours => {{onalways}}