Hyperapp源码分析

sixgo 发布于2019-08-26 11:46 / 2685人阅读

摘要：特点外置管理仅关心状态渲染调度生成后对象。大话源码详细的分析，可以在源码注释仓库下看到，里面有各个源码重要细节的分析。事实上，这些函数用于在有标准结构的实现自调用的源码上，作为判断能达到刚刚好的要求。

前言

Hyperapp是一个轻量级视图库，拥有完备的界面渲染、以及视图数据交互更新能力。专注于视图渲染的核心部分，使得它的体积非常轻巧，也使得它具备"无限可能"。在设计上并无涉及太多复杂场景，尤为适用于轻量级的移动开发场景。

特点 1. 外置Action管理

Hyperapp仅关心状态渲染、调度生成后actions对象。在状态管理上，我们可以自主使用flux、redux，甚至无需使用任何状态管理库。

2. 外置渲染模板（语法）

Hyperapp提供vnode生成辅助函数，但并不限制渲染模板的选择，我们可以自由选择类似JSX，甚至类VUE的模板语言。

3. 单向数据流原则

在Hyperapp初始渲染之后，触发视图更新的唯一方式是，通过调用action变更状态，从而触发视图更新。这使得我们可以建立易于跟踪、健壮、可维性强的应用。

大话Hyperapp源码

详细的分析，可以在源码注释仓库下看到，里面有hyperapp各个源码重要细节的分析。下面来介绍一下hyperapp源码有意思的地方：

1. 麻雀虽小，五脏俱全

专注于视图渲染&数据交互更新，在实现上也是恰到好处地实现这些功能。具备内置状态驱动的视图更新引擎、标准VNode四板斧、DOM-diff机制。在这点来说，hyperapp处于新生期，需要具备完善的生态，才可以发挥出强大的内核能力。

VNode四板斧：

// 基本的HTML标签都可以被抽象成如下形式：
// {
//   nodeName,
//   attributes,
//   children,
//   key
// }
// TextNode只有一个nodeValue，SVG也是比较特殊，所以在更新时候也会对这两种类型做特殊处理

DOM-diff 原则：

// 1. 平级对比，非平级则认为是不一样的dom，直接铲平重建
// 2. 只更新同类型节点，非同类型一样铲平重建
// 3. 尽可能利用现有dom，免除额外的删除创建开销，只需要重新插入(appendChild or insertBefore)
// 4. index&key相同的vdom，对应的dom无需对比，直接复用，下一个！

2. 刚刚好，就是最好的

hyperapp在细看一些实现上，会觉得有些"不严谨"，可能会被钻空子。比如：clone、get等函数实现，或者是Promise、Array的判断。

事实上，这些函数用于在有标准DOM结构的实现、自调用的源码上，作为判断能达到"刚刚好"的要求。既不会浪费性能体积，也不会导致出错。

function get(path, source) {
    for (var i = 0; i < path.length; i++) {
        source = source[path[i]]
    }
    return source
}


// const result = { winner: { name: "Tony" } }
// get(["winner", "name"], result)  => Tony

不必具备lodash get的兼容性，以最优形态抽象出适用于源码的函数，便是最好的。

3. 简单的生命周期

说出来你可能不信，hyperapp仅有四个生命周期函数。

他们分别是：

视图渲染

初始渲染后：oncreate(DOMElement)

视图更新后：onupdate(DOMElement)

视图销毁

销毁前执行：

onremove(DOMElement, action)

可以控制异步销毁，需要手动调用action函数才会移除DOMElement

销毁前通知：

ondestory(DOMElement)

不能控制自己被销毁，可以在销毁前做一些同步操作，比如释放第三方库，防止内存泄露

这使得hyperapp比较适用于轻交互场景，配合webpack的模板语法编译能力，可以实现非常轻量级的移动应用。

4. 严格的key控制

在列表渲染时候，hyperapp严格要求组件提供对应key属性。

如果没有对应的key，相当于默认每次渲染都是全新的列表，这会涉及到原有列表DOM的销毁、新列表DOM创建以及添加，大型列表上有可能会导致性能问题。

也正因为这个特性，使得在良好结构下，hyperapp的渲染性能表现不亚于现有主流渲染库。

5. SSR支持

Hyperapp虽然精巧，却完全支持SSR特性。在初次渲染时候，会将现有DOM结构转成vdom，当有行为触发数据变动时，高效进行dom-diff以更新现有视图。

Link

Hyperapp仓库：https://github.com/hyperapp/hyperapp/blob/master/src/index.js

源码注释仓库：https://github.com/yesvods/hyperapp/blob/master/src/index.js#L13

旧版本渲染性能报告：https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts/table.html

渲染性能Runner：http://mathieuancelin.github.io/js-repaint-perfs/

PerformanceIssue：https://github.com/hyperapp/hyperapp/issues/13

云服务器 GPU云服务器 hyperapp 源码分析 nginx源码分析 webrtc源码分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107529.html

小而美的框架—hyperapp

摘要：写在最后总体来说，是一个小而美的框架，值得我们来折腾一下，以上均为本人理解，如有错误还请指出，不胜感激一个硬广我所在团队工作地点在北京求大量前端社招实习，有意者可发简历至写在前面没错，又是一个新的前端框架，hyperapp非常的小，仅仅1kb，当然学习起来也是非常的简单，可以说是1分钟入门。声明式：HyperApp 的设计基于Elm Architecture（这也意味着组件更多的是...

haitiancoder 2019-08-21 16:50 评论0 收藏0
Hydux: 一个 Elm-like 的全功能的 Redux 替代品

摘要：刚好最近需要做一个答题小游戏的应用，不想再上全家桶了，一是体积太大，二是无论配置还是写起来都太繁琐。内置的内置的扩展支持内置的热更新模块然后就可以了简单，可控，无痛的开发环境和代码组织。在学习和使用 Fable + Elmish 一段时间之后，对 Elm 架构有了更具体的了解, 和预料中的一样， Elm 风格的框架果然还是和强类型的 Meta Language 语言更搭，只有一个字:...

DobbyKim 2019-08-21 17:59 评论0 收藏0
前端每周清单半年盘点之 JavaScript 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍，阐述了从提出到角力到流产的前世今生。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...

Vixb 2019-08-21 12:04 评论0 收藏0
汇总2017JS项目，总结我们从中学到了什么？

摘要：个人感悟自己公司也有项目在用，学的难点在于，其他的话上手挺快的，而且是尤大写的，中文文档也很完整，很适合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 当红辣子鸡——vue 和去年一样，vue是js项目中点赞数增加最多的，我们可以看下图： showImg(https://se...

dantezhao 2019-08-22 13:55 评论0 收藏0
前端开源项目周报0214

摘要：由出品的前端开源项目周报第八期来啦。我们的前端开源周报集合了一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。由OpenDigg 出品的前端开源项目周报第八期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。qart.js 合并图片和二维码 showImg(https://s...

Nosee 2019-08-20 14:17 评论0 收藏0