成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Riot.js——一個(gè)小而美的JS框架

tolerious / 2834人閱讀

摘要：專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時(shí)當(dāng)前標(biāo)簽的任何一個(gè)祖先的被調(diào)用時(shí)更新從父親到兒子單向傳播。相對(duì)來(lái)說(shuō)，微型場(chǎng)景會(huì)更適合，不想要太多的外部依賴，又需要組件化數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。

Riot.js是什么？

Riot 擁有創(chuàng)建現(xiàn)代客戶端應(yīng)用的所有必需的成分：

“響應(yīng)式” 視圖層用來(lái)創(chuàng)建用戶界面

用來(lái)在各獨(dú)立模塊之間進(jìn)行通信的事件庫(kù)

用來(lái)管理URL和瀏覽器回退按鈕的路由器(Router)

Riot 盡量不使用強(qiáng)制的規(guī)則，而是提供最基本的工具，希望你能夠有創(chuàng)意地使用它們。這種靈活的方式將應(yīng)用層面的大的架構(gòu)決策交還給開(kāi)發(fā)者。

為什么需要一個(gè)新的 UI 庫(kù)?

簡(jiǎn)單的說(shuō)，它跟React類似，專注于view層，可以理解成不那么臃腫的 React + Polymer。并沒(méi)有重新發(fā)明輪子，而是從已有的工具中提取精華，構(gòu)建出盡量簡(jiǎn)單的工具。

Riot有什么特點(diǎn)?

Riot 在所有瀏覽器上支持自定義標(biāo)簽。

對(duì)閱讀友好

自定義標(biāo)簽允許你用HTML來(lái)編寫(xiě)復(fù)雜的用戶界面。你的應(yīng)用會(huì)長(zhǎng)成這個(gè)樣子:



  
Acme community

虛擬 DOM

保證最少量的DOM 更新和數(shù)據(jù)流動(dòng)

支持自定義標(biāo)簽的服務(wù)端渲染，支持單語(yǔ)言應(yīng)用

與標(biāo)準(zhǔn)保持一致

沒(méi)有專有的事件系統(tǒng)

渲染出的 DOM 節(jié)點(diǎn)可以放心地用其它工具(庫(kù))進(jìn)行操作

不要求額外的 HTML 根元素或 data- 屬性

與 jQuery 友好共存

非常低的學(xué)習(xí)成本

與其它 UI 庫(kù)比較，Riot 所提供的 API 方法的數(shù)量要少 10 至 100倍。這意味著需要學(xué)習(xí)的內(nèi)容更少。需要閱讀的書(shū)籍和指南文檔更少。

專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。

你可以感受下，這是 Riot 寫(xiě)的Todo：



  
{ opts.title }


  
    
    
  • 
      
    
    •

體積極小，壓縮之后只有10.36KB。

更少的bug

解析更快，下載更迅速

方便嵌入. 庫(kù)應(yīng)該比整個(gè)應(yīng)用小

維護(hù)工作量更小

基本執(zhí)行原理

一個(gè)riot自定義標(biāo)簽在日常開(kāi)發(fā)中從源碼到呈現(xiàn)在頁(yè)面上主要分為三步：編譯(一般利用官方自帶編譯工具)、注冊(cè)(riot.tag())和加載(riot.mount())，如下圖所示：

自定義 Tag 的創(chuàng)建過(guò)程是這樣的:

創(chuàng)建標(biāo)簽實(shí)例

標(biāo)簽定義中的JavaScript被執(zhí)行

HTML 中的表達(dá)式被首次計(jì)算并首次觸發(fā) “update” 事件

標(biāo)簽被加載 (mount) 到頁(yè)面上，觸發(fā) “mount” 事件

加載完成后，表達(dá)式會(huì)在以下時(shí)機(jī)被更新:

當(dāng)一個(gè)事件處理器被調(diào)用（如上面ToDo示例中的toggle方法）后自動(dòng)更新。你也可以在事件處理器中設(shè)置 e.preventUpdate = true 來(lái)禁止這種行為。

當(dāng)前標(biāo)簽實(shí)例的 this.update() 方法被調(diào)用時(shí)

當(dāng)前標(biāo)簽的任何一個(gè)祖先的 this.update() 被調(diào)用時(shí). 更新從父親到兒子單向傳播。

