黄龙

1年前
  • 1590

    浏览
  • 1

    评论
  • 0

    收藏

微型UI库Riot介绍

本文作者:imweb 黄龙 原文出处:imweb社区 未经同意,禁止转载

定义

Riot:类似 React 的微型 UI 库

特点:

  • 自定义标签
  • 快速上手的语法
  • 虚拟 DOM
  • 体积超小
  • 很好的中文文档

自定义标签

Roit在所有浏览器上支持自定义标签

Riot 标签首先被 编译 成标准 JavaScript,然后在浏览器中运行。

虚拟 DOM

  • 保证最少量的DOM 更新和数据流动
  • 单向数据流: 更新和删除操作由父组件向子组件传播
  • 表达式会进行预编译和缓存以保证性能
  • 为更精细的控制提供生命周期事件
  • 支持自定义标签的服务端渲染,支持单语言应用

与标准保持一致

  • 没有专有的事件系统
  • 渲染出的 DOM 节点可以放心地用其它工具(库)进行操作
  • 不要求额外的 HTML 根元素或 data- 属性
  • 与 jQuery 友好共存

简单,最小化

最小化是 Riot 区别于其它库的重要特点:

友好的语法

设计目标之一是尽量少写脚手架(boilerplate)代码就能实现强大的标签语法:

  • 强大的简化写法: class={ enabled: is_enabled, hidden: hasErrors() }
  • 不需要费脑记忆 render, state, constructorshouldComponentUpdate
  • 直接插值: Add #{ items.length + 1 }class="item { selected: flag }"
  • <script>标签来包含逻辑代码不是必需的
  • 紧凑的 ES6 方法定义语法

非常低的学习成本

与其它 UI 库比较,Riot 所提供的 API 方法的数量要少 10 至 100倍。这意味着

需要学习的内容更少。需要阅读的书籍和指南文档更少。 专有的内容更少,而更多符合标准的成分。

麻雀极小

riot.min.js – 8.56KB

小的优点:

  • 更少的bug
  • 解析更快,下载更迅速
  • 维护工作量更小

五脏俱全

Riot 拥有创建现代客户端应用的所有必需的成分:

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

一个例子

/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Riot例子</title>
    </head>
    <body>
        <!-- 在body中任何位置放置自定义标签 -->
        <todo></todo>
        <!-- 包含标签定义 -->
        <script type="riot/tag" src="./tags/todo.tag"></script><!--ignore-->
        <!-- 包含 riot.js -->
        <script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
        <!-- 加载标签实例 -->
        <script>riot.mount('todo');</script>
    </body>
</html>

/tags/todo.tag

<todo>
    <ul>
   <li each={ items.filter(whatShow) }>
     <label class={ completed: done }>
       <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
     </label>
   </li>
 </ul>
    <div>
        <input onkeyup={ edit } name='input' />
        <button name onClick={ add }>
            Add
        </button>
        <button disabled={ items.filter(onlyDone).length == 0 } onclick={ removeAllDone }>
    X{ items.filter(onlyDone).length } </button>
    </div>
    <script>
    var self = this;
    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 = ''
      }
    }

    removeAllDone(e) {
      this.items = this.items.filter(function(item) {
        return !item.done
      })
    }

    // an two example how to filter items on the list
    whatShow(item) {
      return !item.hidden
    }

    onlyDone(item) {
      return item.done
    }

    toggle(e) {
      var item = e.item
      item.done = !item.done
      return true
    }
    </script>
    <style scoped>
    .completed {
        text-decoration: line-through;
        color: rgb(204, 204, 204);
    }
    </style>
</todo>

可以通过RiotControl来将数据单独提出来。

相关资料

1 条评论