Riot:类似 React 的微型 UI 库
Roit在所有浏览器上支持自定义标签
Riot 标签首先被 编译 成标准 JavaScript,然后在浏览器中运行。
最小化是 Riot 区别于其它库的重要特点:
设计目标之一是尽量少写脚手架(boilerplate)代码就能实现强大的标签语法:
class={ enabled: is_enabled, hidden: hasErrors() }
render, state, constructor
或 shouldComponentUpdate
Add #{ items.length + 1 }
或 class="item { selected: flag }"
<script>
标签来包含逻辑代码不是必需的与其它 UI 库比较,Riot 所提供的 API 方法的数量要少 10 至 100倍。这意味着
需要学习的内容更少。需要阅读的书籍和指南文档更少。 专有的内容更少,而更多符合标准的成分。
riot.min.js – 8.56KB
小的优点:
Riot 拥有创建现代客户端应用的所有必需的成分:
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Riot例子</title>
</head>
<body>
<!-- 在body中任何位置放置自定义标签 -->
<todo></todo>
<!-- 包含标签定义 -->
<script type="riot/tag" src="./tags/todo.tag"></script><!--ignore-->
<!-- 包含 riot.js -->
<script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<!-- 加载标签实例 -->
<script>riot.mount('todo');</script>
</body>
</html>
/tags/todo.tag
<todo>
<ul>
<li each={ items.filter(whatShow) }>
<label class={ completed: done }>
<input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
</label>
</li>
</ul>
<div>
<input onkeyup={ edit } name='input' />
<button name onClick={ add }>
Add
</button>
<button disabled={ items.filter(onlyDone).length == 0 } onclick={ removeAllDone }>
X{ items.filter(onlyDone).length } </button>
</div>
<script>
var self = this;
this.items = opts.items || []
edit(e) {
this.text = e.target.value
}add(e) {
if (this.text) {
this.items.push({ title: this.text })
this.text = this.input.value = ''
}
}removeAllDone(e) {
this.items = this.items.filter(function(item) {
return !item.done
})
}// an two example how to filter items on the list
whatShow(item) {
return !item.hidden
}onlyDone(item) {
return item.done
}toggle(e) {
var item = e.item
item.done = !item.done
return true
}
</script>
<style scoped>
.completed {
text-decoration: line-through;
color: rgb(204, 204, 204);
}
</style>
</todo>
可以通过RiotControl来将数据单独提出来。