是時候使用 Mithril.js 了

Mithril.js 是一個客戶端的 JavaScript MVC 框架。

隨著 Flarum 也使用了 Mithril，這個小框架在 github 上的 star 數量也已經突破了 4K。

Mithril 是什么？

Mithril 是一個客戶端 javascript MVC 框架，即它是一個工具，使應用程序代碼分為數據層(Model)， UI 層(View)，黏合層(Controller)。

Mithril 通過 gzip 壓縮后，僅有 12kb 左右，這要歸功于 small, focused, API。它提供了一個模板引擎與一個虛擬 DOM diff 實現高性能渲染，還提供了其它高級工具，以及支持路由和組件化。

框架的目標是使應用程序代碼更容易組織，可讀和可維護，幫助你成為一個更好的開發者。

不像某些框架，Mithril 努力避免將您鎖定到某個 web 框架上：您可以盡量少地使用您所需要的框架。

然而，使用其整個工具庫可以帶來很多好處：學習使用函數式編程和鞏固良好的編碼實踐，OOP 和 MVC 只是其中的一些。

特點

輕量級

• gzip壓縮后僅僅12kb，無依賴
• 非常少的API，非常容易的學習曲線

魯棒性

• 默認安全的模板
• 層次化的MVC組件（hierarchical）

快速

• 虛擬DOM和編譯模板
• 智能的重繪系統（redrawing）

入門示例代碼

//model 模型
var Page = {
  list: function() {
    return m.request({method: "GET", url: "pages.json"});
  }
};
var Demo = {
  //controller 控制器
  controller: function() {
    var pages = Page.list();
    return {
      pages: pages,
      rotate: function() {
        pages().push(pages().shift());
      }
    }
  },
  //view 視圖
  view: function(ctrl) {
    return m("div", [
      ctrl.pages().map(function(page) {
        return m("a", {href: page.url}, page.title);
      }),
      m("button", {onclick: ctrl.rotate}, "Rotate links")
    ]);
  }
};
//initialize 初始化
m.mount(document.getElementById("example"), Demo);

性能

mithrils.js 性能

參考

• Mithrils.js 中文文檔