Riot.js 中文文档(1)

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 } or class="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中只能用Loop和Conditions来改动HTML

  • 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


中文文档(2)传送门

你可能感兴趣的:(js,Riot.js)