Riot.js——一个小而美的JS框架

时间 2019-11-09

标签 riot.js riot 一个小而美的框架栏目 JavaScript 繁體版

原文原文链接

Riot.js是什么？

Riot 拥有建立现代客户端应用的全部必需的成分：css

“响应式” 视图层用来建立用户界面
用来在各独立模块之间进行通讯的事件库
用来管理URL和浏览器回退按钮的路由器(Router)

Riot 尽可能不使用强制的规则，而是提供最基本的工具，但愿你可以有创意地使用它们。这种灵活的方式将应用层面的大的架构决策交还给开发者。html

为何须要一个新的 UI 库?

简单的说，它跟React相似，专一于view层，能够理解成不那么臃肿的 React + Polymer。并无从新发明轮子，而是从已有的工具中提取精华，构建出尽可能简单的工具。vue

Riot有什么特色?

Riot 在全部浏览器上支持自定义标签。
对阅读友好

自定义标签容许你用HTML来编写复杂的用户界面。你的应用会长成这个样子:webpack

<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>

虚拟 DOMgit
- 保证最少许的DOM 更新和数据流动
- 支持自定义标签的服务端渲染，支持单语言应用
与标准保持一致github
- 没有专有的事件系统
- 渲染出的 DOM 节点能够放心地用其它工具(库)进行操做
- 不要求额外的 HTML 根元素或 data- 属性
- 与 jQuery 友好共存
很是低的学习成本web
- 与其它 UI 库比较，Riot 所提供的 API 方法的数量要少 10 至 100倍。这意味着须要学习的内容更少。须要阅读的书籍和指南文档更少。
- 专有的内容更少，而更多符合标准的成分。

你能够感觉下，这是 Riot 写的Todo：编程

<todo>

  <h3>{ opts.title }</h3>

  <ul>
    <li each={ items }>
      <label class={ completed: done }>
        <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
      </label>
    </li>
  </ul>

  <form onsubmit={ add }>
    <input name="input" onkeyup={ edit }>
    <button disabled={ !text }>Add #{ items.length + 1 }</button>
  </form>

  <script>
    this.disabled = true

    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 = ''
      }
    }

    toggle(e) {
      var item = e.item
      item.done = !item.done
      return true
    }
  </script>

</todo>

体积极小，压缩以后只有10.36KB。api
- 更少的bug
- 解析更快，下载更迅速
- 方便嵌入. 库应该比整个应用小
- 维护工做量更小

基本执行原理

一个riot自定义标签在平常开发中从源码到呈如今页面上主要分为三步：编译(通常利用官方自带编译工具)、注册(riot.tag())和加载(riot.mount())，以下图所示：浏览器

自定义 Tag 的建立过程是这样的:

建立标签实例
标签订义中的JavaScript被执行
HTML 中的表达式被首次计算并首次触发 “update” 事件
标签被加载 (mount) 到页面上，触发 “mount” 事件

加载完成后，表达式会在如下时机被更新:

当一个事件处理器被调用（如上面ToDo示例中的toggle方法）后自动更新。你也能够在事件处理器中设置 e.preventUpdate = true 来禁止这种行为。
当前标签实例的 this.update() 方法被调用时
当前标签的任何一个祖先的 this.update() 被调用时. 更新从父亲到儿子单向传播。
当 riot.update() 方法被调用时, 会更新页面上全部的表达式。
每次标签实例被更新，都会触发 “update” 事件。

因为表达式的首次计算发生在加载以前，因此不会有相似 <img src={ src }> 计算失败之类的意外问题。

跟Vue的异同?

如今国内最火的js框架当属Vuejs了，Riot跟其相同点：

提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
使用模版编程，将html、css、script以组件为单元放在tag文件中。
支持服务端渲染。

不一样点：

Riot 有更趋近于原生的编程体验，不须要记任何指令，直接onclick、onsubmit便可。
体积很小，加上 riot-router 也不过11kb。
Vue 发展至今，已经略显臃肿了，Riot 源码更易阅读、定制。

Riot的使用场景？

从最开始1kb的1.0版本，到如今的3.8版本，Riot 已经趋于稳定，彻底能够用于生产环境。

可是在国内，相关的资料不多，因此更适合定制化比较高的项目。
若是你用腻了 Vue、React ，那么也能够试试更易上手的 Riot，在你掌握前二者之一的状况下，几乎不须要学习成本。
相对来讲，微型场景会更适合 Riot，不想要太多的外部依赖，又须要组件化、数据驱动等更现代化框架的能力。

构建工具

好用的 Riot 构建工具并很少，因此我参考vue-webpack写了2个脚手架，能够快速投入使用：

riot-simple，简单快速启动。

riot-startkit，工具链更大而全。