成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Hyperapp源碼分析

sixgo / 2721人閱讀

摘要：特點(diǎn)外置管理僅關(guān)心狀態(tài)渲染調(diào)度生成后對象。大話源碼詳細(xì)的分析，可以在源碼注釋倉庫下看到，里面有各個源碼重要細(xì)節(jié)的分析。事實(shí)上，這些函數(shù)用于在有標(biāo)準(zhǔn)結(jié)構(gòu)的實(shí)現(xiàn)自調(diào)用的源碼上，作為判斷能達(dá)到剛剛好的要求。

前言

Hyperapp是一個輕量級視圖庫，擁有完備的界面渲染、以及視圖數(shù)據(jù)交互更新能力。專注于視圖渲染的核心部分，使得它的體積非常輕巧，也使得它具備"無限可能"。在設(shè)計(jì)上并無涉及太多復(fù)雜場景，尤為適用于輕量級的移動開發(fā)場景。

特點(diǎn) 1. 外置Action管理

Hyperapp僅關(guān)心狀態(tài)渲染、調(diào)度生成后actions對象。在狀態(tài)管理上，我們可以自主使用flux、redux，甚至無需使用任何狀態(tài)管理庫。

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

Hyperapp提供vnode生成輔助函數(shù)，但并不限制渲染模板的選擇，我們可以自由選擇類似JSX，甚至類VUE的模板語言。

3. 單向數(shù)據(jù)流原則

在Hyperapp初始渲染之后，觸發(fā)視圖更新的唯一方式是，通過調(diào)用action變更狀態(tài)，從而觸發(fā)視圖更新。這使得我們可以建立易于跟蹤、健壯、可維性強(qiáng)的應(yīng)用。

大話Hyperapp源碼

詳細(xì)的分析，可以在源碼注釋倉庫下看到，里面有hyperapp各個源碼重要細(xì)節(jié)的分析。下面來介紹一下hyperapp源碼有意思的地方：

1. 麻雀雖小，五臟俱全

專注于視圖渲染&數(shù)據(jù)交互更新，在實(shí)現(xiàn)上也是恰到好處地實(shí)現(xiàn)這些功能。具備內(nèi)置狀態(tài)驅(qū)動的視圖更新引擎、標(biāo)準(zhǔn)VNode四板斧、DOM-diff機(jī)制。在這點(diǎn)來說，hyperapp處于新生期，需要具備完善的生態(tài)，才可以發(fā)揮出強(qiáng)大的內(nèi)核能力。

VNode四板斧：

// 基本的HTML標(biāo)簽都可以被抽象成如下形式：
// {
//   nodeName,
//   attributes,
//   children,
//   key
// }
// TextNode只有一個nodeValue，SVG也是比較特殊，所以在更新時候也會對這兩種類型做特殊處理

DOM-diff 原則：

// 1. 平級對比，非平級則認(rèn)為是不一樣的dom，直接鏟平重建
// 2. 只更新同類型節(jié)點(diǎn)，非同類型一樣鏟平重建
// 3. 盡可能利用現(xiàn)有dom，免除額外的刪除創(chuàng)建開銷，只需要重新插入(appendChild or insertBefore)
// 4. index&key相同的vdom，對應(yīng)的dom無需對比，直接復(fù)用，下一個！
2. 剛剛好，就是最好的

hyperapp在細(xì)看一些實(shí)現(xiàn)上，會覺得有些"不嚴(yán)謹(jǐn)"，可能會被鉆空子。比如：clone、get等函數(shù)實(shí)現(xiàn)，或者是Promise、Array的判斷。

事實(shí)上，這些函數(shù)用于在有標(biāo)準(zhǔn)DOM結(jié)構(gòu)的實(shí)現(xiàn)、自調(diào)用的源碼上，作為判斷能達(dá)到"剛剛好"的要求。既不會浪費(fèi)性能體積，也不會導(dǎo)致出錯。

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的兼容性，以最優(yōu)形態(tài)抽象出適用于源碼的函數(shù)，便是最好的。

3. 簡單的生命周期

說出來你可能不信，hyperapp僅有四個生命周期函數(shù)。

他們分別是：

視圖渲染

初始渲染后：oncreate(DOMElement)

視圖更新后：onupdate(DOMElement)

視圖銷毀

銷毀前執(zhí)行：

onremove(DOMElement, action)

可以控制異步銷毀，需要手動調(diào)用action函數(shù)才會移除DOMElement

銷毀前通知：

ondestory(DOMElement)

