Mithril.js:一个高性能 JavaScript MVC 框架
![Mithril.js:一个高性能 JavaScript MVC 框架](https://static001.geekbang.org/infoq/a3/a35fe4937c1762248e8f362c513b55ac.png)
现代前端的发展涌现出很多出色的 JavaScript 框架,在性能和效率方面各有特色,每个前端团队都有自己使用得比较顺手的开发框架。本文介绍一个新的前端框架:Mithril.js
,是一个高性能 JavaScript 框架,它的大小和速度使其成为满足视图模型需求的不错选择。在 Mithril.js
中的大部分工作都是纯 JavaScript。除此之外,Mithril.js
是学习函数式编程的不错的教程。本文通过构建一个简单的应用程序,来展示帖子列表,并通过简单步骤实现 CRUD 操作:
项目初始化
设置应用组件
设置页面之间的路由
实施清单
实现创建/更新表单
添加删除按钮
Bootstrap 美化 UI
如果需要查看最终结果,可以在 GitHub 上找到它。
Mithril.js
官方网站:https://mithril.js.org/
项目初始化
前端项目框架引入的方式一般有通过引用公共 CDN 上的核心 Mithril.js 文件、通过 npm install
或者通过其它脚手架进行安装,本文将通过脚手架 Vite.js 来进行项目初始化,在这个应用程序中将使用 TypeScript 。
首先,创建基本应用程序并安装依赖项,这里将项目命名为 mithril-study ,然后使用 Vite
模板 vanilla-ts
。
安装依赖:
设置应用组件
现在来创建应用程序组件,它将呈现应用程序的根元素(<div class="app">...</div>
),并将成为应用程序中所有其他组件的容器。将 src>main.ts
的代码替换为:
那么这里发生了什么?
安装的依赖
Mithril.js
都在文件夹node_modules
中,在应用程序中通过import
导入,并给其取了一个简称m
,方便后续调用。定义了一个函数
App
,它返回一个Mithril
组件。 定义了一个返回Mithril
组件的函数App
。Mithril
组件是任何具有视图方法的对象。由App
函数返回的组件,将从此调用app
组件。视图方法将
m
作为一个函数调用,它的第一个参数看起来就像 CSS 选择器div.app
。这将呈现为<div class="app"></div>
。对m
的多个调用将作为参数添加到第一个调用中,这些调用将作为嵌套元素呈现。最后,告诉
Mithril
渲染App
函数返回的任何内容并将其渲染到document.body
元素中。
现在在终端中运行 npm run dev
来运行 Vite
,然后导航到该应用,效果如下:
![](https://static001.geekbang.org/infoq/da/dae7f9dfa48d73786185e499941ca2ef.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
打开根目录下文件index.html
并删除带有 id app
的 div
,因为项目渲染的根是 document.body
。
设置页面之间的路由
设置路由之前下面三个函数添加到 src>main.ts
:
前两个是组件函数,因此约定组件函数使用首字母大写的命名形式,就像 App
函数一样,需要渲染一些虚拟文本。
setupRouting
函数作用如下:
首先,它从 DOM 中获取一个 HTML 元素作为输入。
通过将
m.route.prefix
设置为空字符串,定义了应该如何从浏览器 URL 解析路由。如果忽略,Mithril
会像其他前端框架一样使用描点 hash#!
,这将提供类似http://localhost:3000/#!/posts/1
的 URL。通过将其设置为空字符串,将 URL 格式改成如下形式http://localhost:3000/posts/1
。调用
m.route(...)
函数,为其设置三个参数,第一个是充当路由容器的 HTML 元素,即所有路由内容都将显示在该元素中。第二个参数是当浏览器导航到没有定义路由的 URL 时要使用的回退路由。第三个参数是一个将路由(URL 路径)映射到组件函数的对象。最后,查看路由
/posts/:id
。此路由将 URL 的一部分映射到变量id
。可以在组件中检查该路由参数。
需要从某个地方调用 setupRouting
,为其提供一个 HTML 元素。在 App 函数中,将 m("main", ...)
行更改为以下内容:
当 m
的第二个参数是非组件对象时,它用于配置由第一个参数创建的元素。在这种情况下,就将使用 Mithril
的生命周期钩子之一:oncreate
。当 Mithril
在 DOM 中创建元素并公开一个附加了 DOM 元素的虚拟节点(元素的内部表示)时,会调用此钩子。将该 DOM 元素提供给 setupRouting
。
现在在浏览器输入 http://localhost:3000
看到主元素中的内容为 Get List
,然后输入 http://localhost:3000/posts
可以看到主内容变成了 Post Form
。
实现真实列表
前面的列表只是一个文本内容,现在开始通过 Ajax 来获取列表数据。即实现 GetList
组件,添加以下接口并更新 GetList
函数:
上面的代码主要做的事情如下:
首先定义了文章的数据结构,即接口
IPost
,并定义文章数据posts
;在
view
方法中,创建了一个列表 (ul
) 的部分,并为其设置了一个 CSS 类;增加了一个
新增
的连接按钮
查看运行效果,如下所示:
![](https://static001.geekbang.org/infoq/0d/0d3939a8920f0ab89b62a65965fc0c9e.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
接下来,回到 GetList
函数增加真实接口调用数据,在 return
前面插入一下代码:
调用 m.request
,并将响应数据插入到变量 posts
中,在使用 TypeScript 时,向 m.request<IPost[]>
添加一个类型参数,由此可以预测到响应数据是什么类型,运行效果如下:
![](https://static001.geekbang.org/infoq/86/86f9736f49dec55b61fafb67b2b5bc77.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
实施创建/编辑页面
将更新 PostForm
函数,并添加一个函数来保存文章数据:
然后点击文章,查看如下效果:
![](https://static001.geekbang.org/infoq/02/0242d870261279d279031752c9199b24.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
添加删除按钮
作为最后一个 CRUD 操作,这里将要实现删除功能。回到 GetList
函数并在每个列表项中添加一个删除按钮,并为该按钮绑定单击事件,用于向 API 发送删除请求。
Bootstrap
现在使用 Bootstrap 对界面进行简单的调整,具体的代码这里就不展示,可以在 GitHub 上查看,最终效果如下:
![](https://static001.geekbang.org/infoq/af/af233271a7be2f4cb44b712dbf1b7fb5.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
总结
至此就构建了一个简单的 CRUD 应用程序。 Mithril
负责渲染、路由和 HTTP 请求,而纯 JavaScript 则负责其余的工作。到目前为止,可以看到 Mithril
构建应用的简单。由于是一个学习性质的,一些交互并非完整,如保存或者删除成功后的操作没有实现,包括后续逻辑的更新。如有兴趣可以参阅官网文档:https://mithril.js.org/
版权声明: 本文为 InfoQ 作者【devpoint】的原创文章。
原文链接:【http://xie.infoq.cn/article/fc2201e8463540098554bdd6d】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论