Riot.js——一個小而美的JS框架

nemo 發布于2019-08-01 18:27 / 1532人閱讀

摘要：專有的內容更少，而更多符合標準的成分。當前標簽實例的方法被調用時當前標簽的任何一個祖先的被調用時更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數據驅動等更現代化框架的能力。

Riot.js是什么？

Riot 擁有創建現代客戶端應用的所有必需的成分：

“響應式” 視圖層用來創建用戶界面

用來在各獨立模塊之間進行通信的事件庫

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

Riot 盡量不使用強制的規則，而是提供最基本的工具，希望你能夠有創意地使用它們。這種靈活的方式將應用層面的大的架構決策交還給開發者。

為什么需要一個新的 UI 庫?

簡單的說，它跟React類似，專注于view層，可以理解成不那么臃腫的 React + Polymer。并沒有重新發明輪子，而是從已有的工具中提取精華，構建出盡量簡單的工具。

Riot有什么特點?

Riot 在所有瀏覽器上支持自定義標簽。

對閱讀友好

自定義標簽允許你用HTML來編寫復雜的用戶界面。你的應用會長成這個樣子:



  Acme community

虛擬 DOM

保證最少量的DOM 更新和數據流動

支持自定義標簽的服務端渲染，支持單語言應用

與標準保持一致

沒有專有的事件系統

渲染出的 DOM 節點可以放心地用其它工具(庫)進行操作

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

與 jQuery 友好共存

非常低的學習成本

與其它 UI 庫比較，Riot 所提供的 API 方法的數量要少 10 至 100倍。這意味著需要學習的內容更少。需要閱讀的書籍和指南文檔更少。

專有的內容更少，而更多符合標準的成分。

你可以感受下，這是 Riot 寫的Todo：



  { opts.title }

  
    
      
         { title }

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

更少的bug

解析更快，下載更迅速

方便嵌入. 庫應該比整個應用小

維護工作量更小

基本執行原理

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

自定義 Tag 的創建過程是這樣的:

創建標簽實例

標簽定義中的JavaScript被執行

HTML 中的表達式被首次計算并首次觸發 “update” 事件

標簽被加載 (mount) 到頁面上，觸發 “mount” 事件

加載完成后，表達式會在以下時機被更新:

當一個事件處理器被調用（如上面ToDo示例中的toggle方法）后自動更新。你也可以在事件處理器中設置 e.preventUpdate = true 來禁止這種行為。

當前標簽實例的 this.update() 方法被調用時

當前標簽的任何一個祖先的 this.update() 被調用時. 更新從父親到兒子單向傳播。

當 riot.update() 方法被調用時, 會更新頁面上所有的表達式。

每次標簽實例被更新，都會觸發 “update” 事件。

由于表達式的首次計算發生在加載之前，所以不會有類似計算失敗之類的意外問題。

跟Vue的異同?

現在國內最火的js框架當屬Vuejs了，Riot跟其相同點：

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

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

支持服務端渲染。

不同點：

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

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

Vue 發展至今，已經略顯臃腫了，Riot 源碼更易閱讀、定制。

Riot的使用場景？

從最開始1kb的1.0版本，到現在的3.8版本，Riot 已經趨于穩定，完全可以用于生產環境。

但是在國內，相關的資料很少，所以更適合定制化比較高的項目。

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

相對來說，微型場景會更適合 Riot，不想要太多的外部依賴，又需要組件化、數據驅動等更現代化框架的能力。

構建工具

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

riot-simple，簡單快速啟動。

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

GPU云服務器云服務器小而搭建一個java框架美的集團美的營銷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51739.html

Riot.js——一個小而美的JS框架

摘要：專有的內容更少，而更多符合標準的成分。當前標簽實例的方法被調用時當前標簽的任何一個祖先的被調用時更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數據驅動等更現代化框架的能力。 Riot.js是什么？ Riot 擁有創建現代客戶端應用的所有必需的成分：響應式視圖層用來創建用戶界面用來在各獨立模塊之間進行通信的事件庫用來管理URL和瀏覽器回...

tolerious 2019-08-22 13:59 評論0 收藏0
Fre：又一個小而美的前端MVVM框架

摘要：，大家好，好久不賤呢最近因為看了一些的小說，整個人都比較致郁就在昨天，我用了一天的時間寫了，又一個小而美的前端框架可能你覺得，有了和，沒必要再寫一個了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應該是。 halo，大家好，好久不賤呢！最近因為看了一些 be 的小說，整個人都比較致郁::>__+ {state.count--}}>- ...

LittleLiByte 2019-08-02 16:07 評論0 收藏0
Fre：又一個小而美的前端MVVM框架

摘要：，大家好，好久不賤呢最近因為看了一些的小說，整個人都比較致郁就在昨天，我用了一天的時間寫了，又一個小而美的前端框架可能你覺得，有了和，沒必要再寫一個了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應該是。 halo，大家好，好久不賤呢！最近因為看了一些 be 的小說，整個人都比較致郁::>__+ {state.count--}}>- ...

nanfeiyan 2019-08-23 14:06 評論0 收藏0
小而美的框架—hyperapp

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

haitiancoder 2019-08-21 16:50 評論0 收藏0