本文是变饼档作者本人翻译，转载请注明来源。原文地址:http://www.bianbingdang.com/article_detail/161.html

mithril.js

开源地址：https://github.com/MithrilJS/mithril.js

什么是mithril

用于构建单页应用程序的现代客户端Javascript框架。它很小（8.8 KB gzip压缩），速度快，提供开箱即用的路由和XHR实用程序。Mithril被Vimeo和Nike等公司以及Lichess open等开源平台使用。Mithril支持IE11，Firefox ESR以及Firefox，Edge，Safari和Chrome的最后两个版本。

安装方法

cdn引用

或者

# For the most recent stable version
$ npm install mithril --save
# For the most recent unstable version
$ npm install mithril@next --save

使用文档

开始介绍mithril的基本用法,可能每个人的使用感受不一样，尽管现在很流行在dom上直接操作类似js的方式。但是这种直接渲染的方式，更加让前端页面的业务逻辑清晰，js干自己的事情去操作DOM，然后渲染。html只要静静的等待被修理。这似乎看起来和jquery的dom操作没什么分别，但是实际用起来速度快不少

这是一张官方的性能对比图，前者是下载速度对比，后者是性能对比。

开始使用

先简单介绍下在CDN下面的使用

第一个应用

<body>
 <script src="https://unpkg.com/mithril/mithril.js"></script>
 <script>
 var root = document.body
 m.render(root, "Hello world")
 </script>
</body>

打开页面，像这样，出现hello world

Mithril也已加载到此页面上，因此如果您愿意，可以立即开始在开发人员控制台中的m对象上进行操作！

假如在控制台上输入：

m.render(root, "My first app")

页面立刻会由hello worl变成My first app

如您所见，您使用相同的代码来创建和更新HTML。

MithrilJS会自动找出更新文本的最有效方法，而不是盲目地从头开始重新创建。

此时大概明白了m函数的render用法，它就是用来渲染html的

DOM元素操作

让我们将文本包装在<h1>标签中。

m.render(root, m("h1", "My first app"))

该m()函数可用于描述您想要的任何HTML结构。所以，如果你需要添加一个类<h1>：

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

如果你想要多个元素：

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

等等：

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

也就是说m是可以无限嵌套的，并且接受一个字典，表示元素里面的属性和值，甚至可以直接书写onclick这样的函数，下面给一个完整的例子。比如要在刚才的body下面添加两个div，div继续添加p标签可以像如下方式，和一个button并且完成点击。

<body>
 <script src="https://unpkg.com/mithril/mithril.js"></script>
 <script>
 var root = document.body;
 var count = 0;
 m.render(root, [m('div', m('button', {
 onclick: function(){count+=1;alert(count)}
 }, '点我')), m('div', m('p',count))])
 </script>
</body>

组件介绍

拿上一个例子举例，我们虽然看到浏览器渲染的结果，但那并不完美，并没有像预期的那样，点击页面按钮的时候，count数值跟着增加

mithril的view组建解决了这个问题

我们把上边的例子封装成一个view组建，如下

 var root = document.body;
 var count = 0;
 var Hello = {
 view: function () {
 return [m('div', m('button', {
 onclick: function () { count += 1}
 }, '点我')), m('div', m('p', count))]
 }
 }
 m.mount(root, Hello)

这次再点击的时候，p标签下的数字就会随之变动

该m.mount功能类似于m.render，但它不是仅渲染一些HTML，而是激活Mithril的自动重绘系统。所以意味着，我们在动态修改数据的时候，很容易达到同时绑定的效果。

路由

路由只是意味着在具有多个屏幕的应用程序中，从一个屏幕到另一个屏幕随意切换。

让我们添加一个在我们的点击计数器之前出现的启动页面。首先，我们为它创建一个组件：

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

如您所见，此组件只是呈现链接#!/hello。该#!部分称为hashbang，它是单页应用程序中使用的常用约定，用于指示其后的内容（/hello部分）是路径路径。

现在我们将拥有多个屏幕，我们使用m.route而不是m.mount。

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

该m.route功能仍具有相同的自动重绘功能m.mount，并且还支持URL感知; 换句话说，它让Mithril知道当它#!在URL中看到时该做什么。

在”/splash”之后root的手段是这样的默认路由，如果在URL中hashbang不指向定义的途径之一（即/splash和/hello，我们的情况下），然后秘银重定向到默认路由。因此，如果您在浏览器中打开页面并且您的URL是http://localhost ，那么您将被重定向到 http://localhost/#!/splash。

此外，正如您所期望的那样，单击启动页面上的链接将转到我们之前创建的点击计数器屏幕。请注意，现在您的URL将指向http://localhost/#!/hello 。您可以使用浏览器的后退和下一个按钮来回浏览启动页面。

XHR/AJAX

基本上，XHR只是一种与服务器通信的方式。

让我们更改点击计数器，使其在服务器上保存数据。对于服务器请求数据，我们将使用REM（REM介绍查看：http://rem-rest-api.herokuapp.com/），一个为本教程之类的应用程序设计的模拟REST API的工具。

首先，我们创建一个调用函数m.request。的url表示资源的端点时，指定method指定的动作的类型，我们正在采取（通常为PUT方法upserts），data是我们要发送到端点和有效载荷withCredentials装置以启用cookie（对于REM API来的要求工作）

var count = 0
var increment = function() {
 m.request({
 method: "PUT",
 url: "//rem-rest-api.herokuapp.com/api/tutorial/1",
 data: {count: count + 1},
 withCredentials: true,
 })
 .then(function(data) {
 count = parseInt(data.count)
 })
}

调用increment函数会将对象挂起{count: 1}到/api/tutorial/1端点。此端点返回一个与count发送给它的值相同的对象。请注意，该count变量仅在请求完成后更新，并且现在使用服务器的响应值进行更新。

让我们替换组件中的事件处理程序来调用increment函数，而不是count直接递增变量：

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

单击该按钮现在应该更新计数。

四时宝库

程序员的知识宝库

一个简单强悍前端框架:mithril.js-中文文档指南

mithril.js

使用文档

XHR/AJAX