ego008
ego008
3094 2 0

mithril.js

Mithril 是一个客户端 javascript MVC 框架,即它是一个工具,使应用程序代码分为数据层(Model), UI 层(View),黏合层(Controller)。

Mithril 通过 gzip 压缩后,仅有 8kb 左右,这要归功于 small, focused, API。它提供了一个模板引擎与一个虚拟 DOM diff 实现高性能渲染,还提供了其它高级工具,以及支持路由和组件化。

框架的目标是使应用程序代码更容易组织,可读和可维护,帮助你成为一个更好的开发者。

不像某些框架,Mithril 努力避免将您锁定到某个 web 框架上:您可以尽量少地使用您所需要的框架。

然而,使用其整个工具库可以带来很多好处:学习使用函数式编程和巩固良好的编码实践,OOP 和 MVC 只是其中的一些。

上图为官方给出的对比图,但是他为什么会这么小呢?其实是因为它做了比较少的事情。事实上mithril.js仅仅提供了以下几个功能

基于 HyperScript 构建 Virtual DOM
DOM diff
双向绑定
AJAX
路由
兼容 JSX

Hello world 示例

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

// your code goes here!
m.render(root, "Hello world")
</script>
</body>

MVC 示例代码:

//model 模型
var Page = {
list: function() {
return m.request({method: "GET", url: "pages.json"});
}
};

var Demo = {
//controller 控制器
controller: function() {
var pages = Page.list();
return {
pages: pages,
rotate: function() {
pages().push(pages().shift());
}
}
},

//view 视图
view: function(ctrl) {
return m("div", [
ctrl.pages().map(function(page) {
return m("a", {href: page.url}, page.title);
}),
m("button", {onclick: ctrl.rotate}, "Rotate links")
]);
}
};


//initialize 初始化
m.mount(document.getElementById("example"), Demo);

Flarum https://discuss.flarum.org/ 在用它,可以放心使用

mithril.js 官网 https://mithril.js.org/
项目地址 https://github.com/MithrilJS/mithril.js
Mithril 组件 https://github.com/MithrilJS/mithril.js/wiki/Components

0

See Also

Nearby


Discussion (2)

活人生
活人生 2017-12-10 21:06

发不了新帖

0
活人生
活人生 2017-12-10 21:07

0
Login Topics