JavaScript 是时候使用 Mithril.js 了

justjavac · 2015年09月26日 · 最后由 rupertqin 回复于 2015年10月02日 · 4019 次阅读

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 性能

参考

共收到 7 条回复

鲁棒性 赞一个

看这个项目开发好像不太活跃,是太鲁棒了还是作者已经放弃了? https://github.com/lhorie/mithril.js/commits/next

终于看到有人吹 Mithril 了简直赞。之前有用过一段时间,非常适合的一个应用场景是在局部需要处理大量 UI-state 的地方加入(e.g:在一个传统网站的局部加入一个日历),而且不依赖任何第三方的库/框架。 不过没用过 Mithril 做一整个的 SPA,所以在这方面就不大清楚了。

我后来就跑去用 Mithril 了。塞到 Pipeline 里就可以用,功能少也没什么要学的,因为之前学过 React 所以几乎直接就上手了,和 Coffeescript 的兼容性也很好。

最近接触了几个前段框架,发点牢骚供大家批判: React 什么都要自己 DIY,有点像 NodeJS 和 Sinatra,而我更喜欢 Rails,宣称解决的问题我经验少没遇到,单向数据流不知道好在哪,immutable state 改状态很麻烦但是状态老要改,Flux 也不知道在解决什么问题,视频没耐心看。Redux 的概念太多看不懂,Dull Component 离开了上层的 Smart Component 也没法用,不含逻辑的 Dull Component 就是个 Partial,没法直接拿来 compose。 Ember 文档组织的不好而且很匮乏,讲得也不清楚。React 的文档就组织得很好一会儿就学会了。 Angular 术语太多整个没看懂而且听说 2.0 变化大怕现在学了白学。看首页看不出解决了什么问题。

前段框架有一种虽然不知道它们在说什么,但感觉好像很厉害的样子。没有一个框架明确写了 “Rails 有这样这样的问题,而我们的诞生就是为了解决这些问题”。不知道在解决什么问题,结果就像是自己制造问题,然后再宣称自己解决了自己制造的问题。因为我看 coding.net 的后台就是 Angular 做的,不知道跟用 Rails+Turbolinks 高到哪里去了,但是要多写很多 js 代码,我不喜欢 js 代码,括号太多了,新时代 js 代码 ES6 ES7 什么的也有这个问题,也不知道解决了什么问题。

当然我经验少可能没遇到过它们要解决的问题。

而且我很讨厌的一点是很多前段框架都爱用 Todo List 来做例子和教程甚至还搞了个项目用所有前段框架来写 Todo List。Todo List 很有代表性吗?在我看来写 Todo List 就跟写 Hello World 一样,都是很流行然后并没由什么用的东西。 还有就是为什么 Facebook 和 Ionic 之类的公司这么坚持要把网页搬到 iOS 和 Android 上呢?Swift/iOS 和 Java/Android 就这么难学么?我前段时间学了点 iOS 觉得挺简单的呀?至少比 Redux 简单。

和 vuejs 的性能对比呢?

#4 楼 @nong 谢谢牢骚,认同你很多观点。

事情复杂到一定程度之前,各种轮子区别不会太大的,找自己趁手的就行了。

@nong 不知道为什么,基本不认同你所有观点 感觉写 ruby 的不用 coffeescript 就不会写 js 了

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册