RIOT.JS-概述

RIOT.js是一个非常小巧的基于Web组件的UI库，用于开发Web应用程序。它结合了React.JS和Polymer的优点以及非常简洁的实现和易于学习和使用的简单构造。压缩后的版本接近10KB。

以下是RIOT.js的主要功能

表达式绑定

• DOM更新和重排期间的有效负载非常小。

• 更改从父标记向下传播到子标记/控件。

• 使用预编译的表达式并将其缓存以提高性能。

• 在生命周期事件中提供良好的控制。

遵循标准

• 没有专有的事件系统

• 不依赖于任何polyfill库。

• 没有额外的属性添加到现有的HTML。

• 与jQuery集成良好。

核心价值

RIOT.js的开发考虑以下值。

• 简单而简约。

• 易于学习和实施。

• 提供反应式视图以构建用户界面。

• 提供事件库以构建具有独立模块的API。

• 使用浏览器后退按钮来处理应用程序行为。

RIOT.JS-环境设置

有两种使用RIOT js的方法。

• 本地安装-您可以在本地计算机上下载RIOT库，并将其包含在HTML代码中。

• 基于CDN的版本-您可以直接从Content Delivery Network（CDN）将RIOT库包含到HTML代码中。

本地安装

• 转到https://riot.js.org以下载可用的最新版本。

• 现在，将下载的riot.min.js文件放在您网站的目录中，例如/ riotjs。

例

现在您可以在HTML文件中包含riotjs库，如下所示：

这将产生以下结果-

基于CDN的版本

您可以直接从Content Delivery Network（CDN）将RIOT js库包含到HTML代码中。 Google和Microsoft提供了最新版本的内容交付。

注意-在整个教程中，我们使用的是CDNJS版本的库。

例

现在，让我们使用CDNJS中的jQuery库重写上面的示例。

这将产生以下结果-

RIOT.JS-第一个应用程序

RIOT通过构建自定义，可重复使用的html标签来工作。这些标记类似于Web组件，并且可以在页面和Web应用程序之间重用。

使用RIOT的步骤

• 在html页面中导入riot.js。

• 启动脚本部分，并将标签内容定义为html。也可以包含脚本，我们将在本教程的后面部分看到该脚本。

var tagHtml = "
Hello World!
";

• 使用riot.tag（）方法定义一个标签。向其传递标签名称，messageTag和包含标签内容的变量。

riot.tag("messageTag", tagHtml);

• 使用riot.mount（）方法安装标签。将标签名称messageTag传递给它。挂载过程将messageTag挂载在html页面中的所有匹配项中。挂载之前，应使用riot.js定义MessageTag标签。

riot.mount("messageTag");

以下是完整的示例。

例

这将产生以下结果-

RIOT.JS-标签

RIOT通过构建自定义，可重复使用的html标签来工作。这些标记类似于Web组件，并且可以在页面和Web应用程序之间重用。当您在HTML页面中包含RIOT框架时，导入的js将创建一个指向防暴对象的防暴变量。该对象包含与RIOT.js交互所需的功能，例如创建和安装标签。

我们可以通过两种方式创建和使用标签。

• 内联HTML-通过调用riot.tag（）函数。此函数使用标签名称和标签定义来创建标签。标签定义可以包含HTML，JavaScript和CSS等。

• 单独的标签文件-通过将标签定义存储在标签文件中。该标签文件包含用于创建标签的标签定义。需要导入此文件代替riot.tag（）调用。

以下是内联标签的示例。

例

这将产生以下结果-

以下是外部文件标签的示例。

例

messageTag.tag

   
Hello World!

索引

这将产生以下结果-

RIOT.JS-表达式

RIOT js使用{}定义表达式。 RIOT js允许以下类型的表达式。

• 简单表达式-定义变量并在标签内使用。

   
{title}
   

• 评估表达式-在操作中使用时评估变量。

   
{val * 5}
   

• 从Options对象获取值-获取通过属性传递给标签的值。

例

以下是上述概念的完整示例。

customTag.tag

   
{title}
   
{val * 5}
   
{opts.color}
   

索引

这将产生以下结果-

RIOT.JS-样式

RIOT js标记可以具有自己的样式，我们可以在标记内定义样式，这只会影响标记内的内容。我们还可以在标签中使用脚本来设置样式类。以下是如何实现RIOT标签样式的语法。

custom1Tag.tag

   
{title}
   
{subTitle}
   
   

索引

   
   
      
Non RIOT Heading
      
      
      
   

这将产生以下结果-

RIOT.JS-有条件的

条件语句是用于显示/隐藏RIOT标签元素的构造。以下是RIOT支持的三个条件-

