riot.js教程【一】簡介

時間 2019-11-24

標籤 riot.js riot 教程簡介欄目 JavaScript 简体版

原文原文鏈接

題記html

這是一個系列文章的第一篇前端

若是關注riot.js的人，能夠關注個人博客；react

我接下來會持續不斷的發這一塊的文章；jquery

系列文章內容大多來自官網翻譯；編程

Riotjs簡介api

Riotjs是一款簡單的、優雅的、組件化UI前端開發框架；瀏覽器

他支持自定義標籤（custom tags），擁有使人愉悅的語法，優雅的API和很是小的體積；緩存

爲何須要一個新的界面庫框架

前端開發框架的確已經很是多了，但仍是沒有使人足夠滿意的東西，reactjs貌似是來解決問題的，可是用過的人都知道，它有不少使人不爽的弱點，咱們相信Riotjs找到了解決問題的那個微妙的平衡點，足以讓開發者愉悅的用他解決界面問題；ide

自定義標籤（custom tags）

Riotjs爲全部瀏覽器帶來了自定義標籤

<todo>

<h3>{ opts.title }</h3>

<ul>

</ul>

<button>Add #{ items.length + 1 }</button>

</form>

<style>

h3 {

font-size: 14px;

}

</style>

this.items = []

add(e) {

e.preventDefault()

var input = this.refs.input

this.items.push(input.value)

input.value = ''

}

</script>

</todo>

自定義標籤把HTML和JS組合在一塊兒，使之成爲一個可複用的UI組件；

如你所見，riotjs有使人愉悅的語法和平緩的學習曲線；這是reactjs和polymer不能比的；

可讀性

你可使用自定義標籤建立複雜的用戶界面

來看看下面這個界面（若是你用傳統的寫法，會寫成什麼樣呢？）

<body>

<h1>Acme community</h1>

<forum-header/>

<forum-threads/>

<forum-sidebar/>

</div>

<forum-footer/>

</body>

Html語法是用來建立用戶界面的；

他具有可嵌套的標籤和標籤屬性；

這爲自定義標籤提供了基礎支撐；

Riotjs先把Riotjs標籤解析成純JS，再在瀏覽器內執行；

DOM綁定

最少的DOM更新

單向數據流：不管是更新仍是卸載，都是從父組件傳遞給子組件

爲了更高的性能，riotjs會預編譯表達式，緩存表達式結果；

爲了更好的可控性，riotjs提供了不少自定義標籤的生命週期事件；

支持服務端渲染

貼近標準

沒有專有的事件系統

不須要額外的附加庫

編譯渲染出來的DOM能夠被其餘庫自由的操縱；

不須要特別的HTML根標籤

DOM標籤上不須要data-屬性

能夠和jquery很好的兼容

工具鏈友好

可使用ES6，TypeScript，CoffeeScript，Jade，LiveScript等工具建立標籤；

可使用NPM，CommonJS，AMD，Bower，Component等工具整合項目；

可使用Gulp，Browserify，Grunt等工具進行開發；

極簡原則

極簡原則使得riotjs不一樣於其餘的類庫

易用的語法

Riotjs的主要設計目標就是建立一套極簡的標籤撰寫語法；

便捷的簡寫形式： class={ enabled: is_enabled, hidden: hasErrors() }

不用關心render, state, constructor

內聯表達式: Add #{ items.length + 1 } or class="item { selected: flag }"

不必定非得吧邏輯代碼放到<script>標籤內

ES6語法支持

平緩的學習曲線

Riotjs的API數量是同類js庫的1/10或者1/100

不須要花大力氣去學習

更少的專有的東西，更多的標準的東西；

體積很是小

polymer.html： 49.38KB (gzip)

react.min.js： 34.89KB (gzip)

riot.min.js：10.38KB (gzip)

更少的BUG

下載壓力更小，解析速度更快

可嵌入的，庫的體積應該比應用程序的體積小纔對

維護成本比較低，riot不須要一個很是龐大的團隊來維護他

麻雀雖小，五臟俱全

Riotjs擁有全部必要的模塊：

響應式界面編程所必須的模塊；

爲獨立的模塊編寫API所必須的事件庫；

控制URL前進後退功能所必須路由模塊

總結

Riot是普適性的WEB UI組件化解決方案，它就像React和Polymer的組合，而且它不會致使代碼爆炸；你能夠憑你的直覺使用它；他體積很小，幾近於無；它並非從新發明的輪子，他是採各家之長，並把事情作到極簡，極好；

咱們應該關注組件，而不是關注模版；

把有關聯的邏輯和展示放到一塊兒，作成一個組件；這樣咱們整個系統都會變的更加清晰；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。