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

tolerious 发布于2019-08-22 13:59 / 2760人阅读

摘要：专有的内容更少，而更多符合标准的成分。当前标签实例的方法被调用时当前标签的任何一个祖先的被调用时更新从父亲到儿子单向传播。相对来说，微型场景会更适合，不想要太多的外部依赖，又需要组件化数据驱动等更现代化框架的能力。

Riot.js是什么？

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

“响应式” 视图层用来创建用户界面

用来在各独立模块之间进行通信的事件库

用来管理URL和浏览器回退按钮的路由器(Router)

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

为什么需要一个新的 UI 库?

简单的说，它跟React类似，专注于view层，可以理解成不那么臃肿的 React + Polymer。并没有重新发明轮子，而是从已有的工具中提取精华，构建出尽量简单的工具。

Riot有什么特点?

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

对阅读友好

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



  Acme community

虚拟 DOM

保证最少量的DOM 更新和数据流动

支持自定义标签的服务端渲染，支持单语言应用

与标准保持一致

没有专有的事件系统

渲染出的 DOM 节点可以放心地用其它工具(库)进行操作

不要求额外的 HTML 根元素或 data- 属性

与 jQuery 友好共存

非常低的学习成本

与其它 UI 库比较，Riot 所提供的 API 方法的数量要少 10 至 100倍。这意味着需要学习的内容更少。需要阅读的书籍和指南文档更少。

专有的内容更少，而更多符合标准的成分。

你可以感受下，这是 Riot 写的Todo：



  { opts.title }

  
    
      
         { title }

体积极小，压缩之后只有10.36KB。

更少的bug

解析更快，下载更迅速

方便嵌入. 库应该比整个应用小

维护工作量更小

基本执行原理

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

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

创建标签实例

标签定义中的JavaScript被执行

HTML 中的表达式被首次计算并首次触发 “update” 事件

标签被加载 (mount) 到页面上，触发 “mount” 事件

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

当一个事件处理器被调用（如上面ToDo示例中的toggle方法）后自动更新。你也可以在事件处理器中设置 e.preventUpdate = true 来禁止这种行为。

当前标签实例的 this.update() 方法被调用时

当前标签的任何一个祖先的 this.update() 被调用时. 更新从父亲到儿子单向传播。

当 riot.update() 方法被调用时, 会更新页面上所有的表达式。

每次标签实例被更新，都会触发 “update” 事件。

由于表达式的首次计算发生在加载之前，所以不会有类似计算失败之类的意外问题。

跟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，工具链更大而全。

云服务器 GPU云服务器小而搭建一个java框架美的集团美的营销

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92735.html

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

摘要：专有的内容更少，而更多符合标准的成分。当前标签实例的方法被调用时当前标签的任何一个祖先的被调用时更新从父亲到儿子单向传播。相对来说，微型场景会更适合，不想要太多的外部依赖，又需要组件化数据驱动等更现代化框架的能力。 Riot.js是什么？ Riot 拥有创建现代客户端应用的所有必需的成分：响应式视图层用来创建用户界面用来在各独立模块之间进行通信的事件库用来管理URL和浏览器回...

nemo 2019-08-01 18:27 评论0 收藏0
Fre：又一个小而美的前端MVVM框架

摘要：，大家好，好久不贱呢最近因为看了一些的小说，整个人都比较致郁就在昨天，我用了一天的时间写了，又一个小而美的前端框架可能你觉得，有了和，没必要再写一个了我觉得我还是想想办法寻找一下它的存在感吧先看的组件化方案最先看到的应该是。 halo，大家好，好久不贱呢！最近因为看了一些 be 的小说，整个人都比较致郁::>__+ {state.count--}}>- ...

LittleLiByte 2019-08-02 16:07 评论0 收藏0
Fre：又一个小而美的前端MVVM框架

摘要：，大家好，好久不贱呢最近因为看了一些的小说，整个人都比较致郁就在昨天，我用了一天的时间写了，又一个小而美的前端框架可能你觉得，有了和，没必要再写一个了我觉得我还是想想办法寻找一下它的存在感吧先看的组件化方案最先看到的应该是。 halo，大家好，好久不贱呢！最近因为看了一些 be 的小说，整个人都比较致郁::>__+ {state.count--}}>- ...

nanfeiyan 2019-08-23 14:06 评论0 收藏0
小而美的框架—hyperapp

摘要：写在最后总体来说，是一个小而美的框架，值得我们来折腾一下，以上均为本人理解，如有错误还请指出，不胜感激一个硬广我所在团队工作地点在北京求大量前端社招实习，有意者可发简历至写在前面没错，又是一个新的前端框架，hyperapp非常的小，仅仅1kb，当然学习起来也是非常的简单，可以说是1分钟入门。声明式：HyperApp 的设计基于Elm Architecture（这也意味着组件更多的是...

haitiancoder 2019-08-21 16:50 评论0 收藏0