微型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来将数据单独提出来。

相关资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

Angular开发实践(五):深入解析变化监测

什么是变化监测 在使用 Angular 进行开发中,我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。...

41680
来自专栏Puppeteer学习

Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】防止重新渲染优化

24030
来自专栏葡萄城控件技术团队

在Silverlight中动态绑定页面报表(PageReport)的数据源

ActiveReports 7中引入了一种新的报表模型——PageReport(页面布局报表),这种报表模型又细分了两种具体显示形式: o    固定页面布局...

19890
来自专栏c#开发者

如何使用 Visual C# .NET 对 DataGrid Windows 控件执行分页

如何使用 Visual C# .NET 对 DataGrid Windows 控件执行分页 察看本文应用于的产品 文章编号 : 307710 最后修改...

386100
来自专栏Lambda

Markdown

欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Mark...

23050
来自专栏ASP.NETCore

WPF使ListBox支持手势多选功能

手势功能在手持平台应用较为丰富,PC上的应用还不是很多,不过还是有一些软件已应用这个功能如遨游浏览器等,应用得当还是相当可以丰富用户的互交体验的。

17130
来自专栏pangguoming

Angular2 -- 生命周期钩子

指令和组件的实例有一个生命周期:新建、更新和销毁。 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,OnInit接口的钩子方法...

10820
来自专栏腾讯NEXT学位

使用Sublime Text编辑器,你所不知道的11个秘密!

16920
来自专栏Kevin-ZhangCG

[ SSH框架 ] Struts2框架学习之四(自定义拦截器)

23060
来自专栏程序员互动联盟

【Windows编程】系列第八篇:创建通用对话框

Windows系统之所以是目前最流行的桌面系统,也是因为Windows有一套标准化,统一友好的交互界面,比如菜单、工具栏、状态栏以及各个控件。当然除了这些单独的...

361140

扫码关注云+社区

领取腾讯云代金券