mithril首先是一款前端轻量级的mvvm框架(类似react),轻量到什么程度,大小只有8kb,这是我用过的最小的前端框架。麻雀虽小,但五脏俱全,这8kb竟然也包含了路由,懒加载,预加载功能。然后我们再来仔细介绍这款框架。
1.虚拟dom节点
虚拟DOM树是描述DOM树的Javascript数据结构。它由嵌套的虚拟DOM节点组成,也称为vnodes。通常,虚拟DOM树在每个渲染循环中重新生成,通常是响应于事件处理程序或数据更改而发生的。虚拟节点树针对其以前的版本,仅修改在有分支的变化DOM元素。如此频繁地重新创建vnode似乎是浪费的,但事实证明,现代Javascript引擎可以在不到一毫秒的时间内创建数十万个对象。另一方面,修改DOM比创建vnode要贵几个数量级。
2.组件(component)
组件是封装视图的部分以使代码更易于组织和/或重用的机制,react中也有。组件有六个生命周期方法:oninit,oncreate,onupdate,onbeforeremove,onremove,onbeforeupdate,这也很像angular和react中的component lifecycle。其实框架也是相互借鉴,最近看大漠老师在和vue撕逼,在下看来完全没有必要,你说vue抄袭angular,angular难道不是借鉴其他的技术吗?框架好用就行,mithril能把这么多功能放到8kb的空间里,足矣。
3.auto redraw
这个概念有点类似单向数据绑定,Mithril实现了一个虚拟的DOM分散系统,用于快速呈现,此外,它还提供了各种机制来获得对应用程序渲染的细粒度控制。当以惯用方式使用时,Mithril采用自动重画系统,可在数据层中进行更改时同步DOM。当然你也可以通过设置为特定事件禁用自动重绘
4.路由
layout布局
var Layout = {
view: function(vnode) {
return m(".layout", vnode.children)
}
}
m.route(document.body, "/", {
"/": {
view: function() {
return m(Layout, m(Home))
},
},
"/form": {
view: function() {
return m(Layout, m(Form))
},
}
})
万物皆component
附官方网址:https://mithril.js.org/