微型UI库Riot介绍
本文作者：IMWeb 黄龙 原文出处：IMWeb社区 未经同意，禁止转载
定义
Riot:类似 React 的微型 UI 库
特点:
- 自定义标签
- 快速上手的语法
- 虚拟 DOM
- 体积超小
- 很好的中文文档
自定义标签
Roit在所有浏览器上支持自定义标签
Riot 标签首先被 编译 成标准 JavaScript，然后在浏览器中运行。
虚拟 DOM
- 保证最少量的DOM 更新和数据流动
- 单向数据流: 更新和删除操作由父组件向子组件传播
- 表达式会进行预编译和缓存以保证性能
- 为更精细的控制提供生命周期事件
- 支持自定义标签的服务端渲染，支持单语言应用
与标准保持一致
- 没有专有的事件系统
- 渲染出的 DOM 节点可以放心地用其它工具（库）进行操作
- 不要求额外的 HTML 根元素或 data- 属性
- 与 jQuery 友好共存
简单，最小化
最小化是 Riot 区别于其它库的重要特点:
友好的语法
设计目标之一是尽量少写脚手架（boilerplate）代码就能实现强大的标签语法:
- 强大的简化写法:
class={ enabled: is_enabled, hidden: hasErrors() } - 不需要费脑记忆
render, state, constructor或shouldComponentUpdate - 直接插值:
Add #{ items.length + 1 }或class="item { selected: flag }" - 用
<script>标签来包含逻辑代码不是必需的 - 紧凑的 ES6 方法定义语法
非常低的学习成本
与其它 UI 库比较，Riot 所提供的 API 方法的数量要少 10 至 100倍。这意味着
需要学习的内容更少。需要阅读的书籍和指南文档更少。 专有的内容更少，而更多符合标准的成分。
麻雀极小
riot.min.js – 8.56KB
小的优点：
- 更少的bug
- 解析更快，下载更迅速
- 维护工作量更小
五脏俱全
Riot 拥有创建现代客户端应用的所有必需的成分:
- “响应式” 视图层用来创建用户界面
- 用来在各独立模块之间进行通信的事件库
- 用来管理URL和浏览器回退按钮的路由器（Router）
一个例子
/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来将数据单独提出来。
- riot todo简单版
- riot todo RiotControl版
- 有时间会弄一个Redux + Riot的demo
相关资料
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录