不能控制自己被銷毀，可以在銷毀前做一些同步操作，比如釋放第三方庫，防止內(nèi)存泄露

這使得hyperapp比較適用于輕交互場景，配合webpack的模板語法編譯能力，可以實(shí)現(xiàn)非常輕量級的移動應(yīng)用。

4. 嚴(yán)格的key控制

在列表渲染時候，hyperapp嚴(yán)格要求組件提供對應(yīng)key屬性。

如果沒有對應(yīng)的key，相當(dāng)于默認(rèn)每次渲染都是全新的列表，這會涉及到原有列表DOM的銷毀、新列表DOM創(chuàng)建以及添加，大型列表上有可能會導(dǎo)致性能問題。

也正因?yàn)檫@個特性，使得在良好結(jié)構(gòu)下，hyperapp的渲染性能表現(xiàn)不亞于現(xiàn)有主流渲染庫。

5. SSR支持

Hyperapp雖然精巧，卻完全支持SSR特性。在初次渲染時候，會將現(xiàn)有DOM結(jié)構(gòu)轉(zhuǎn)成vdom，當(dāng)有行為觸發(fā)數(shù)據(jù)變動時，高效進(jìn)行dom-diff以更新現(xiàn)有視圖。

Link

Hyperapp倉庫：https://github.com/hyperapp/hyperapp/blob/master/src/index.js

源碼注釋倉庫：https://github.com/yesvods/hyperapp/blob/master/src/index.js#L13

舊版本渲染性能報(bào)告：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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107529.html

相關(guān)文章

  • 小而美的框架—hyperapp

    摘要：寫在最后總體來說，是一個小而美的框架，值得我們來折騰一下，以上均為本人理解，如有錯誤還請指出，不勝感激一個硬廣我所在團(tuán)隊(duì)工作地點(diǎn)在北京求大量前端社招實(shí)習(xí)，有意者可發(fā)簡歷至 寫在前面 沒錯，又是一個新的前端框架，hyperapp非常的小，僅僅1kb，當(dāng)然學(xué)習(xí)起來也是非常的簡單，可以說是1分鐘入門。聲明式：HyperApp 的設(shè)計(jì)基于Elm Architecture（這也意味著組件更多的是...

    haitiancoder 評論0 收藏0

  • Hydux: 一個 Elm-like 的 全功能的 Redux 替代品

    摘要：剛好最近需要做一個答題小游戲的應(yīng)用，不想再上全家桶了，一是體積太大，二是無論配置還是寫起來都太繁瑣。內(nèi)置的內(nèi)置的擴(kuò)展支持內(nèi)置的熱更新模塊然后就可以了簡單，可控，無痛的開發(fā)環(huán)境和代碼組織。 在學(xué)習(xí)和使用 Fable + Elmish 一段時間之后，對 Elm 架構(gòu)有了更具體的了解, 和預(yù)料中的一樣， Elm 風(fēng)格的框架果然還是和強(qiáng)類型的 Meta Language 語言更搭，只有一個字:...

    DobbyKim 評論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 JavaScript 篇

    摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。背后的故事本文是對于年之間世界發(fā)生的大事件的詳細(xì)介紹，闡述了從提出到角力到流產(chǎn)的前世今生。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎...

    Vixb 評論0 收藏0

  • 匯總2017JS項(xiàng)目，總結(jié)我們從中學(xué)到了什么？

    摘要：個人感悟自己公司也有項(xiàng)目在用，學(xué)的難點(diǎn)在于，其他的話上手挺快的，而且是尤大寫的，中文文檔也很完整，很適合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 當(dāng)紅辣子雞——vue 和去年一樣，vue是js項(xiàng)目中點(diǎn)贊數(shù)增加最多的，我們可以看下圖： showImg(https://se...

    dantezhao 評論0 收藏0

  • 前端開源項(xiàng)目周報(bào)0214

    摘要：由出品的前端開源項(xiàng)目周報(bào)第八期來啦。我們的前端開源周報(bào)集合了一周來新收錄的優(yōu)質(zhì)的前端開源項(xiàng)目，方便前端開發(fā)人員便捷的找到自己需要的項(xiàng)目工具等。 由OpenDigg?出品的前端開源項(xiàng)目周報(bào)第八期來啦。我們的前端開源周報(bào)集合了OpenDigg一周來新收錄的優(yōu)質(zhì)的前端開源項(xiàng)目，方便前端開發(fā)人員便捷的找到自己需要的項(xiàng)目工具等。qart.js 合并圖片和二維碼 showImg(https://s...

    Nosee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<