當(dāng) riot.update() 方法被調(diào)用時(shí), 會(huì)更新頁(yè)面上所有的表達(dá)式。

每次標(biāo)簽實(shí)例被更新，都會(huì)觸發(fā) “update” 事件。

由于表達(dá)式的首次計(jì)算發(fā)生在加載之前，所以不會(huì)有類似 計(jì)算失敗之類的意外問(wèn)題。

跟Vue的異同?

現(xiàn)在國(guó)內(nèi)最火的js框架當(dāng)屬Vuejs了，Riot跟其相同點(diǎn)：

提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件。

使用模版編程，將html、css、script以組件為單元放在tag文件中。

支持服務(wù)端渲染。

不同點(diǎn)：

Riot 有更趨近于原生的編程體驗(yàn)，不需要記任何指令，直接onclick、onsubmit即可。

體積很小，加上 riot-router 也不過(guò)11kb。

Vue 發(fā)展至今，已經(jīng)略顯臃腫了，Riot 源碼更易閱讀、定制。

Riot的使用場(chǎng)景？

從最開(kāi)始1kb的1.0版本，到現(xiàn)在的3.8版本，Riot 已經(jīng)趨于穩(wěn)定，完全可以用于生產(chǎn)環(huán)境。

但是在國(guó)內(nèi)，相關(guān)的資料很少，所以更適合定制化比較高的項(xiàng)目。

如果你用膩了 Vue、React ，那么也可以試試更易上手的 Riot，在你掌握前兩者之一的情況下，幾乎不需要學(xué)習(xí)成本。

相對(duì)來(lái)說(shuō)，微型場(chǎng)景會(huì)更適合 Riot，不想要太多的外部依賴，又需要組件化、數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。

構(gòu)建工具

好用的 Riot 構(gòu)建工具并不多，所以我參考vue-webpack寫(xiě)了2個(gè)腳手架，可以快速投入使用：

riot-simple，簡(jiǎn)單快速啟動(dòng)。

riot-startkit，工具鏈更大而全。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92735.html

相關(guān)文章

  • Riot.js——一個(gè)小而美的JS框架

    摘要：專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時(shí)當(dāng)前標(biāo)簽的任何一個(gè)祖先的被調(diào)用時(shí)更新從父親到兒子單向傳播。相對(duì)來(lái)說(shuō)，微型場(chǎng)景會(huì)更適合，不想要太多的外部依賴，又需要組件化數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。 Riot.js是什么？ Riot 擁有創(chuàng)建現(xiàn)代客戶端應(yīng)用的所有必需的成分： 響應(yīng)式 視圖層用來(lái)創(chuàng)建用戶界面 用來(lái)在各獨(dú)立模塊之間進(jìn)行通信的事件庫(kù) 用來(lái)管理URL和瀏覽器回...

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

  • Fre：又一個(gè)小而美的前端MVVM框架

    摘要：，大家好，好久不賤呢最近因?yàn)榭戳艘恍┑男≌f(shuō)，整個(gè)人都比較致郁就在昨天，我用了一天的時(shí)間寫(xiě)了，又一個(gè)小而美的前端框架可能你覺(jué)得，有了和，沒(méi)必要再寫(xiě)一個(gè)了我覺(jué)得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應(yīng)該是。 halo，大家好，好久不賤呢！ 最近因?yàn)榭戳艘恍?be 的小說(shuō)，整個(gè)人都比較致郁::>__+ {state.count--}}>- ...

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

  • Fre：又一個(gè)小而美的前端MVVM框架

    摘要：，大家好，好久不賤呢最近因?yàn)榭戳艘恍┑男≌f(shuō)，整個(gè)人都比較致郁就在昨天，我用了一天的時(shí)間寫(xiě)了，又一個(gè)小而美的前端框架可能你覺(jué)得，有了和，沒(méi)必要再寫(xiě)一個(gè)了我覺(jué)得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應(yīng)該是。 halo，大家好，好久不賤呢！ 最近因?yàn)榭戳艘恍?be 的小說(shuō)，整個(gè)人都比較致郁::>__+ {state.count--}}>- ...

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

  • 小而美的框架—hyperapp

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<