基于 jQuery 用两个函数共约 10 行代码做了一个很像 Mithril.js 的前端框架 (非标题党)

背景

大概一个月前看到一个 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 的老办法更容易组织代码。

项目仓库: https://github.com/ahui2016/mj.js