现代框架的替代轻量级UI库

Mithril是用于构建单页应用程序的现代客户端JavaScript框架。 它体积小（gzip小于10kb），速度快，并且提供开箱即用的路由和XHR实用程序。 Mithril被Vimeo和Nike等公司以及Lichess等开源平台使用。 如果您是一位经验丰富的开发人员，并且想知道Mithril与其他框架的比较情况，请参阅框架比较页面。 秘银支持IE11，Firefox ESR和Firefox，Edge，Safari和Chrome的最后两个版本。 无需填充胶。 试用Mithril的一种简单方法是将其包含在CDN中，然后按照本教程进行操作。 它涵盖了API的大部分表面（包括路由和XHR），但仅需10分钟。 为了简化操作，您可以拨叉这支已装有最新版本的秘银的笔。 Mithril也已经加载到此页面上，因此您可以根据需要立即在开发人员控制台中戳m对象！

让我们开始尽可能的小：在屏幕上渲染一些文本。 将以下代码复制到您的文件中（通过复制，我指的是将其键入-您会学得更好） 现在，让我们将文本更改为其他内容。 在上一个代码下面添加以下代码行： 如您所见，您使用相同的代码创建和更新HTML。 秘银会自动找出更新文本的最有效方法，而不是从头开始盲目地重新创建它。 m（）函数可用于描述所需的任何HTML结构。 因此，如果您需要向＆lt; h1＆gt;添加一个类： 注意：如果您更喜欢＆lt; html＆gt; 语法，则可以通过Babel插件使用它。 秘银组件只是具有视图功能的对象。 这是上面作为组件的代码： var Hello = {view：function（）{return m（＆＃34; main＆＃34 ;, [m（＆＃34; h1＆＃34 ;, {class：＆＃34; title＆＃34;}，＆＃34 ;我的第一个应用＆＃34;），m（＆＃34button＆＃34 ;、＆＃34; A button＆＃34;），]）}}

m.mount函数与m.render相似，但是它不会激活某些HTML，而是会激活Mithril的自动重绘系统。要了解这意味着什么，我们添加一些事件：

var count = 0 //添加了一个变量var Hello = {view：function（）{return m（＆＃34; main＆＃34 ;, [m（＆＃34; h1＆＃34 ;, {class：＆＃34; title＆ ＃34;}，＆＃34;我的第一个应用程序＆＃34;），//更改了下一行m（＆＃34; button＆＃34;，{onclick：function（）{count ++}}，计数+＆＃34 ; clicks＆＃34;），]）}} m.mount（root，Hello）

我们在按钮上定义了一个onclick事件，该事件增加了变量计数（在顶部声明）。现在，我们还在按钮标签中呈现了该变量的值。

现在，您可以通过单击按钮来更新按钮的标签。由于我们使用m.mount，因此您无需手动调用m.render即可将count变量中的更改应用于HTML；秘银为您做到。

如果您想了解性能，事实证明Mithril在呈现更新方面非常快，因为它只涉及DOM绝对需要的部分。因此，在上面的示例中，当您单击按钮时，其中的文本是DOM Mithril实际更新的唯一部分。

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

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

如您所见，该组件仅呈现了指向＃！/ hello的链接。 ＃！部分称为hashbang，它是“单页应用程序”中常用的约定，用于指示其后的内容（/ hello部分）是路由路径。

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

m.route函数仍然具有与m.mount相同的自动重绘功能，并且还启用了URL感知功能。换句话说，它让Mithril看到＃时知道该怎么办！在网址中。

＆＃34; / splash＆＃34;紧接在root之后意味着这是默认路由，即，如​​果URL中的哈希提示未指向已定义的路由之一（在本例中为/ splash和/ hello），则秘银将重定向到默认路由路线。因此，如果您在浏览器中打开页面，并且URL为https：// localhost，那么您将被重定向到https：// localhost /＃！/ splash。

同样，正如您期望的那样，单击启动页面上的链接会将您带到我们之前创建的点击计数器屏幕。请注意，现在您的URL将指向https：// localhost /＃！/ hello。您可以使用浏览器的“后退”和“下一个”按钮来回导航至初始页面。

让我们更改点击计数器，使其将数据保存在服务器上。对于服务器，我们将使用REM，这是为本教程等玩具应用程序设计的模拟REST API。

首先，我们创建一个调用m.request的函数。 url指定一个代表资源的端点，该方法指定我们要执行的操作的类型（通常是PUT方法更新），主体是我们要发送到该端点的有效负载，并且withCredentials意味着要启用Cookies（REM API起作用的要求）

var计数= 0var增量= function（）{m.request（{方法：＆＃34; PUT＆＃34 ;, url：＆＃34; // rem-rest-api.herokuapp.com/api/tutorial/1&# 34 ;，正文：{count：count + 1}，带凭据：true，}）.then（function（data）{count = parseInt（data.count）}）}

调用增量函数会将对象{count：1}向上插入/ api / tutorial / 1端点。该端点返回一个对象，该对象具有发送给它的相同计数值。请注意，count变量仅在请求完成后才更新，并且现在使用服务器的响应值进行更新。

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

var Hello = {view：function（）{return m（＆＃34; main＆＃34 ;, [m（＆＃34; h1＆＃34 ;, {class：＆＃34; title＆＃34;}，＆＃34 ;我的第一个应用＆＃34;），m（＆＃34; button＆＃34;，{onclick：增量}，计数+＆＃34;点击＆＃34;），]）}}

我们介绍了如何创建和更新HTML，如何创建组件，单页应用程序的路由以及如何通过XHR与服务器交互。

这应该足以使您开始为实际应用程序编写前端。既然您已熟悉Mithril API的基础知识，请务必查看简单的应用程序教程，该教程将引导您完成构建实际的应用程序。