Mithril.js 是一个客户端的 JavaScript MVC 框架。

随着 [Flarum][1] 也使用了 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 中文文档][3]

[1]: http://discuss.flarum.org.cn/ [3]: https://justjavac.gitbooks.io/mithriljs/content/content/getting-started.html