Riot.js 特点概述
- ??自定义标签??
Riot.js 支持在IE8+中自定义标签，并且这些标签是人类可读的
//demo 1
<todo> <!-- layout --> <h3>{ opts.title }</h3>
<ul>
<li each={ item, i in items }>{ item }</li>
</ul>
<form onsubmit={ add }>
<input>
<button>Add #{ items.length + 1 }</button>
</form> <!-- logic --> <script>
this.items = []
add(e) { var input = e.target[0] this.items.push(input.value)
input.value = ‘‘
} </script></todo>
标签的命名由你决定
<body>
<h1>Acme community</h1>
<forum-header/>
<forum-content>
<forum-threads/>
<forum-sidebar/>
</forum-content>
<forum-footer/>
<script>riot.mount(‘*‘, { api: forum_api })</script></body>
这语法就像React+Polymer，嗯，不过学习曲线非常小。标签的属性可以用一种很干净的方法加进去。
- Virtual DOM
虚拟DOM是React这类框架提供的重要特性之一，Riot.js也提供了这个特性的一部分功能
- 和React一样，任何DOM操作都将进行比对后插入真实的DOM，保证DOM操作熟练最小化
- 单向响应的数据流，只能从父节点向子节点传递
- 大部分表达式都可以通过（服务器）预编译并缓存来提高性能
- 生命周期事件，可以控制整个流程
- 贴近标准
??Riot.js有一些和其他框架不同的地方??
- ??没有单独定义一套事件系统
- 完美支持IE8
- 渲染过的DOM可以被其他库100%控制
- 没有定义HTML根元素（笔者注，这里应该是指Angular的ngBody），也没有使用data-属性
- 懒人专用语法
Riot.js的一个设计目标是用尽可能小的语法改动来实现强大的功能
- 很快捷的基本语法：class={ enabled: is_enabled, hidden: hasErrors() }
- 没有React那额外的render、state、construtor什么什么的
- 要插入一个属性？
Add #{ items.length + 1 }orclass="item { selected: flag }" - 在预编译之前用<script>标签来包裹JS代码，可有可无（笔者注，只能在额外的需要预编译的.tag文件中这么用）
- 可以用ES6、TypeScript、CoffeeScript或者其他你喜欢的JS扩展语言
- 体积小但功能全
Riot.js比起React、Ploymer什么的体积小的多的多（压缩后不超过5K），但提供了大部分常用的功能
像事件库、路由之类的，用来创建 Reactive 的用户界面
- 细节特性
- Riot.js不像React，是基于DOM而不是基于字符串的，初始化组件时，Riot会遍历一课DOM树，然后从树中提出表达式并放进一个数组，每个表达式都有一个指向DOM节点的“指针”，每次运行这些表达式其实是先计算这些表达式再和DOM比较，当某个值改变的时候那个DOM节点也会改变。也可以认为Riot有一个“虚拟DOM”，只是简单的多（笔者注，由于Riot没有组件机制，整个页面就是一个“组件”，如果页面DOM结构很大的话，性能会很差，因为它会遍历整个DOM，和Angular初始化时一样）。由于这些表达式很快速，并且能被缓存更新周期，所以做100或者1000个表达式几乎只要1ms。因为HTML布局在每次更新后会随机修改，所以React的同步算法是很复杂的，这是个很大的挑战，FB的工程师能搞定真的很厉害！我们认为可以进一步避免复杂的比较，Riot里面HTML结构是定死的，只有“loop”和条件能增加或者删除元素，比如，一个<div>是不能被转换成<label>的，Riot只会更新那些没有复杂的子树替换的表达式。
- React只处理UI，专注一个点是很正确的决策。FB推荐开发者用Flux去结构化客户端代码，这是一种比框架的庞大的模式，让人脑洞大开。Riot只捆绑了一个自定义标签、一个事件触发器（叫Oservable）还有一个Router，我们相信这是客户端APP的基本模块，事件负责模块化，Router负责URL还有后退按钮（笔者注，Riot可没集成Pjax。。），自定义标签负责UI。就像Flux，Riot就是这么个灵活的、给开发者更多架构决策空间。亲们可以用Router和Oservable来做一个类似于Flux的架构
- 和Polymer比较起来，在概念上差不多，细节的差别还是很大滴。Riot只更新不得不被更新的、需要改动HTML展示数据的DOM节点；Polymer的语法更复杂；P导入独立组件时是这样的：link rel="import"，P必须用XHRs去排列他们，这样很慢也很痛苦，Riot用script src 来导入，你可扩展Riot，把你常用的几个标签组合起来封装成新工具；P是用双向数据绑定的；P没法在服务器预编译。
- 最后扯一句，Riot比上面两个的体积小22倍
笔者注
从官网介绍来看Riot是很强大的，不过亲们要知道的是体积越少说明功能越简单，很多细节需要自己去增加，下面笔者列出一些相比React缺失的特性以及列出笔者认为合适的使用场景
- Riot.js没有React最重要的“组件化”特性，甚至不是完整的MVP（整个就是一个M一个V一个P，没有分离代码的机制），自然也没有Props这类东西，所谓“单向数据流”，需要你自己扩展
- Riot.js 2.X开始不再注重“MVP”，这个特性几乎体现不出来了，Riot的模块化更多只是用不同“事件”来区分
- Riot.js 的性能嘛。。在一个稍大的APP上其实势必React差一点的。。毕竟两个“虚拟DOM”是不同的实现
- Riot.js很多“特性”都只是个规范（比如Router），并没有实现和封装，这需要你自己来，当然，插件机制还没有做好呢，目前说的“灵活”更多来自于空白Undefined，而非选择的多样化
所以可能的使用场景是：
- 一个简单的WebApp，没有太多的JS代码，也不是很关注“组件化”
- 简单的手机App，或者“无后台”的客户端WebApp（即服务器只传一堆数据，而渲染界面之类的工作全部交给客户端）
嗯，笔者一直在强调“小型”，因为除非你自己扩展Riot，否则这只能用在单人团队上。
当然Riot也有很多优秀的特性，官网的介绍里可没说
- Riot.js 的“loop”特性非常适合新闻类APP等需要展示大量遍历和渲染List的场景
- Riot.js 提供了类似JSX的JSHTMLCSS混写特性，只是JSX是把HTML写在JS里，而Riot.js是把JS插到HTML里。不用担心JS和HTML会黏起来，Riot.js提供了一套很简单的模板引擎用于分离JS和HTML
时间： 2024-08-29 21:04:54