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

2019年8月24日 257次阅读 来源: yy149174

Riot.js是什么？

Riot 具有建立当代客户端运用的一切必须的身分：

  • “相应式” 视图层用来建立用户界面
  • 用来在各自力模块之间举行通讯的事宜库
  • 用来治理URL和浏览器回退按钮的路由器(Router)

Riot 只管不运用强迫的划定规矩，而是供应最基础的东西，愿望你能够有创意地运用它们。这类天真的体式格局将运用层面的大的架构决议计划交还给开辟者。

为何须要一个新的 UI 库?

简朴的说，它跟React相似，专注于view层，能够明白成不那末痴肥的 React + Polymer。并没有从新发现轮子，而是从已有的东西中提取英华，构建出只管简朴的东西。

Riot有什么特性?

  • Riot 在一切浏览器上支撑自定义标签。
  • 对浏览友爱

自定义标签许可你用HTML来编写庞杂的用户界面。你的运用会长成这个模样:

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

  • 假造 DOM

    • 保证最少许的DOM 更新和数据活动
    • 支撑自定义标签的服务端衬着，支撑单言语运用

  • 与规范保持一致

    • 没有专有的事宜体系
    • 衬着出的 DOM 节点能够放心肠用别的东西(库)举行操纵
    • 不请求分外的 HTML 根元素或 data- 属性
    • 与 jQuery 友爱共存

  • 异常低的进修本钱

    • 与别的 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。

    • 更少的bug
    • 剖析更快，下载更敏捷
    • 轻易嵌入. 库应当比全部运用小
    • 保护工作量更小

基础实行道理

一个riot自定义标签在一样平常开辟中从源码到呈如今页面上重要分为三步：编译(平常应用官方自带编译东西)、注册(riot.tag())和加载(riot.mount())，如下图所示：

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

自定义 Tag 的建立历程是如许的:

  1. 建立标签实例
  2. 标签定义中的JavaScript被实行
  3. HTML 中的表达式被初次盘算并初次触发 “update” 事宜
  4. 标签被加载 (mount) 到页面上，触发 “mount” 事宜

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

  1. 当一个事宜处理器被挪用（如上面ToDo示例中的toggle要领）后自动更新。你也能够在事宜处理器中设置 e.preventUpdate = true 来制止这类行动。
  2. 当前标签实例的 this.update() 要领被挪用时
  3. 当前标签的任何一个先人的 this.update() 被挪用时. 更新从父亲到儿子单向流传。
  4. 当 riot.update() 要领被挪用时, 会更新页面上一切的表达式。
  5. 每次标签实例被更新，都邑触发 “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，东西链更大而全。

    原文作者：yy149174
    原文地址: https://segmentfault.com/a/1190000012971182
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