Mithril简介

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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容