資訊專欄INFORMATION COLUMN
摘要：專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時當(dāng)前標(biāo)簽的任何一個祖先的被調(diào)用時更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數(shù)據(jù)驅(qū)動等更現(xiàn)代化框架的能力。
Riot.js是什么？
Riot 擁有創(chuàng)建現(xiàn)代客戶端應(yīng)用的所有必需的成分：
“響應(yīng)式” 視圖層用來創(chuàng)建用戶界面
用來在各獨(dú)立模塊之間進(jìn)行通信的事件庫
用來管理URL和瀏覽器回退按鈕的路由器(Router)
Riot 盡量不使用強(qiáng)制的規(guī)則，而是提供最基本的工具，希望你能夠有創(chuàng)意地使用它們。這種靈活的方式將應(yīng)用層面的大的架構(gòu)決策交還給開發(fā)者。
為什么需要一個新的 UI 庫?簡單的說，它跟React類似，專注于view層，可以理解成不那么臃腫的 React + Polymer。并沒有重新發(fā)明輪子，而是從已有的工具中提取精華，構(gòu)建出盡量簡單的工具。
Riot有什么特點(diǎn)?Riot 在所有瀏覽器上支持自定義標(biāo)簽。
對閱讀友好
自定義標(biāo)簽允許你用HTML來編寫復(fù)雜的用戶界面。你的應(yīng)用會長成這個樣子:
Acme community
虛擬 DOM
保證最少量的DOM 更新和數(shù)據(jù)流動
支持自定義標(biāo)簽的服務(wù)端渲染，支持單語言應(yīng)用
與標(biāo)準(zhǔn)保持一致
沒有專有的事件系統(tǒng)
渲染出的 DOM 節(jié)點(diǎn)可以放心地用其它工具(庫)進(jìn)行操作
不要求額外的 HTML 根元素或 data- 屬性
與 jQuery 友好共存
非常低的學(xué)習(xí)成本
與其它 UI 庫比較，Riot 所提供的 API 方法的數(shù)量要少 10 至 100倍。這意味著需要學(xué)習(xí)的內(nèi)容更少。需要閱讀的書籍和指南文檔更少。
專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。
你可以感受下，這是 Riot 寫的Todo：
{ opts.title }
體積極小，壓縮之后只有10.36KB。
更少的bug
解析更快，下載更迅速
方便嵌入. 庫應(yīng)該比整個應(yīng)用小
維護(hù)工作量更小
基本執(zhí)行原理一個riot自定義標(biāo)簽在日常開發(fā)中從源碼到呈現(xiàn)在頁面上主要分為三步：編譯(一般利用官方自帶編譯工具)、注冊(riot.tag())和加載(riot.mount())，如下圖所示：
自定義 Tag 的創(chuàng)建過程是這樣的:
創(chuàng)建標(biāo)簽實(shí)例
標(biāo)簽定義中的JavaScript被執(zhí)行
HTML 中的表達(dá)式被首次計(jì)算并首次觸發(fā) “update” 事件
標(biāo)簽被加載 (mount) 到頁面上，觸發(fā) “mount” 事件
加載完成后，表達(dá)式會在以下時機(jī)被更新:
當(dāng)一個事件處理器被調(diào)用（如上面ToDo示例中的toggle方法）后自動更新。你也可以在事件處理器中設(shè)置 e.preventUpdate = true 來禁止這種行為。
當(dāng)前標(biāo)簽實(shí)例的 this.update() 方法被調(diào)用時
當(dāng)前標(biāo)簽的任何一個祖先的 this.update() 被調(diào)用時. 更新從父親到兒子單向傳播。
當(dāng) riot.update() 方法被調(diào)用時, 會更新頁面上所有的表達(dá)式。
每次標(biāo)簽實(shí)例被更新，都會觸發(fā) “update” 事件。
由于表達(dá)式的首次計(jì)算發(fā)生在加載之前，所以不會有類似 計(jì)算失敗之類的意外問題。
現(xiàn)在國內(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 也不過11kb。
Vue 發(fā)展至今，已經(jīng)略顯臃腫了，Riot 源碼更易閱讀、定制。
Riot的使用場景？從最開始1kb的1.0版本，到現(xiàn)在的3.8版本，Riot 已經(jīng)趨于穩(wěn)定，完全可以用于生產(chǎn)環(huán)境。
但是在國內(nèi)，相關(guān)的資料很少，所以更適合定制化比較高的項(xiàng)目。
如果你用膩了 Vue、React ，那么也可以試試更易上手的 Riot，在你掌握前兩者之一的情況下，幾乎不需要學(xué)習(xí)成本。
相對來說，微型場景會更適合 Riot，不想要太多的外部依賴，又需要組件化、數(shù)據(jù)驅(qū)動等更現(xiàn)代化框架的能力。
構(gòu)建工具好用的 Riot 構(gòu)建工具并不多，所以我參考vue-webpack寫了2個腳手架，可以快速投入使用：
riot-simple，簡單快速啟動。
riot-startkit，工具鏈更大而全。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51739.html
摘要：專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時當(dāng)前標(biāo)簽的任何一個祖先的被調(diào)用時更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數(shù)據(jù)驅(qū)動等更現(xiàn)代化框架的能力。 Riot.js是什么？ Riot 擁有創(chuàng)建現(xiàn)代客戶端應(yīng)用的所有必需的成分： 響應(yīng)式 視圖層用來創(chuàng)建用戶界面 用來在各獨(dú)立模塊之間進(jìn)行通信的事件庫 用來管理URL和瀏覽器回...
摘要：，大家好，好久不賤呢最近因?yàn)榭戳艘恍┑男≌f，整個人都比較致郁就在昨天，我用了一天的時間寫了，又一個小而美的前端框架可能你覺得，有了和，沒必要再寫一個了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應(yīng)該是。 halo，大家好，好久不賤呢！ 最近因?yàn)榭戳艘恍?be 的小說，整個人都比較致郁::>__+ {state.count--}}>- ...
摘要：，大家好，好久不賤呢最近因?yàn)榭戳艘恍┑男≌f，整個人都比較致郁就在昨天，我用了一天的時間寫了，又一個小而美的前端框架可能你覺得，有了和，沒必要再寫一個了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應(yīng)該是。 halo，大家好，好久不賤呢！ 最近因?yàn)榭戳艘恍?be 的小說，整個人都比較致郁::>__+ {state.count--}}>- ...
摘要：寫在最后總體來說，是一個小而美的框架，值得我們來折騰一下，以上均為本人理解，如有錯誤還請指出，不勝感激一個硬廣我所在團(tuán)隊(duì)工作地點(diǎn)在北京求大量前端社招實(shí)習(xí)，有意者可發(fā)簡歷至 寫在前面 沒錯，又是一個新的前端框架，hyperapp非常的小，僅僅1kb，當(dāng)然學(xué)習(xí)起來也是非常的簡單，可以說是1分鐘入門。聲明式：HyperApp 的設(shè)計(jì)基于Elm Architecture（這也意味著組件更多的是...
閱讀 3575·2023-04-25 14:20
閱讀 1196·2021-09-10 10:51
閱讀 1154·2019-08-30 15:53
閱讀 463·2019-08-30 15:43
閱讀 2316·2019-08-30 14:13
閱讀 2797·2019-08-30 12:45
閱讀 1207·2019-08-29 16:18
閱讀 1166·2019-08-29 16:12
