亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Hyperapp源碼分析

sixgo / 2775人閱讀

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

前言

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

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

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

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

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

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

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

大話Hyperapp源碼

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

1. 麻雀雖小，五臟俱全

專注于視圖渲染&數(shù)據(jù)交互更新，在實(shí)現(xiàn)上也是恰到好處地實(shí)現(xiàn)這些功能。具備內(nèi)置狀態(tài)驅(qū)動(dòng)的視圖更新引擎、標(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只有一個(gè)nodeValue，SVG也是比較特殊，所以在更新時(shí)候也會(huì)對(duì)這兩種類型做特殊處理

DOM-diff 原則：

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

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

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

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. 簡(jiǎn)單的生命周期

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

他們分別是：

視圖渲染

初始渲染后：oncreate(DOMElement)

視圖更新后：onupdate(DOMElement)

視圖銷毀

銷毀前執(zhí)行：

onremove(DOMElement, action)

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

銷毀前通知：

ondestory(DOMElement)

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

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

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

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

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

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

5. SSR支持

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

Link

Hyperapp倉(cāng)庫(kù)：https://github.com/hyperapp/hyperapp/blob/master/src/index.js

源碼注釋倉(cāng)庫(kù)：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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107529.html

相關(guān)文章

  • 小而美的框架—hyperapp

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

    haitiancoder 評(píng)論0 收藏0

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

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

    DobbyKim 評(píng)論0 收藏0

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

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

    Vixb 評(píng)論0 收藏0

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

    摘要：個(gè)人感悟自己公司也有項(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 評(píng)論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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<