Mithril.js 2 dokumentációja
Mi az a Mithril.js?
A Mithril.js egy modern, kliensoldali JavaScript keretrendszer egyoldalas alkalmazások (Single Page Applications, SPA) építéséhez. Kicsi (8.9 KiB gzip), gyors, és azonnal kínál útválasztási (routing) és XHR segédeszközöket.
Letöltött méret
Mithril.js (8.9 KiB)Vue + Vue-Router + Vuex + fetch (40 KiB)React + React-Router + Redux + fetch (64 KiB)Angular (135 KiB)Teljesítmény
Mithril.js (6.4 ms)Vue (9.8 ms)React (12.1 ms)Angular (11.5 ms)A Mithril.js-t olyan cégek használják, mint a Vimeo és a Nike, valamint olyan nyílt forráskódú platformok, mint a Lichess.
Ha tapasztalt fejlesztő vagy, és szeretnéd tudni, hogyan viszonyul a Mithril.js más keretrendszerekhez, nézd meg a keretrendszerek összehasonlítása oldalt.
A Mithril.js támogatja az IE11-et, a Firefox ESR-t, valamint a Firefox, az Edge, a Safari és a Chrome legutóbbi két verzióját. Nincs szükség polyfill-ekre.
A v1 dokumentációját keresed? Kattints ide.
Első lépések
A Mithril.js kipróbálásának egyik egyszerű módja, ha egy CDN-ről (Content Delivery Network, tartalomszolgáltató hálózat) illeszted be, és követed ezt az oktatóanyagot. Ez lefedi az API felületének nagy részét (beleértve a routingot és az XHR-t is), de csak 10 percet vesz igénybe.
Hozzunk létre egy HTML fájlt a követéshez:
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body;
// ide kerül a kódod!
</script>
</body>Az egyszerűség kedvéért kipróbálhatod a Mithril.js-t közvetlenül itt. Ez egy interaktív környezet előre betöltött Mithril.js-sel, ami – mellesleg – szintén Mithrilben készült.
var root = document.body;
// Ide a kódod
m.mount(root, {
view: function () {
return m('h1', 'Próbáld ki');
},
});
Hello world
Kezdjük a lehető legkisebbel: jelenítsünk meg egy kis szöveget a képernyőn. Másold be az alábbi kódot a fájlba (és másolás helyett inkább írd be - jobban fogsz tanulni):
var root = document.body;
m.render(root, 'Hello world');Most változtassuk meg a szöveget egy másikra. Add hozzá ezt a kódsort az előző alá:
m.render(root, 'Az első alkalmazásom');Mint láthatod, ugyanazt a kódot használod a HTML létrehozásához és frissítéséhez. A Mithril.js automatikusan kitalálja a szöveg frissítésének leghatékonyabb módját, ahelyett, hogy vakon újra létrehozná az egészet.
Élő példa
var root = document.body;
m.render(root, 'Hello World');
DOM elemek
Csomagoljuk a szövegünket egy <h1> címkébe.
m.render(root, m('h1', 'Az első alkalmazásom'));Az m() függvény bármilyen HTML struktúra leírására használható. Tehát ha hozzá kell adnod egy osztályt a <h1>-hez:
m('h1', { class: 'title' }, 'Az első alkalmazásom');Ha több elemet szeretnél:
[m('h1', { class: 'title' }, 'Az első alkalmazásom'), m('button', 'Egy gomb')];És így tovább:
m('main', [
m('h1', { class: 'title' }, 'Az első alkalmazásom'),
m('button', 'Egy gomb'),
]);Élő példa
var root = document.body;
m.render(root, [
m('main', [
m('h1', { class: 'title' }, 'Az első alkalmazásom'),
m('button', 'Egy gomb'),
]),
]);
Megjegyzés: Ha jobban szereted a <html> szintaxist, lehetséges használni egy Babel plugin-en keresztül.
// HTML szintaxis a Babel JSX plugin-en keresztül
<main>
<h1 class="title">Az első alkalmazásom</h1>
<button>Egy gomb</button>
</main>Komponensek
A Mithril.js komponens egy objektum, ami egy view (nézet) függvénnyel rendelkezik. Íme a fenti kód komponens formájában:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'Az első alkalmazásom'),
m('button', 'Egy gomb'),
]);
},
};A komponens aktiválásához használjuk az m.mount-ot.
m.mount(root, Hello);Ahogy az várható, ez a következő jelölésstruktúrát hozza létre:
<main>
<h1 class="title">Az első alkalmazásom</h1>
<button>Egy gomb</button>
</main>Az m.mount függvény hasonló az m.render-hez, de ahelyett, hogy csak egyszer renderelne HTML-t, aktiválja a Mithril.js automatikus újrarajzoló rendszerét. Hogy megértsük, mit jelent ez, adjunk hozzá néhány eseményt:
var count = 0; // hozzáadtunk egy változót
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'Az első alkalmazásom'),
// megváltoztattuk a következő sort
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' kattintás'
),
]);
},
};
m.mount(root, Hello);Definiáltunk egy onclick eseményt a gombon, amely növeli a count változót (amelyet felül deklaráltunk). Most a gomb címkéjében is rendereljük a változó értékét.
Mostantól frissítheted a gomb címkéjét a gombra kattintva. Mivel az m.mount-ot használtuk, nem kell manuálisan meghívnod az m.render-t a count változó változásainak alkalmazásához a HTML-ben; a Mithril.js megteszi helyetted.
Ha a teljesítményre vagy kíváncsi, a Mithril.js nagyon gyors a frissítések renderelésében, mert csak azokat a részeket érinti a DOM-ban, amelyekre feltétlenül szüksége van. Tehát a fenti példánkban, amikor a gombra kattintasz, a benne lévő szöveg az egyetlen része a DOM-nak, amelyet a Mithril.js ténylegesen frissít.
Élő példa
var root = document.body;
var count = 0; // hozzáadtunk egy változót
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'Az első alkalmazásom'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' kattintás'
),
]);
},
};
m.mount(root, Hello);
Routing (útválasztás)
Az útválasztás (routing) egyszerűen azt jelenti, hogy egy alkalmazásban egyik képernyőről a másikra lépünk, ha több képernyő van.
Adjunk hozzá egy bevezető oldalt, amely a kattintásszámláló előtt jelenik meg. Először hozzunk létre egy komponenst hozzá:
var Splash = {
view: function () {
return m('a', { href: '#!/hello' }, 'Belépés!');
},
};Mint láthatod, ez a komponens egyszerűen egy linket renderel a #!/hello-ra. A #! részt hashbang-nek nevezik, és ez egy általános konvenció az egyoldalas alkalmazásokban (Single Page Applications) annak jelzésére, hogy az utána következő dolog (a /hello rész) egy útvonal.
Most, hogy egynél több képernyőnk lesz, az m.mount helyett az m.route-ot használjuk.
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});Az m.route függvény továbbra is rendelkezik ugyanazzal az automatikus újrarajzolási funkcióval, mint az m.mount, és lehetővé teszi az URL-tudatosságot is; más szóval, a Mithril.js tudja, mit kell tennie, amikor egy #!-et lát az URL-ben.
A "/splash" közvetlenül a root után azt jelenti, hogy ez az alapértelmezett útvonal. Azaz, ha az URL-ben lévő hashbang nem mutat a definiált útvonalak egyikére (/splash és /hello a mi esetünkben), akkor a Mithril.js átirányít az alapértelmezett útvonalra. Tehát ha megnyitod az oldalt egy böngészőben, és az URL-ed https://localhost, akkor átirányít a https://localhost/#!/splash-ra.
És ahogy az várható, a bevezető oldalon lévő linkre kattintva a korábban létrehozott kattintásszámláló képernyőre jutsz. Vedd észre, hogy most az URL-ed a https://localhost/#!/hello-ra fog mutatni. A böngésző vissza és előre gombjával navigálhatsz a bevezető oldalra és vissza.
Élő példa
var root = document.body;
var count = 0;
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'Az első alkalmazásom'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' kattintás'
),
]);
},
};
var Splash = {
view: function () {
return m(
'a',
{
href: '#!/hello',
},
'Belépés!'
);
},
};
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});
XHR
Az XHR alapvetően csak egy módja a szerverrel való kommunikációnak.
Változtassuk meg a kattintásszámlálónkat, hogy adatokat mentsen egy szerverre. A szerverhez a REM szolgáltatást fogjuk használni, ami egy mock (szimulált) REST API, és olyan játékalkalmazásokhoz tervezték, mint ez az oktatóanyag.
Először hozzunk létre egy függvényt, amely meghívja az m.request-et. Az url egy erőforrást képviselő végpontot ad meg, a method a végrehajtott művelet típusát adja meg (általában a PUT metódus upsert műveletet végez), a body a végpontnak küldött hasznos adat, a withCredentials pedig azt jelenti, hogy engedélyezzük a cookie-kat (a REM API működéséhez szükséges követelmény).
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);
});
};Az increment függvény meghívása egy {count: 1} objektumot upsertel a /api/tutorial/1 végpontra. Ez a végpont egy objektumot ad vissza ugyanazzal a count értékkel, amelyet elküldtek neki. Vedd észre, hogy a count változó csak a kérés befejezése után frissül, és most a szerver válaszértékével frissül.
Cseréljük le az eseménykezelőt a komponensben, hogy közvetlenül a count változó növelése helyett az increment függvényt hívja meg:
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'Az első alkalmazásom'),
m('button', { onclick: increment }, count + ' kattintás'),
]);
},
};A gombra kattintva most frissíteni kell a számlálót.
Élő példa
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',
},
'Az első alkalmazásom'
),
m(
'button',
{
onclick: increment,
},
count + ' kattintás'
),
]);
},
};
m.mount(root, Hello);
Lefedtük a HTML létrehozásának és frissítésének módját, a komponensek létrehozásának módját, az egyoldalas alkalmazások (Single Page Application) útválasztását, és a szerverrel való interakciót XHR-en keresztül.
Ennek elegendőnek kell lennie ahhoz, hogy elkezdj egy valódi alkalmazás frontendjét írni. Most, hogy már kényelmesen használod a Mithril.js API alapjait, feltétlenül nézd meg az egyszerű alkalmazás oktatóanyagot, amely végigvezet egy valós alkalmazás felépítésén.