Mithril.js 2 文件說明

什麼是 Mithril.js？

Mithril.js 是一個現代的客戶端 JavaScript 框架，用於構建單頁應用程式 (Single Page Applications，SPA)。它體積小巧 (gzip 壓縮後為 8.9 KiB)、速度快，並提供即時可用的路由和 XHR 工具。

下載體積

Mithril.js (8.9 KiB)

Vue + Vue-Router + Vuex + fetch (40 KiB)

React + React-Router + Redux + fetch (64 KiB)

Angular (135 KiB)

效能

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js 被 Vimeo 和 Nike 等公司以及 Lichess 等開源平台使用。

如果您是一位經驗豐富的開發者，並且想了解 Mithril.js 與其他框架的比較，請參閱框架比較頁面。

Mithril.js 支援 IE11、Firefox ESR 以及最新兩個版本的 Firefox、Edge、Safari 和 Chrome。無需額外的 polyfill。

正在尋找 v1 文件嗎？按一下這裡。

開始使用

嘗試 Mithril.js 的一個簡單方法是從 CDN 導入它，然後按照本教程進行操作。它將涵蓋大部分 API 介面 (包括路由和 XHR)，但只需要 10 分鐘。

讓我們建立一個 HTML 檔案來一起學習：

html

<body>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
  <script>
    var root = document.body;

    // 您的程式碼寫在這裡！
  </script>
</body>

為了簡化流程，您可以直接在此處試用 Mithril.js。這是一個已預載入 Mithril.js 的即時遊樂場 - 順帶一提 - 它也是用 Mithril 構建的。

var root = document.body;

// 你的程式碼寫在這裡

m.mount(root, {
  view: function () {
    return m('h1', 'Try me out');
  },
});

按一下這裡在 flems.io 上打開範例

Hello world

讓我們從盡可能小的範例開始：在螢幕上渲染一些文字。將下面的程式碼複製到您的檔案中（這裡的複製是指將它手動輸入 - 您會學得更好）

javascript

var root = document.body;

m.render(root, 'Hello world');

現在，讓我們將文字變更為其他內容。在上一行程式碼下新增此行程式碼：

javascript

m.render(root, 'My first app');

如您所見，您可以使用相同的程式碼來創建和更新 HTML。 Mithril.js 會自動找出更新文字的最有效方法，而不是盲目地從頭開始重新建立。

即時範例

var root = document.body;

m.render(root, 'Hello World');

DOM 元素

讓我們將文字包裝在 <h1> 標籤裡。

javascript

m.render(root, m('h1', 'My first app'));

m() 函數可用來描述您想要的任何 HTML 結構。因此，如果您需要向 <h1> 新增一個 class：

javascript

m('h1', { class: 'title' }, 'My first app');

如果您想要添加多個元素：

javascript

[m('h1', { class: 'title' }, 'My first app'), m('button', 'A button')];

等等其他：

javascript

m('main', [
  m('h1', { class: 'title' }, 'My first app'),
  m('button', 'A button'),
]);

即時範例

var root = document.body;

m.render(root, [
  m('main', [
    m('h1', { class: 'title' }, 'My first app'),
    m('button', 'A button'),
  ]),
]);

注意：如果您喜歡使用 <html> 語法，可以透過 Babel 外掛程式使用它。

jsx

// 透過 Babel 的 JSX 外掛程式使用 HTML 語法
<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

元件

Mithril.js 元件只是一個擁有 view 函數的物件。以下是上面的程式碼作為一個元件：

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      m('button', 'A button'),
    ]);
  },
};

要啟動元件，我們使用 m.mount。

javascript

m.mount(root, Hello);

正如您所預期的，這樣做會生成以下標籤：

html

<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

m.mount 函數與 m.render 類似，但它不是只渲染一次 HTML，而是啟動 Mithril.js 的自動重繪機制。為了理解這意味著什麼，讓我們添加一些事件：

javascript

var count = 0; // 新增一個變數

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);

我們在按鈕上定義了一個 onclick 事件處理器，該事件會遞增一個變數 count（該變數已在頂部宣告）。我們現在還在按鈕標籤中渲染該變數的值。

