Hyperapp源碼分析

時間 2019-11-06

標籤 hyperapp 源碼分析简体版

原文原文鏈接

前言

Hyperapp是一個輕量級視圖庫，擁有完備的界面渲染、以及視圖數據交互更新能力。專一於視圖渲染的核心部分，使得它的體積很是輕巧，也使得它具有"無限可能"。在設計上並沒有涉及太多複雜場景，尤其適用於輕量級的移動開發場景。html

特色

1. 外置Action管理

Hyperapp僅關心狀態渲染、調度生成後actions對象。在狀態管理上，咱們能夠自主使用flux、redux，甚至無需使用任何狀態管理庫。node

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

Hyperapp提供vnode生成輔助函數，但並不限制渲染模板的選擇，咱們能夠自由選擇相似JSX，甚至類VUE的模板語言。webpack

3. 單向數據流原則

在Hyperapp初始渲染以後，觸發視圖更新的惟一方式是，經過調用action變動狀態，從而觸發視圖更新。這使得咱們能夠創建易於跟蹤、健壯、可維性強的應用。git

大話Hyperapp源碼

詳細的分析，能夠在源碼註釋倉庫下看到，裏面有hyperapp各個源碼重要細節的分析。下面來介紹一下hyperapp源碼有意思的地方：github

1. 麻雀雖小，五臟俱全

專一於視圖渲染&數據交互更新，在實現上也是恰到好處地實現這些功能。具有內置狀態驅動的視圖更新引擎、標準VNode四板斧、DOM-diff機制。在這點來講，hyperapp處於新生期，須要具有完善的生態，才能夠發揮出強大的內核能力。web

VNode四板斧：redux

// 基本的HTML標籤均可以被抽象成以下形式：
// {
//   nodeName,
//   attributes,
//   children,
//   key
// }
// TextNode只有一個nodeValue，SVG也是比較特殊，因此在更新時候也會對這兩種類型作特殊處理

DOM-diff 原則：app

// 1. 平級對比，非平級則認爲是不同的dom，直接剷平重建
// 2. 只更新同類型節點，非同類型同樣剷平重建
// 3. 儘量利用現有dom，免除額外的刪除建立開銷，只須要從新插入(appendChild or insertBefore)
// 4. index&key相同的vdom，對應的dom無需對比，直接複用，下一個！

2. 剛恰好，就是最好的

hyperapp在細看一些實現上，會以爲有些"不嚴謹"，可能會被鑽空子。好比：clone、get等函數實現，或者是Promise、Array的判斷。dom

事實上，這些函數用於在有標準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)
  - 不能控制本身被銷燬，能夠在銷燬前作一些同步操做，好比釋放第三方庫，防止內存泄露