extend
extend ist eine höhere Methode, die verwendet wird, um die Attribute oder Methoden einer Instanz zu erweitern.
In der Regel wird es nicht empfohlen, dass Benutzer die Eigenschaften oder Methoden der Instanz erweitern, da dies die Lernkurve erhöht. Es sei denn, es gibt im Team spezielle Szenarien, in denen das Verhalten der Instanz angepasst werden muss, andernfalls ist dies nicht ratsam.
- I am 1
- I am target
- I am 3
logger
Erweitern Sie die $-Unterstützung
Ähnlich wie jQuery kannst du auch mit fn.extend die Eigenschaften oder Methoden der zugrunde liegenden Instanz erweitern; die von fn erweiterten Eigenschaften oder Methoden werden auf alle Instanzen angewendet.
- I am 1
- I am target
- I am 3
logger
Erweiterte Vorlagensyntax
Durch das Erweitern von Eigenschaften oder Funktionen mit extend kann die Funktionalität der Vorlagensyntax erweitert werden, sogar bis hin zur Bereitstellung spezifischer Vorlagen-Syntaktischer Zucker für Komponenten. Es ist jedoch zu beachten, dass nicht offizielle Vorlagensyntax möglichst vermieden werden sollte, da sie für Benutzer einen gewissen Lernaufwand mit sich bringt und eine große Anzahl nicht offizieller Vorlagen-Syntaktischer Zucker die Entwicklungserfahrung beeinträchtigt.
Erweiterte Attribute
Sie können über Erweiterungsattribute im Template mit : Einstellungen vornehmen. Im Folgenden erweitern wir ein red-Attribut: Wenn red den Wert true hat, wird die Schriftfarbe rot.
$.fn.extend({
set red(bool){
if(bool){
this.css.color = "red";
}else{
this.css.color = '';
}
}
});
{{count}}
In diesem Beispiel haben wir der Templatsyntax eine red-Eigenschaft hinzugefügt. Wenn count % 3 nicht 0 ist, wird die Schriftfarbe rot.
Erweiterungsmethoden
Du kannst sie auch durch die extend-Erweiterungsmethode in der Templatesyntax verfügbar machen. Der Methodenname ist der Teil vor dem Doppelpunkt. Hier haben wir eine color-Templatesyntax erweitert, und die nachfolgenden Parameter werden an die definierte Erweiterungsmethode übergeben.
Hier wurde das always-Attribut auf true gesetzt, was bedeutet, dass diese definierte Methode jedes Mal aufgerufen wird, wenn die Komponente die Oberfläche aktualisieren muss. Wenn always nicht gesetzt wird, wird diese Template-Syntax-Funktion nur einmal ausgeführt.
Dabei bietet options mehr Parameter, die Ihnen helfen, eine individuellere Vorlagensyntax zu entwickeln:
$.fn.extend({
color(value, func, options){
const bool = func();
if(bool){
this.css.color = value;
}else{
this.css.color = '';
}
}
});
$.fn.color.always = true;
{{count}}
Prinzip der Vorlagen-Syntax
Bis jetzt solltest du bereits verstanden haben, dass viele der Template-Syntaxen auf ofa.js tatsächlich über extend erweitert werden:
- Die Methoden
classundattrwerden bei jedem Neuladen der Ansicht ausgeführt - Funktionsbindungen wie
onoderonewerden nur einmal ausgeführt
Du kannst dir das folgende Beispiel ansehen, um das Prinzip des Template-Renderings von ofa.js besser zu verstehen:
class always => {{classalways}}
attr always => {{attralways}}
on always => {{onalways}}