• 如果-根据传递的值添加/删除元素。

   
Using if!
   

• show −如果传递true，则使用style =“ display：” ”显示元素。

   
Using show!
   

• hide-如果传递true，则使用style =“ display：’none’ ”隐藏元素。

   
Using show!
   

例

以下是完整的示例。

custom2Tag.tag

   
Using if!
   
Welcome!
   
Using show!
   
Using hide!
   

custom2.htm

这将产生以下结果-

RIOT.JS-产量

Yield是一种将外部html内容放入RIOT标签的机制。有多种产生收益的方法。

• 简单收益-如果我们要替换标签中的单个占位符。然后使用这种机制。

   Hello 

User

• 多重收益-如果我们要替换标签中的多个占位符。然后使用这种机制。

   


   Hello
   
   


   Hello 
   

   User 1
   User 2
  

例

以下是完整的示例。

custom3Tag.tag

   Hello 

custom4Tag.tag

   


   Hello
   
   


   Hello 
   

custom3.htm

   
   
      User
      
         User 1
         User 2
         
      
      
      
   

这将产生以下结果-

RIOT.JS-事件处理

我们可以使用类似于使用refs对象访问HTML元素的方式，将事件附加到HTML元素。第一步，我们将ref属性添加到DOM元素，并在标签的脚本块中使用this.ref对其进行访问。

• 附加ref-将ref属性添加到DOM元素。

Click Me!

• 使用refs对象-现在在挂载事件中使用refs对象。当RIOT装入自定义标签并填充refs对象时，将引发此事件。

this.on("mount", function() {
   console.log("Mounting");
   console.log(this.refs.username.value);
})

例

以下是完整的示例。

custom5Tag.tag

custom5.htm

这将产生以下结果-

RIOT.JS-访问DOM

我们可以使用refs对象访问HTML元素。第一步，我们将ref属性添加到DOM元素，并在标签的脚本块中使用this.ref对其进行访问。

• 附加ref-将ref属性添加到DOM元素。

Click Me!

• 使用refs对象-现在在挂载事件中使用refs对象。当RIOT装入自定义标签并填充refs对象时，将引发此事件。

this.on("mount", function() {
   this.refs.clickButton.onclick = function(e) {
      console.log("clickButton clicked");
      return false;
   };
})

例

以下是完整的示例。

custom6Tag.tag

   

      
      Click Me!
      
   
   

custom6.htm

这将产生以下结果-

RIOT.JS-循环

我们可以遍历RIOT的原语或对象数组，并随时随地创建/更新html元素。使用“每个”构造我们可以实现它。

• 创建数组-创建对象数组。

this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];

• 添加每个属性-现在使用“每个”属性。

• 迭代对象数组-使用对象属性迭代数组。

 { city } - { country }

例

以下是完整的示例。

custom7Tag.tag

   
   

      

          { city } - { country }
      
   
   

custom7.htm

这将产生以下结果-

RIOT.JS-混合

通过Mixin，我们可以在标签之间共享通用功能。 Mixin可以是函数，类或对象。考虑每个标签应使用的身份验证服务的情况。

• 定义Mixin-在调用mount（）之前使用riot.mixin（）方法定义mixin。

riot.mixin('authService', {
   init: function() {
      console.log('AuthService Created!')
   },

   login: function(user, password) {
      if(user == "admin" && password == "admin"){
         return 'User is authentic!'
      }else{
         return 'Authentication failed!'
      }   
   }
});

• 初始化mixin-在每个标签中初始化mixin。

this.mixin('authService') 

• 使用mixin-初始化后，可以在标记内使用mixin 。

this.message = this.login("admin","admin"); 

例

以下是完整的示例。

custom8Tag.tag

   
{ message }
   

custom9Tag.tag

   
{ message }
   

custom8.htm

这将产生以下结果-

RIOT.JS-可观察的

Observables机制允许RIOT将事件从一个标签发送到另一个标签。遵循以下API对于理解RIOT可观察性很重要。

• riot.observable（element） -添加对给定对象元素的Observer支持，或者如果参数为空，则创建并返回一个新的observable实例。此后，该对象便能够触发并监听事件。

var EventBus = function(){
   riot.observable(this);
}

• element.trigger（events） -执行所有侦听给定事件的回调函数。

sendMessage() {
   riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
}

• element.on（events，callback） -监听给定的事件，并在每次触发事件时执行回调。

riot.eventBus.on('message', function(input) {      
   console.log(input);
});

例

以下是完整的示例。

custom10Tag.tag

   Custom 10
       

custom11Tag.tag

custom9.htm

这将产生以下结果-