您現在可以透過按一下按鈕來更新按鈕的標籤。由於我們使用了 m.mount，因此您無需手動呼叫 m.render 即可將 count 變數中的變更應用於 HTML； Mithril.js 會為您執行此操作。

如果您對效能感到好奇，事實證明 Mithril.js 在渲染更新方面非常快，因為它只會觸及絕對需要的 DOM 部分。因此，在上述範例中，當您按一下按鈕時，其中的文字是 Mithril.js 實際更新的 DOM 的唯一部分。

即時範例

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'
      ),
    ]);
  },
};

m.mount(root, Hello);

路由

路由是指在擁有多個螢幕的應用程式中，從一個螢幕切換到另一個螢幕。

讓我們添加一個啟動畫面，該頁面會出現在我們的點擊計數器之前。首先，我們為其建立一個元件：

javascript

var Splash = {
  view: function () {
    return m('a', { href: '#!/hello' }, 'Enter!');
  },
};

如您所見，這個元件僅渲染一個指向 #!/hello 的連結。 #! 部分稱為 hashbang (井號加驚嘆號)，它是單頁應用程式中使用的常見慣例，用於指示其後面的內容 (/hello 部分) 是路由路徑。

現在我們將有多個螢幕，因此我們使用 m.route 而不是 m.mount。

javascript

m.route(root, '/splash', {
  '/splash': Splash,
  '/hello': Hello,
});

m.route 函數仍然具有與 m.mount 相同的自動重繪功能，並且它還啟用了 URL 感知；換句話說，它讓 Mithril.js 知道當它在 URL 中看到 #! 時該怎麼做。

這是預設路由，當 URL 中的 hashbang 沒有指向已定義的路由之一時（在我們的例子中為 /splash 和 /hello），則 Mithril.js 會重新導向到預設路由。因此，如果您在瀏覽器中打開頁面並且您的 URL 是 https://localhost，那麼您將被重新導向到 https://localhost/#!/splash。

此外，正如您所預期的，按一下啟動畫面上的連結會將您帶到之前建立的點擊計數器螢幕。請注意，現在您的 URL 會指向 https://localhost/#!/hello。您可以使用瀏覽器的後退和前進按鈕來回導覽到啟動頁面。

即時範例

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

基本上，XHR 是一種與伺服器通訊的方式。

我們將使用 REM 作為伺服器，這是一個模擬 REST API，專為像本教程這樣的示範應用程式而設計。

首先，我們建立一個呼叫 m.request 的函數。 url 指定一個表示資源的端點，method 指定我們採取的動作類型 (通常 PUT 方法 upserts)，body 是我們傳送到端點的傳輸資料，而 withCredentials 表示啟用 cookie (REM API 運作的要求)。

javascript

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);
  });
};

呼叫 increment 函數會將物件 {count: 1} 進行 upsert 到 /api/tutorial/1 端點。此端點會傳回一個物件，其 count 值與傳送給它的值相同。請注意，count 變數僅在請求完成後才會被更新，並且現在會使用來自伺服器的回應值進行更新。

讓我們替換元件中的事件處理程序，以呼叫 increment 函數，而不是直接遞增 count 變數：

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      m('button', { onclick: increment }, count + ' clicks'),
    ]);
  },
};

現在按一下按鈕應該會更新計數值。

即時範例

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);

我們介紹了如何建立和更新 HTML、如何建立元件、單頁應用程式的路由，以及如何透過 XHR 與伺服器互動。

這應該足以讓您開始編寫真實應用程式的前端。現在您已經熟悉 Mithril.js API 的基礎知識，請務必查看簡單應用程式教程，它將引導您完成構建實際應用程式的過程。

Mithril.js 2 文件說明 ​

什麼是 Mithril.js？ ​

下載體積

效能

開始使用 ​

Hello world ​

即時範例 ​

DOM 元素 ​

即時範例 ​

元件 ​

即時範例 ​

路由 ​

即時範例 ​

XHR ​

即時範例 ​

Mithril.js 2 文件說明

什麼是 Mithril.js？

開始使用

Hello world

即時範例

DOM 元素

即時範例

元件

即時範例

路由

即時範例

XHR

即時範例