extend
extend ist eine Higher-Order-Methode, die zum Erweitern von Eigenschaften oder Methoden einer Instanz verwendet wird.
In der Regel wird es nicht empfohlen, dass Benutzer die Eigenschaften oder Methoden von Instanzen erweitern, da dies die Lernkosten erhöht. Es sei denn, es gibt spezielle Szenarien innerhalb des Teams, die eine Anpassung des Verhaltens von Instanzen erfordern, wird davon abgeraten.
- I am 1
- I am target
- I am 3
logger
Erweitern Sie $ Unterbau
Ähnlich wie jQuery können Sie auch die Eigenschaften oder Methoden der zugrunde liegenden Instanz über fn.extend erweitern; Eigenschaften oder Methoden, die von fn erweitert werden, werden auf alle Instanzen angewendet.
- Ich bin 1
- Ich bin das Ziel
- Ich bin 3
Logger
Erweiterte Vorlagensyntax
Durch extend erweiterte Eigenschaften oder Funktionen können die Funktionalität der Template-Syntax erweitern und Komponenten sogar exklusive Template-Syntax-Sugar bieten. Es sollte jedoch beachtet werden, dass nicht offizielle Template-Syntax möglichst nicht verwendet wird, da sie für die Anwender mit einem gewissen Lernaufwand verbunden ist und eine große Menge an inoffiziellem Template-Syntax-Sugar die Entwicklungserfahrung beeinträchtigt.
Erweiterte Attribute
Sie können erweiterte Attribute verwenden, um sie in der Vorlage mit : festzulegen. Im Folgenden erweitern wir ein red-Attribut. Wenn red true ist, ändert sich die Schriftfarbe in Rot:
$.fn.extend({
set red(bool){
if(bool){
this.css.color = "rot";
}else{
this.css.color = '';
}
}
});
{{count}}
In diesem Beispiel fügen wir der Vorlagensyntax ein red-Attribut hinzu, das die Schriftfarbe auf Rot setzt, wenn count % 3 nicht 0 ist.
Erweiterungsmethoden
Du kannst auch über die extend-Erweiterungsmethode dafür sorgen, dass sie in der Vorlagen-Syntax verfügbar ist. Der Methodenname ist der Teil vor dem Doppelpunkt. Hier erweitern wir eine color-Vorlagen-Syntax; die folgenden Parameter werden an die definierte Erweiterungsmethode übergeben.
Hier wird das Attribut always auf true gesetzt, was bedeutet, dass die definierte Methode jedes Mal aufgerufen wird, wenn die Komponente die Benutzeroberfläche aktualisieren muss. Wenn always nicht gesetzt ist, wird diese Template-Syntax-Funktion nur einmal ausgeführt.
Hierbei bietet options weitere Parameter, die Ihnen helfen können, eine stärker anpassbare Template-Syntax 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 Template-Syntax
Bisher sollten Sie verstanden haben, dass viele der Template-Syntaxen auf ofa.js tatsächlich durch extend erweitert werden:
- Die Methoden
classundattrwerden bei jedem Aktualisieren der Ansicht ausgeführt - Funktionsbindungen wie
onoderonewerden nur einmal ausgeführt
Sie können sich das folgende Beispiel ansehen, um die Template-Render-Prinzipien von ofa.js besser zu verstehen:
class always => {{classalways}}
attr always => {{attralways}}
on always => {{onalways}}