背景
大概一个月前看到一个 v 友发贴 ( https://v2ex.com/t/750181 ), 我第一次了解到 Mithril.js 这个框架，看了一下觉得不错，就打算用来改写自己一个小网站的前端页面。
但使用过程中遇到一个小 bug 解决不了，也可能是我使用不当，具体原因不重要，总之结果是我烦了并且突然灵光一闪想到用 jQuery 也能像 Mithril 一样写网页，就试一了下，一试发现真的可以。
为什么要模仿 Mithril ?
- 在使用 jQuery 写小项目的时候，通常习惯写一部分 HTML, 然后再写 js 去操作 DOM, 但这样做不方便做组件。
- 模仿了 Mithril 之后，完全不写 HTML, 一切都是 js, 因此非常轻松实现组件化，并且实际效果非常好，组件可以相互交流、可以嵌套、可以复用，在下面我会给出具体的示例。
代码
基于 jQuery, 再加上以下两个小函数，就是全部代码了。后面我会给出具体的使用示例。
// 函数名 m 来源于 Mithril, 也可以理解为 make 的简称，用来创建一个元素。
function m(name) {
if (jQuery.type(name) == 'string') {
return $(document.createElement(name));
}
return name.view();
}
// 函数名 cc 意思是 create a component, 用来创建一个简单的组件。
function cc(name, id, elements) {
if (!id) id = '' + Math.round(Math.random() * 100000000);
const vnode = m(name).attr('id', id);
if (elements) vnode.append(elements);
return {id: '#'+id, raw_id: id, view: () => vnode};
}
简单示例 (与 Mithril 对比)
Mithril 创建一个 component 是这样：
const Hello = {
view: () => m("div", [
m("h1", {class: "title"}, "My first app"),
m("button", "A button"),
])
}
而使用这个框架（以下简称 mj.js ）创建一个 component 有两种方法，一是这样：
const Hello = {
view: () => m('div').append([
m('h1').attr({class: 'title'}).text('My first app'),
m('button').text('A button'),
])
}
也可以这样：
const Hello = cc('div', 'hello', [
m('h1').attr({class: 'title'}).text('My first app'),
m('button').text('A button'),
]);
可见，与 Mithril 的写法非常相似，同时又完全是 jQuery 的基本操作，只要会写 jq, 就完全没有学习难度。
三个完整的例子
Hello World
- https://codesandbox.io/s/hellomjjs-r7no8
- 这是一个最简单的 mj.js 使用示例，可以看到 mj.js 的基本使用方法，可以看出与 Mithril 很相似。
Get User List
- https://codesandbox.io/s/user-listmjjs-y4e02
- 在该示例中，可以看到组件是如何相互交流、如何嵌套的。
uglynotes
- https://github.com/ahui2016/uglynotes
- 这是我的一个小网站，前端页面完全采用 mj.js 实现。
结语
本框架虽然没啥技术含量，但真的好用，特别适合小项目，尤其是如果用过 Mithril.js 或习惯使用 jQuery, 可零学习成本获得一种前端解决方案，多一个选项。比其他框架易学，比 HTML + jQuery 的老办法更容易组织代码。
2
Select Language