Dokumentacja Mithril.js 2
Czym jest Mithril.js?
Mithril.js to nowoczesny framework JavaScript po stronie klienta, przeznaczony do budowania aplikacji jednostronicowych (SPA). Jest lekki (8.9 KiB gzip), szybki i oferuje wbudowane narzędzia do routingu oraz obsługi zapytań XHR.
Rozmiar pobierania
Mithril.js (8.9 KiB)Vue + Vue-Router + Vuex + fetch (40 KiB)React + React-Router + Redux + fetch (64 KiB)Angular (135 KiB)Wydajność
Mithril.js (6.4 ms)Vue (9.8 ms)React (12.1 ms)Angular (11.5 ms)Mithril.js jest wykorzystywany przez firmy takie jak Vimeo i Nike, a także przez platformy open source, takie jak Lichess.
Jeśli jesteś doświadczonym programistą i chcesz dowiedzieć się, jak Mithril.js wypada na tle innych frameworków, zapoznaj się ze stroną porównanie frameworków.
Mithril.js obsługuje przeglądarki IE11, Firefox ESR oraz dwie najnowsze wersje przeglądarek Firefox, Edge, Safari i Chrome. Nie wymaga stosowania żadnych polyfilli.
Szukasz dokumentacji v1? Kliknij tutaj.
Pierwsze kroki
Najprostszym sposobem na wypróbowanie Mithril.js jest dołączenie go z CDN i wykonanie tego samouczka. Obejmuje on większość funkcjonalności API (w tym routing i XHR) i zajmie tylko około 10 minut.
Utwórz plik HTML, aby móc wykonywać kolejne kroki:
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body;
// Twój kod tutaj!
</script>
</body>Dla ułatwienia możesz wypróbować Mithril.js w interaktywnym środowisku testowym z preinstalowaną biblioteką Mithril.js, które nota bene również zostało zbudowane w Mithril.
var root = document.body;
// Twój kod tutaj
m.mount(root, {
view: function () {
return m('h1', 'Wypróbuj mnie');
},
});
Hello world
Zacznijmy od prostego przykładu: wyświetlmy tekst na ekranie. Skopiuj poniższy kod do swojego pliku (a dokładniej, przepisz go - lepiej się nauczysz):
var root = document.body;
m.render(root, 'Hello world');Teraz zmieńmy tekst na coś innego. Dodaj tę linię kodu pod poprzednią:
m.render(root, 'Moja pierwsza aplikacja');Jak widzisz, używasz tego samego kodu do tworzenia i aktualizowania HTML. Mithril.js automatycznie określa najbardziej efektywny sposób aktualizacji tekstu, zamiast bezmyślnie go odtwarzać od nowa.
Przykład na żywo
var root = document.body;
m.render(root, 'Hello World');
Elementy DOM
Umieśćmy nasz tekst w znaczniku <h1>.
m.render(root, m('h1', 'Moja pierwsza aplikacja'));Funkcja m() służy do opisywania dowolnej struktury HTML. Jeśli chcesz dodać klasę do <h1>:
m('h1', { class: 'title' }, 'Moja pierwsza aplikacja');Jeśli chcesz wyświetlić wiele elementów:
[m('h1', { class: 'title' }, 'Moja pierwsza aplikacja'), m('button', 'Przycisk')];I tak dalej:
m('main', [
m('h1', { class: 'title' }, 'Moja pierwsza aplikacja'),
m('button', 'Przycisk'),
]);Przykład na żywo
var root = document.body;
m.render(root, [
m('main', [
m('h1', { class: 'title' }, 'Moja pierwsza aplikacja'),
m('button', 'Przycisk'),
]),
]);
Uwaga: Jeśli preferujesz składnię <html>, możesz jej używać za pomocą wtyczki Babel.
// Składnia HTML za pomocą wtyczki JSX Babel
<main>
<h1 class="title">Moja pierwsza aplikacja</h1>
<button>Przycisk</button>
</main>Komponenty
Komponent w Mithril.js to po prostu obiekt z funkcją view. Oto powyższy kod przedstawiony jako komponent:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'Moja pierwsza aplikacja'),
m('button', 'Przycisk'),
]);
},
};Aby aktywować komponent, używamy funkcji m.mount.
m.mount(root, Hello);Jak można się spodziewać, powyższy kod generuje następujący znacznik HTML:
<main>
<h1 class="title">Moja pierwsza aplikacja</h1>
<button>Przycisk</button>
</main>Funkcja m.mount jest podobna do m.render, ale zamiast renderować HTML tylko raz, aktywuje system automatycznego odświeżania Mithril.js. Aby zrozumieć, co to oznacza, dodajmy obsługę zdarzeń:
var count = 0; // dodano zmienną
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'Moja pierwsza aplikacja'),
// zmieniono następną linię
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' kliknięć'
),
]);
},
};
m.mount(root, Hello);Zdefiniowaliśmy zdarzenie onclick dla przycisku, które zwiększa wartość zmiennej count zadeklarowanej na początku. Następnie renderujemy wartość tej zmiennej w etykiecie przycisku.
Możesz teraz aktualizować etykietę przycisku, klikając go. Ponieważ użyliśmy m.mount, nie musisz ręcznie wywoływać m.render, aby zmiany w zmiennej count zostały odzwierciedlone w HTML; Mithril.js robi to automatycznie.
Jeśli zastanawiasz się nad wydajnością, Mithril.js bardzo szybko renderuje aktualizacje, ponieważ modyfikuje tylko te części DOM, które są absolutnie konieczne. W naszym przykładzie, gdy klikniesz przycisk, tekst w nim jest jedyną częścią DOM, którą Mithril.js faktycznie aktualizuje.
Przykład na żywo
var root = document.body;
var count = 0; // dodano zmienną
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'Moja pierwsza aplikacja'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' kliknięć'
),
]);
},
};
m.mount(root, Hello);
Routing
Routing to mechanizm przechodzenia między różnymi ekranami w aplikacji, która posiada ich wiele.
Dodajmy stronę powitalną, która będzie wyświetlana przed naszym licznikiem kliknięć. Najpierw tworzymy dla niej komponent:
var Splash = {
view: function () {
return m('a', { href: '#!/hello' }, 'Wejdź!');
},
};Jak widzisz, ten komponent renderuje link do #!/hello. Część #! jest znana jako hashbang i jest powszechnie używana w aplikacjach SPA do oznaczania ścieżki routingu (np. /hello).
Teraz, gdy mamy więcej niż jeden ekran, użyjemy funkcji m.route zamiast m.mount.
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});Funkcja m.route ma tę samą funkcjonalność automatycznego odświeżania co m.mount i dodatkowo włącza obsługę adresów URL; innymi słowy, informuje Mithril.js, co ma robić, gdy zobaczy #! w adresie URL.
Argument "/splash" umieszczony zaraz po root oznacza, że jest to domyślna trasa. Jeśli hashbang w adresie URL nie wskazuje na żadną ze zdefiniowanych tras (/splash i /hello w naszym przypadku), Mithril.js przekieruje do trasy domyślnej. Zatem, jeśli otworzysz stronę w przeglądarce pod adresem https://localhost, nastąpi przekierowanie do https://localhost/#!/splash.
Ponadto, jak można się spodziewać, kliknięcie linku na stronie powitalnej przenosi Cię do ekranu licznika kliknięć, który stworzyliśmy wcześniej. Zauważ, że teraz Twój adres URL będzie wskazywał na https://localhost/#!/hello. Możesz nawigować tam i z powrotem do strony powitalnej za pomocą przycisków "wstecz" i "dalej" w przeglądarce.
Przykład na żywo
var root = document.body;
var count = 0;
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'Moja pierwsza aplikacja'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' kliknięć'
),
]);
},
};
var Splash = {
view: function () {
return m(
'a',
{
href: '#!/hello',
},
'Wejdź!'
);
},
};
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});
XHR
XHR to zasadniczo sposób komunikacji z serwerem.
Zmodyfikujmy nasz licznik kliknięć, aby zapisywał dane na serwerze. Jako serwer wykorzystamy REM, atrapę API REST zaprojektowaną dla przykładowych aplikacji, takich jak ten samouczek.
Najpierw tworzymy funkcję wywołującą m.request. Argument url określa punkt końcowy reprezentujący zasób, method określa typ wykonywanej akcji (zazwyczaj metoda PUT aktualizuje lub wstawia dane - upsert), body to ładunek, który wysyłamy do punktu końcowego, a withCredentials włącza obsługę plików cookie (wymagane przez API REM).
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);
});
};Wywołanie funkcji increment wykonuje operację upsert obiektu {count: 1} do punktu końcowego /api/tutorial/1. Ten punkt końcowy zwraca obiekt z tą samą wartością count, która została do niego wysłana. Zauważ, że zmienna count jest aktualizowana dopiero po zakończeniu żądania, a jej wartość pochodzi z odpowiedzi serwera.
Zamiast bezpośrednio zwiększać zmienną count, zmodyfikujmy obsługę zdarzeń w komponencie, aby wywoływała funkcję increment:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'Moja pierwsza aplikacja'),
m('button', { onclick: increment }, count + ' kliknięć'),
]);
},
};Po kliknięciu przycisku licznik powinien się zaktualizować.
Przykład na żywo
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',
},
'Moja pierwsza aplikacja'
),
m(
'button',
{
onclick: increment,
},
count + ' kliknięć'
),
]);
},
};
m.mount(root, Hello);
Omówiliśmy, jak tworzyć i aktualizować HTML, jak tworzyć komponenty, jak zaimplementować routing w aplikacji jednostronicowej oraz jak komunikować się z serwerem za pośrednictwem XHR.
To powinno wystarczyć, aby rozpocząć tworzenie frontendu dla prawdziwej aplikacji. Teraz, gdy znasz już podstawy API Mithril.js, zapoznaj się z samouczkiem dotyczącym prostej aplikacji, który krok po kroku pokazuje, jak zbudować realistyczną aplikację.