el.js
1.0.0
Ein vernünftiges Mikro-App-Framework mit praktischer Wiederverwendbarkeit.
el.js ist ein auf Riot.js-Vorlagen basierendes Framework zum Erstellen von Mikro-Apps.
Web-Frameworks verlangen von Entwicklern, dass sie die meisten, wenn nicht alle, ihrer Webseiten als dynamische Webanwendungen erstellen. Dadurch können Entwickler sicherstellen, dass alles auf ihrer Webseite einem einzigen konsistenten, vorhersehbaren Rendering-Fluss folgt, über den sie nachdenken können. Allerdings gibt es im Vergleich zu herkömmlichen statischen Websites auch viele Nachteile, darunter komplexere Caching-Systeme, längere Ladezeiten und SEO-Probleme. Mikroapps bieten eine leistungsstarke Lösung für diese Nachteile. Anstatt riesige monolithische Webanwendungen zu erstellen, erstellen Sie kleine Apps und betten Sie diese in Ihre ansonsten statischen Seiten ein.
Eine Mikro-App führt eine kleine und sehr eng begrenzte Funktionalität aus, die immer wieder verwendet werden kann. Mikro-Apps unterscheiden sich nicht wesentlich von der Idee einbettbarer Widgets, bevor Frameworks zum Standard wurden. Sie unterscheiden sich jedoch in der Ausführung, indem sie den Schwerpunkt auf vernünftige Frameworks und praktische Wiederverwendbarkeit legen.
HTML: index.html
< html >
< head >
<!-- Head Content -->
< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
</ head >
< body >
< my-form >
< div >
< label > Type Your Name </ label >
<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
< my-input bind =' name ' />
</ div >
< div >
< span > Your Name Is </ span >
< span > { data.name } </ span >
</ div
</ my-form >
<!-- el.js Library -->
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
< script src =" my-script.js " > </ script >
</ body >
</ html >JS: my-script.js
// window.El is the global value
// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
constuctor ( ) {
// data contains your state
this . data = {
name : '?' ,
}
// your custom tag name
this . tag = 'my-form'
super ( )
}
}
Form . register ( )
// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
constructor ( ) {
// your custom tag name
this . tag = 'my-input'
// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
this . html = '<input onkeydown="{ change }" />'
super ( )
}
}
Input . register ( )
El . mount ( '*' ) Fügen Sie dieses Tag unten vor Ihren benutzerdefinierten Skripts und Deps hinzu und verweisen Sie auf window.El.
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >Installation über NPM
npm install el . js -- saveUnterstützt CommonJS
var El = require ' el.js 'oder ES6-Importe
import El from ' el.js 'Auf diesen Typ wird von El.Form verwiesen, um die Informationen zu speichern, die zur Validierung des mit name verknüpften Felds verwendet werden.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| config | MiddlewareFunction oder [ MiddlewareFunction ] | undefiniert | Dieser Typ speichert die ursprüngliche MiddlewareFunction oder die MiddlewareFunctions, die zum Erstellen von validate() verwendet wurden. |
| Name | Zeichenfolge | '' | Dies ist der Name eines Felds in der Dateneigenschaft von El.Form , auf das der Rest dieses Typs verweist. |
| ref | Referenzbaum | undefiniert | Dies ist ein Link zum veränderlichen Datenbaum, der den Wert von name durch Aufrufen von this.ref.get( name ) abrufen kann. |
| Name | Typ | Beschreibung |
|---|---|---|
| bestätigen | (Referenzbaum, Zeichenfolge) => Versprechen | Diese Methode ruft alle MiddlwareFunctions seriell mithilfe von Versprechen auf. |
Dieser Typ wird zum Definieren der Middleware für El.Form verwendet. Führen Sie eine Validierung und Eingabebereinigung mit diesen Funktionen durch, z. B.:
function isRequired ( value ) {
value = value . trim ( )
if ( value && value != '' ) {
return value
}
throw new Error ( 'Required' )
} Dieser Typ wird stellenweise intern verwendet, um die Rückgabe von Zusagen durch Verweis zu erleichtern.
Dies ist die Basisklasse für alle El-Klassen. Jede El.View entspricht einem benutzerdefinierten Tag. Erweitern Sie diese Klasse, um Ihre eigenen benutzerdefinierten Tags zu erstellen.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| CSS | Zeichenfolge | '' | Dies ist eine Zeichenfolge, die das CSS des Tags darstellt. Beim Mounten wird es einmal pro Klasse am unteren Rand des Tags eingefügt. |
| Daten | Referenzbaum | undefiniert | Diese Eigenschaft speichert den Status des Tags. |
| html | Zeichenfolge | '' | Dies ist eine Zeichenfolge, die den inneren HTML-Code des Tags darstellt. |
| Wurzel | HTMLElement | undefiniert | Diese Eigenschaft speichert einen Verweis auf das Tag auf Ihrer Webseite, an das die bereitgestellte Ansicht gebunden ist. |
| Etikett | Zeichenfolge | '' | Dies ist der benutzerdefinierte Tag-Name. |
| Name | Typ | Beschreibung |
|---|---|---|
| beforeInit | () => | Der Code hier wird ausgeführt, bevor das Tag initialisiert wird. |
| init | () => | Der Code hier wird ausgeführt, wenn das Tag initialisiert wird, aber bevor es gemountet wird. Empfohlen – Wenn Sie eine Bindung an den Lebenszyklus des Tags benötigen, tun Sie dies hier. |
| ZeitplanUpdate | () => Versprechen | Diese Methode plant einen asynchronen Aktualisierungsaufruf. Es stapelt Aktualisierungsaufrufe in der obersten Ansicht, wenn verschachtelte Ansichten vorhanden sind. Es gibt ein Versprechen für die Ausführung des Updates zurück |
| aktualisieren | () => | Diese Methode aktualisiert das Tag. Dies wird implizit nach Ereignissen aufgerufen, die von der Webseite ausgelöst werden. Für einen solchen Fall siehe onkeydown in „Ein einfaches Formularbeispiel“. Rufen Sie diese Methode manuell auf, um das Tag zu aktualisieren. Empfohlen – Es wird empfohlen, ScheduleUpdate() stattdessen manuell aufzurufen, um synchrone Aktualisierungskaskaden zu verhindern. |
Jeder El.View ist ein Ereignisemitter. Weitere Dokumentation finden Sie unter riot.observable, http://riotjs.com/api/observable/
| Name | Typ | Beschreibung |
|---|---|---|
| El.View.register | () => | Dadurch wird das aktuelle benutzerdefinierte Tag bei der Rendering-Engine registriert. Rufen Sie es auf, nachdem Sie ein Tag definiert haben |
Diese Klasse wird zur Darstellung von Formularen sowie komplexeren IO-gesteuerten Mikro-Apps verwendet. Diese Klasse stellt allgemeine Formularvalidierungs- und Formularübermittlungslogik bereit.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| Konfigurationen | Objekt | undefiniert | Stellen Sie einer MiddlewareFunction oder einem Array von MiddlewareFunctions eine Zuordnung von Namen bereit. Weitere Informationen finden Sie unter MiddlewareFunction . |
| Eingänge | Objekt | null | Jedes Element in configs wird in ein Element in inputs konvertiert. Es wird nicht empfohlen, dies direkt zu ändern. |
| Name | Typ | Beschreibung |
|---|---|---|
| init | () => | Der Code hier wird ausgeführt, wenn das Tag initialisiert wird, aber bevor es gemountet wird. Ruft initInputs() auf, also rufen Sie das manuell auf – oder rufen Sie super() in ES6 auf. Empfohlen – Wenn Sie eine Bindung an den Lebenszyklus des Tags benötigen, tun Sie dies hier. |
| initInputs | () => | Kompilieren Sie Konfigurationen und weisen Sie die ausgegebene Struktur den Eingaben zu. Eingaben wie Konfigurationen enthalten Verweise auf das benannte Feld in data . |
| einreichen | (Ereignis) => Versprechen | Diese Methode löst die Validierung für jedes Feld in den Daten aus, wie in configs definiert. Diese Methode sollte als Event-Handler/Listener aufgerufen werden. Es ruft „submit()“ auf, wenn die Validierung erfolgreich ist, und gibt ein Versprechen zurück, wenn die Validierung erfolgreich ist/fehlschlägt |
| _einreichen | () => | Der Code hier wird ausgeführt, wenn das Formular während des Submit() -Aufrufs validiert wird |
Dies ist die Basisklasse zum Erstellen von Formulareingaben und E/A-Steuerelementen.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| binden | Zeichenfolge | '' | Diese Eigenschaft bestimmt, an welches Feld in den Daten des übergeordneten Formulars die Bindung erfolgt. |
| Nachschlagen | Zeichenfolge | '' | Identisch mit bind , veraltet . |
| errorMessage | Zeichenfolge | '' | Diese Eigenschaft wird auf die erste Fehlermeldung gesetzt, die das zurückgegebene Versprechen von this.input.validate abfängt. |
| Eingang | Eingabetyp | null | Diese Eigenschaft wird aus der Eingabeeigenschaft des übergeordneten Formulars übernommen, basierend auf den Angaben in der Feldbindung der übergeordneten Daten . |
| gültig | bool | FALSCH | Diese Eigenschaft wird verwendet, um den Validierungsstatus der Eingabe zu bestimmen. Sie wird festgelegt, wenn this.input.validate aufgerufen wird. Sie wird immer nur auf true gesetzt, wenn das zurückgegebene Versprechen von this.input.validate vollständig ausgeführt wird. |
| Name | Typ | Beschreibung |
|---|---|---|
| ändern | (Ereignis) => | Diese Methode aktualisiert die Eingabe und validiert sie anschließend. Diese Methode sollte von einem Event-Handler/Listener aufgerufen werden. |
| geändert | () => | Diese Methode wird aufgerufen, wenn das zurückgegebene Versprechen von this.input.validate vollständig ausgeführt wird. |
| klarError | () => | Diese Methode setzt errorMessage auf '' und wird vor der Validierung aufgerufen. |
| Fehler | (Fehler) => | Diese Methode legt errorMessage fest und wird aufgerufen, wenn die Validierung fehlschlägt. |
| getValue | (Ereignis) => beliebig | Diese Methode ruft den Wert aus der Eingabe ab. Standardmäßig gibt diese Methode den target.value des Ereignisses zurück. |
| bestätigen | (PromiseReference?) => Versprechen | Diese Methode validiert die Eingabe und gibt ein Promise zurück, das den Erfolg und Misserfolg der Validierung sowohl anhand der Referenz (intern erforderlich) als auch anhand des Werts darstellt. |
| Name | Typ | Beschreibung |
|---|---|---|
| El.scheduleUpdate | () => | Planen Sie die Aktualisierung aller Mikro-Apps auf der Seite. |
Die Lebenszyklusfunktionen von el.js werden von Riot.js geerbt.
el.js verwendet referenzielle Bäume, um seine Formulardaten zu speichern.
Implementieren Sie die Methoden „get“, „set“, „on“, „once“, „off“ aus der Referenzumgebung in Ihrer eigenen Datenstruktur und fügen Sie sie als Dateneigenschaft ein.
Ein Container ist ein benutzerdefiniertes Tag, das Methoden zur Verwendung für seine interne Vorlage bereitstellt und dessen Inhalt vollständig überschrieben werden kann (enthält nur Inhalte in einem oder mehreren Tags). Ein Steuerelement ist eine Komponente, die mit dem Benutzer interagiert, um Informationen auf interessante Weise anzuzeigen oder Eingaben wie eine Eingabe, eine Auswahl oder eine GoogleMaps-Einbettung zu erhalten.
Anstatt Widgets eng gekoppelt zu erstellen, zerlegen Sie das Widget in Container und Steuerelemente, um die Wiederverwendbarkeit zu maximieren. Strukturieren Sie das interne HTML so, wie es am sinnvollsten ist. Geben Sie dann Ihr fertiges Widget, Ihren Container und Ihre Steuerelemente für Ihre Benutzer frei, damit diese das Widget an ihre verschiedenen Anforderungen anpassen können.
Indem Sie Ihre UI-Elemente auf diese Weise abstrahieren, ist es für jemand anderen viel einfacher, Ihren Code wiederzuverwenden und anzupassen. Eine Implementierung finden Sie unter shop.js.
Am besten verwenden Sie einen einzelnen High-Level-Statusspeicher, um das Speichern und Wiederherstellen des Status Ihrer Webseite oder gesamten Website zu vereinfachen.
Dies kann erreicht werden, indem allen Containern der obersten Ebene auf der Seite dasselbe Datenfeld bereitgestellt wird. über den ersten Mount-Aufruf
var data = {
state0 : 0 ,
state1 : 1 ,
}
El . mount ( '*' , { data : data } )Im Gegensatz zum normalen Riot-Rendering ermöglicht el.js den impliziten Zugriff auf Werte auf this.parent und this.parent...parent über prototypische Vererbung des Rendering-Kontexts. Dies geschieht, um zu vermeiden, dass dieselben Daten wiederholt durch verschachtelte Container weitergeleitet werden, da dies fehleranfällig und zu ausführlich ist. Dies erleichtert auch den Aufbau von Containern und Steuerelementen.
Explizite Übergabe der Datenvariablen:
< my-container-1 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value1 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value3 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )Entspricht dem impliziten Verweis auf die Datenvariable.
< my-container-1 >
< my-container-2 >
< my-container-3 >
value: { data.value1 }
</ my-container-3 >
< my-container-3 >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 >
< my-container-3 >
value: { data.value3 }
</ my-container-3 >
< my-container-3 >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) BSD
