技术频道


现代化 JavaScript 框架 Mithril 简介

Mithril.js 大小体积


从框架的体积大小来说, Mithril 与其他框架相比都要小的多。这里贴一个 Mithril 官网的对比图:

Mithril.js 和 Vue、React、Angular 对比图

Mithril.js 特点


  • 轻量级
  • 压缩后体积小,无依赖。API 少,上手简单。

  • 快速
  • 提供了一个模板引擎与一个虚拟的 DOM diff 实现,实现高性能渲染、自动重绘

  • MVC
  • 层次化的 MVC 组件,耦合性低可维护性高

Mithril.js 安装


CDN 方式使用 Mithril.js

直接从 CDN 引入 Mithril 文件是最简单的方式:

<!-- Development: whichever you prefer -->
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mithril/mithril.js"></script>

<!-- Production: whichever you prefer -->
<script src="https://unpkg.com/mithril/mithril.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mithril/mithril.min.js"></script>

NPM 方式使用 Mithril.js

对于生产级项目,建议使用 NPM 来安装。在使用 NPM 之前你需要自行安装好 Node.js。

在命令行中进入项目文件夹,执行以下命令来初始化项目:

npm init --yes

#然后执行命令来安装 Mithril:
npm install mithril --save

#如果项目是使用 ts 开发的,需要安装类型声明文件。
npm install @types/mithril --save-dev

现在已经完成了 Mithril 的安装。

Mithril.js 基本使用示例


Mithril.js 起步

首先我们创建一个 HTML 文件:

<body>
    <script src="//unpkg.com/mithril/mithril.js"></script>
    <script>
    var root = document.body

    // your code goes here!
    </script>
</body>

从最简单的开始,在页面中输出一段文本。添加下列代码到文件中:

var root = document.body

m.render(root, "Hello CommandNotFound ⚡️ 坑否!")

如果你用 VSCode,这个时候可以启用 Live Server 插件,就可以查看在浏览器中的效果了,下面来修改继续添加这段文本:

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

如你所见,创建和修改 HTML 用的是相同的代码。Mithril 会自动计算出最高效的方式来更新 HTML,并不会每次都重新创建 HTML。

Mithril.js 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"),
])

Mithril.js 支持 JSX

Mithril 也支持 JSX 语法:JSX 是一个语法扩展,可以让你在 JavaScript 中直接使用 HTML 语法。它不是任何 JavaScript 标准的一部分,也不是构建应用所必需的,你可以根据你的喜好来决定是否使用它

var MyComponent = {
    view: function() {
        return m("main", [
            m("h1", "Hello CommandNotFound ⚡️ 坑否"),
        ])
    }
}

// 使用 JSX 可以写成:
var MyComponent = {
    view: function() {
        return (
            <main>
                <h1>Hello CommandNotFound ⚡️ 坑否</h1>
            </main>
        )
    }
}

当使用 JSX 语法时,可以使用大括号在 JSX 中插入 JavaScript 表达式:

var greeting = "Hello"
var url = "https://commandnotfound.cn"
var link = <a href={url}>{greeting + "!"}</a>
// 以上代码将生成 <a href="https://commandnotfound.cn">Hello</a>

可以通过首字母大写的组件名来调用组件:

m.mount(document.body, <MyComponent />)
// 等效于 m.mount(document.body, m(MyComponent))

可以通过 Babel 插件来使用 JSX。

Mithril.JS 扩展阅读:



发表评论