Hyperapp源碼分析

sixgo 發布于2019-08-26 11:46 / 2705人閱讀

摘要：特點外置管理僅關心狀態渲染調度生成后對象。大話源碼詳細的分析，可以在源碼注釋倉庫下看到，里面有各個源碼重要細節的分析。事實上，這些函數用于在有標準結構的實現自調用的源碼上，作為判斷能達到剛剛好的要求。

前言

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源碼分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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