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-11-05 14:56:29