Mithril.js 2 Dokumentation
Was ist Mithril.js?
Mithril.js ist ein modernes, clientseitiges JavaScript-Framework zur Entwicklung von Single-Page-Anwendungen (SPAs). Es zeichnet sich durch seine geringe Größe (8.9 KiB gzip), hohe Geschwindigkeit und integrierte Funktionen für Routing und XHR aus.
Downloadgröße
Mithril.js (8.9 KiB)Vue + Vue-Router + Vuex + fetch (40 KiB)React + React-Router + Redux + fetch (64 KiB)Angular (135 KiB)Performance
Mithril.js (6.4 ms)Vue (9.8 ms)React (12.1 ms)Angular (11.5 ms)Mithril.js wird von Unternehmen wie Vimeo und Nike sowie Open-Source-Projekten wie Lichess eingesetzt.
Wenn Sie ein erfahrener Entwickler sind und mehr über den Vergleich von Mithril.js mit anderen Frameworks erfahren möchten, lesen Sie die Seite Framework-Vergleich.
Mithril.js unterstützt IE11, Firefox ESR und die letzten beiden Versionen von Firefox, Edge, Safari und Chrome. Es sind keine Polyfills erforderlich.
Suchen Sie die v1-Dokumente? Klicken Sie hier.
Erste Schritte
Eine einfache Möglichkeit, Mithril.js kennenzulernen, ist die Einbindung über ein CDN und das Durcharbeiten des Tutorials. Es deckt den Großteil der API ab (einschließlich Routing und XHR) und ist in nur 10 Minuten erlernbar.
Erstellen wir eine HTML-Datei, um loszulegen:
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body;
// Ihr Code kommt hierher!
</script>
</body>Um es Ihnen noch einfacher zu machen, können Sie Mithril.js direkt hier ausprobieren. Dies ist ein Live-Playground mit bereits installiertem Mithril.js, der übrigens ebenfalls mit Mithril erstellt wurde.
var root = document.body;
// Dein Code hier
m.mount(root, {
view: function () {
return m('h1', 'Try me out');
},
});
Hallo Welt
Beginnen wir mit einem minimalen Beispiel: Lassen Sie uns etwas Text auf dem Bildschirm ausgeben. Kopieren Sie den folgenden Code in Ihre Datei (idealerweise tippen Sie ihn ab, um den Lerneffekt zu maximieren).
var root = document.body;
m.render(root, 'Hello world');Ändern wir nun den Text in etwas anderes. Fügen Sie diese Codezeile unter der vorherigen hinzu:
m.render(root, 'My first app');Wie Sie sehen, verwenden Sie denselben Code, um HTML zu erstellen und zu aktualisieren. Mithril.js findet automatisch den effizientesten Weg, den Text zu aktualisieren, anstatt ihn komplett neu zu erstellen.
Live-Beispiel
var root = document.body;
m.render(root, 'Hello World');
DOM-Elemente
Lassen Sie uns unseren Text in ein <h1>-Tag einfügen.
m.render(root, m('h1', 'My first app'));Die Funktion m() kann verwendet werden, um beliebige HTML-Strukturen zu beschreiben. Wenn Sie also dem <h1> eine Klasse hinzufügen möchten:
m('h1', { class: 'title' }, 'My first app');Wenn Sie mehrere Elemente benötigen:
[m('h1', { class: 'title' }, 'My first app'), m('button', 'A button')];Und so weiter:
m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]);Live-Beispiel
var root = document.body;
m.render(root, [
m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]),
]);
Hinweis: Wenn Sie die <html>-Syntax bevorzugen, können Sie sie über ein Babel-Plugin verwenden.
// HTML-Syntax über das JSX-Plugin von Babel
<main>
<h1 class="title">My first app</h1>
<button>A button</button>
</main>Komponenten
Eine Mithril.js-Komponente ist ein Objekt mit einer view-Funktion. Hier ist der obige Code als Komponente:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]);
},
};Um die Komponente zu aktivieren, verwenden wir m.mount.
m.mount(root, Hello);Wie zu erwarten, erzeugt dies folgendes Markup:
<main>
<h1 class="title">My first app</h1>
<button>A button</button>
</main>Die Funktion m.mount ähnelt m.render, aktiviert aber anstelle des einmaligen Renderns von HTML das automatische Neuzeichnungssystem von Mithril.js. Um zu verstehen, was das bedeutet, fügen wir einige Ereignisse hinzu:
var count = 0; // eine Variable hinzugefügt
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
// die nächste Zeile geändert
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' clicks'
),
]);
},
};
m.mount(root, Hello);Wir haben ein onclick-Ereignis auf der Schaltfläche definiert, das eine Variable count inkrementiert (die oben deklariert wurde). Wir rendern jetzt auch den Wert dieser Variablen in der Schaltflächenbeschriftung.
Sie können nun die Beschriftung der Schaltfläche aktualisieren, indem Sie auf die Schaltfläche klicken. Da wir m.mount verwendet haben, müssen Sie m.render nicht manuell aufrufen, um die Änderungen in der Variablen count auf das HTML anzuwenden. Mithril.js erledigt dies für Sie.
Wenn Sie sich über die Leistung wundern, stellt sich heraus, dass Mithril.js sehr schnell beim Rendern von Aktualisierungen ist, da es nur die Teile des DOM berührt, die es unbedingt benötigt. In unserem obigen Beispiel ist der Text in der Schaltfläche der einzige Teil des DOM, den Mithril.js tatsächlich aktualisiert, wenn Sie auf die Schaltfläche klicken.
Live-Beispiel
var root = document.body;
var count = 0; // eine Variable hinzugefügt
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'My first app'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' clicks'
),
]);
},
};
m.mount(root, Hello);
Routing
Routing beschreibt den Übergang zwischen verschiedenen Ansichten innerhalb einer Anwendung.
Fügen wir eine Begrüßungsseite hinzu, die vor unserem Klick-Counter angezeigt wird. Zuerst erstellen wir eine Komponente dafür:
var Splash = {
view: function () {
return m('a', { href: '#!/hello' }, 'Enter!');
},
};Wie Sie sehen, rendert diese Komponente einfach einen Link zu #!/hello. Der #!-Teil wird als Hashbang bezeichnet und ist eine gängige Konvention, die in Single-Page-Anwendungen verwendet wird, um anzugeben, dass das, was danach kommt (der /hello-Teil), ein Routenpfad ist.
Da wir nun mehr als einen Bildschirm haben werden, verwenden wir m.route anstelle von m.mount.
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});Die Funktion m.route verfügt weiterhin über dieselbe automatische Neuzeichnungsfunktionalität wie m.mount und ermöglicht auch die URL-Erkennung. Mit anderen Worten, sie teilt Mithril.js mit, was zu tun ist, wenn ein #! in der URL gefunden wird.
Das "/splash" direkt nach root bedeutet, dass dies die Standardroute ist, d. h. wenn der Hashbang in der URL nicht auf eine der definierten Routen verweist (/splash und /hello in unserem Fall), leitet Mithril.js zur Standardroute um. Wenn Sie die Seite also in einem Browser öffnen und Ihre URL https://localhost lautet, werden Sie zu https://localhost/#!/splash umgeleitet.
Wie Sie erwarten würden, gelangen Sie durch Klicken auf den Link auf der Startseite zum Klick-Counter-Bildschirm, den wir zuvor erstellt haben. Beachten Sie, dass Ihre URL jetzt auf https://localhost/#!/hello verweist. Sie können mit den Zurück- und Weiter-Schaltflächen des Browsers zur Startseite zurückkehren.
Live-Beispiel
var root = document.body;
var count = 0;
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'My first app'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' clicks'
),
]);
},
};
var Splash = {
view: function () {
return m(
'a',
{
href: '#!/hello',
},
'Enter!'
);
},
};
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});
XHR
Grundsätzlich ist XHR nur eine Möglichkeit, mit einem Server zu kommunizieren.
Ändern wir unseren Klick-Counter, um Daten auf einem Server zu speichern. Für den Server verwenden wir REM, eine Mock-REST-API, die für Spielzeug-Apps wie dieses Tutorial entwickelt wurde.
Zuerst erstellen wir eine Funktion, die m.request aufruft. Die url gibt einen Endpunkt an, der eine Ressource darstellt. Die method spezifiziert die Art der Operation (typischerweise die PUT-Methode für Upserts). body ist die Nutzlast, die wir an den Endpunkt senden, und withCredentials aktiviert Cookies (eine Voraussetzung für die REM-API).
var count = 0;
var increment = function () {
m.request({
method: 'PUT',
url: '//mithril-rem.fly.dev/api/tutorial/1',
body: { count: count + 1 },
withCredentials: true,
}).then(function (data) {
count = parseInt(data.count);
});
};Durch Aufrufen der Inkrementfunktion wird ein Objekt {count: 1} zum Endpunkt /api/tutorial/1 Upsert . Dieser Endpunkt gibt ein Objekt mit demselben count-Wert zurück, der an ihn gesendet wurde. Beachten Sie, dass die Variable count erst aktualisiert wird, nachdem die Anfrage abgeschlossen ist, und sie wird jetzt mit dem Antwortwert vom Server aktualisiert.
Ersetzen wir den Ereignisbehandler in der Komponente, um die Funktion increment aufzurufen, anstatt die Variable count direkt zu inkrementieren:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', { onclick: increment }, count + ' clicks'),
]);
},
};Ein Klick auf die Schaltfläche sollte nun den Zähler aktualisieren.
Live-Beispiel
var root = document.body;
var count = 0;
var increment = function () {
m.request({
method: 'PUT',
url: '//mithril-rem.fly.dev/api/tutorial/1',
body: { count: count + 1 },
withCredentials: true,
}).then(function (data) {
count = parseInt(data.count);
});
};
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'My first app'
),
m(
'button',
{
onclick: increment,
},
count + ' clicks'
),
]);
},
};
m.mount(root, Hello);
Wir haben behandelt, wie man HTML erstellt und aktualisiert, Komponenten erstellt, Routen für eine Single-Page-Anwendung definiert und über XHR mit einem Server interagiert.
Nachdem Sie sich mit den Grundlagen der Mithril.js-API vertraut gemacht haben, sollten Sie sich unbedingt das einfache Anwendungs-Tutorial ansehen. Dieses Tutorial führt Sie durch den Aufbau einer realistischen Anwendung.