RIOT.JS - 快速指南
RIOT.JS - 概述
RIOT.js 是一个非常小/轻量级的基于 Web 组件的 UI 库，用于开发 Web 应用程序。它将 React.JS 和 Polymer 的优点与非常简洁的实现和易于学习和使用的结构结合起来。它的缩小版大小接近10KB。
以下是 RIOT.js 的主要功能
表达式绑定
DOM 更新和回流期间的有效负载非常小。
更改从父标签向下传播到子标签/控件。
使用预编译表达式并缓存它们以获得高性能。
提供对生命周期事件的良好控制。
遵循标准
没有专有的事件系统
不依赖于任何填充库。
没有向现有 HTML 添加额外的属性。
与 jQuery 集成良好。
核心价值
RIOT.js 的开发考虑了以下值。
简单简约。
易于学习和实施。
提供反应式视图来构建用户界面。
提供事件库来构建具有独立模块的API。
使用浏览器后退按钮来处理应用程序Behave。
RIOT.JS - 环境设置
有两种使用 RIOT js 的方法。
本地安装- 您可以在本地计算机上下载 RIOT 库并将其包含在 HTML 代码中。
基于 CDN 的版本- 您可以直接从内容分发网络 (CDN) 将 RIOT 库包含到您的 HTML 代码中。
本地安装
转至https://riot.js.org下载最新版本。
现在将下载的riot.min.js文件放入您网站的目录中，例如 /riotjs。
例子
现在您可以在 HTML 文件中包含riotjs库，如下所示 -
<!DOCTYPE html>
<html>
<head>
<script src = "/riotjs/riot.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
这将产生以下结果 -
基于CDN的版本
您可以直接从内容分发网络 (CDN) 将 RIOT js 库包含到您的 HTML 代码中。Google 和 Microsoft 提供最新版本的内容交付。
注意- 在本教程中我们使用 CDNJS 版本的库。
例子
现在让我们使用 CDNJS 的 jQuery 库重写上面的示例。
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 第一个应用程序
RIOT 的工作原理是构建自定义、可重用的 html 标签。这些标签类似于 Web 组件，并且可以跨页面和 Web 应用程序重复使用。
使用 RIOT 的步骤
在html页面导入riot.js。
<head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script> </head>
启动脚本部分并将标签内容定义为 html。还可以包含脚本，我们将在本教程后面看到。
var tagHtml = "<h1>Hello World!</h1>";
使用 riot.tag() 方法定义标签。向其传递标签名称、messageTag 和包含标签内容的变量。
riot.tag("messageTag", tagHtml);
使用 riot.mount() 方法挂载标签。向其传递标签的名称 messageTag。安装过程将在 html 页面中所有出现的 messageTag 中安装该 messageTag。MessageTag 标签应在安装之前使用 riot.js 定义。
riot.mount("messageTag");
</script>
以下是完整的示例。
例子
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 标签
RIOT 的工作原理是构建自定义、可重用的 html 标签。这些标签类似于 Web 组件，并且可以跨页面和 Web 应用程序重复使用。当您在 HTML 页面中包含 RIOT 框架时，导入的 js 会创建一个指向 riot 对象的 riot 变量。该对象包含与 RIOT.js 交互所需的功能，例如创建和安装标签。
我们可以通过两种方式创建和使用标签。
内联 HTML - 通过调用 riot.tag() 函数。该函数使用标签名称和标签定义来创建标签。标签定义可以包含 HTML、JavaScript 和 CSS 等。
单独的标签文件- 通过将标签定义存储在标签文件中。该标签文件包含用于创建标签的标签定义。需要导入此文件来代替 riot.tag() 调用。
<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<
以下是内联标签的示例。
例子
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
这将产生以下结果 -
以下是外部文件标签的示例。
例子
消息标签.tag
<messageTag> <h1>Hello World!</h1> </messageTag>
索引.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script src = "messageTag.tag" type = "riot/tag"></script>
<script>
riot.mount("messageTag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 表达式
RIOT js 使用 {} 来定义表达式。RIOT js 允许以下类型的表达式。
简单表达式- 定义变量并在标签内使用。
<customTag>
<h1>{title}</h1>
<script>
this.title = "Welcome to TutorialsPoint.COM";
</script>
</customTag>
评估表达式- 在操作中使用时评估变量。
<customTag>
<h2>{val * 5}</h2>
<script>
this.val = 4;
</script>
</customTag>
从选项对象获取值- 获取通过属性传递给标签的值。
例子
以下是上述概念的完整示例。
自定义标签.tag
<customTag>
<h1>{title}</h1>
<h2>{val * 5}</h2>
<h2>{opts.color}</h2>
<script>
this.title = "Welcome to TutorialsPoint.COM";
this.val = 4;
</script>
</customTag>
索引.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<customTag color="red"></customTag>
<script src = "customTag.tag" type = "riot/tag"></script>
<script>
riot.mount("customTag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 造型
RIOT js 标签可以有自己的样式，我们可以在标签内定义样式，这只会影响标签内的内容。我们还可以在标签内使用脚本设置样式类。以下是如何实现 RIOT 标签样式的语法。
自定义1Tag.tag
<custom1Tag>
<h1>{title}</h1>
<h2 class = "subTitleClass">{subTitle}</h2>
<style>
h1 {
color: red;
}
.subHeader {
color: green;
}
</style>
<script>
this.title = "Welcome to TutorialsPoint.COM";
this.subTitle = "Learning RIOT JS";
this.subTitleClass = "subHeader";
</script>
</custom1Tag>
索引.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<h1>Non RIOT Heading</h1>
<custom1Tag></custom1Tag>
<script src = "custom1Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom1Tag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 有条件的
条件是用于显示/隐藏 RIOT 标签元素的构造。以下是 RIOT 支持的三个条件 -
if - 根据传递的值添加/删除元素。
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
show -如果传递 true，则使用 style = " display:' ' "显示元素。
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
hide -如果传递 true，则使用 style = " display:'none' "隐藏元素。
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
例子
以下是完整的示例。
自定义2Tag.tag
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<h2 if = {show}>Welcome!</h1>
<h2 show = {showMessage}>Using show!</h2>
<h2 hide = {show}>Using hide!</h2>
<script>
this.showMessage = true;
this.show = false;
</script>
</custom2Tag>
定制2.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom2Tag></custom2Tag>
<script src = "custom2Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom2Tag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 产量
Yield 是一种将外部 html 内容放入 RIOT 标签的机制。有多种方法可以实现收益。
Simple Yield - 如果我们想替换标签中的单个占位符。然后使用这个机制。
<custom3Tag> Hello <yield/> </custom3Tag>
<custom3Tag><b>User</b></custom3Tag>
Multiple Yield - 如果我们想替换标签中的多个占位符。然后使用这个机制。
<custom4Tag> <br/><br/> Hello <yield from = "first"/> <br/><br/> Hello <yield from = "second"/> </custom4Tag>
<custom4Tag> <yield to = "first">User 1</yield> <yield to = "second">User 2</yield> </custom4Tag>
例子
以下是完整的示例。
自定义3Tag.tag
<custom3Tag> Hello <yield/> </custom3Tag>
自定义4Tag.tag
<custom4Tag> <br/><br/> Hello <yield from = "first"/> <br/><br/> Hello <yield from = "second"/> </custom4Tag>
定制3.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom3Tag><b>User</b></custom3Tag>
<custom4Tag>
<yield to = "first">User 1</yield>
<yield to = "second">User 2</yield>
</custom4Tag>
<script src = "custom3Tag.tag" type = "riot/tag"></script>
<script src = "custom4Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom3Tag");
riot.mount("custom4Tag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 事件处理
我们可以将事件附加到 HTML 元素，就像我们使用 refs 对象访问 HTML 元素一样。第一步，我们向 DOM 元素添加 ref 属性，并在标签的脚本块中使用 this.ref 访问它。
Attach ref - 将 ref 属性添加到 DOM 元素。
<button ref = "clickButton">Click Me!</button>
使用 refs 对象- 现在在挂载事件中使用 refs 对象。当 RIOT 安装自定义标签并填充 refs 对象时，会触发此事件。
this.on("mount", function() {
console.log("Mounting");
console.log(this.refs.username.value);
})
例子
以下是完整的示例。
自定义5Tag.tag
<custom5Tag>
<form>
<input ref = "username" type = "text" value = "Mahesh"/>
<input type = "submit" value = "Click Me!" />
</form>
<script>
this.on("mount", function() {
console.log("Mounting");
console.log(this.refs.username.value);
})
</script>
</custom5Tag>
定制5.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom5Tag></custom5Tag>
<script src = "custom5Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom5Tag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 访问 DOM
我们可以使用 refs 对象访问 HTML 元素。第一步，我们向 DOM 元素添加 ref 属性，并在标签的脚本块中使用 this.ref 访问它。
Attach ref - 将 ref 属性添加到 DOM 元素。
<button ref = "clickButton">Click Me!</button>
使用 refs 对象- 现在在挂载事件中使用 refs 对象。当 RIOT 安装自定义标签并填充 refs 对象时，会触发此事件。
this.on("mount", function() {
this.refs.clickButton.onclick = function(e) {
console.log("clickButton clicked");
return false;
};
})
例子
以下是完整的示例。
自定义6Tag.tag
<custom6Tag>
<form ref = "customForm">
<input ref = "username" type = "text" value = "Mahesh"/>
<button ref = "clickButton">Click Me!</button>
<input type = "submit" value = "Submit" />
</form>
<script>
this.on("mount", function() {
this.refs.clickButton.onclick = function(e) {
console.log("clickButton clicked");
return false;
};
this.refs.customForm.onsubmit = function(e) {
console.log("Form submitted");
return false;
};
})
</script>
</custom6Tag>
定制6.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom6Tag></custom6Tag>
<script src = "custom6Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom6Tag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 循环
我们可以迭代原语或对象的 RIOT 数组，并随时创建/更新 html 元素。使用“each”结构我们可以实现它。
创建数组- 创建对象数组。
this.cities = [
{ city : "Shanghai" , country:"China" , done: true },
{ city : "Seoul" , country:"South Korea" },
{ city : "Moscow" , country:"Russia" }
];
添加每个属性- 现在使用“each”属性。
<ul>
<li each = { cities } ></li>
</ul>
迭代对象数组- 使用对象属性迭代数组。
<input type = "checkbox" checked = { done }> { city } - { country }
例子
以下是完整的示例。
自定义7Tag.tag
<custom7Tag>
<style>
ul {
list-style-type: none;
}
</style>
<ul>
<li each = { cities } >
<input type = "checkbox" checked = { done }> { city } - { country }
</li>
</ul>
<script>
this.cities = [
{ city : "Shanghai" , country:"China" , done: true },
{ city : "Seoul" , country:"South Korea" },
{ city : "Moscow" , country:"Russia" }
];
</script>
</custom7Tag>
定制7.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom7Tag></custom6Tag>
<script src = "custom7Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom7Tag");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS-Mixin
通过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");
例子
以下是完整的示例。
自定义8Tag.tag
<custom8Tag>
<h1>{ message }</h1>
<script>
this.mixin('authService')
this.message = this.login("admin","admin")
</script>
</custom8Tag>
自定义9Tag.tag
<custom9Tag>
<h1>{ message }</h1>
<script>
this.mixin('authService')
this.message = this.login("admin1","admin")
</script>
</custom9Tag>
定制8.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom8Tag></custom8Tag>
<custom9Tag></custom9Tag>
<script src = "custom8Tag.tag" type = "riot/tag"></script>
<script src = "custom9Tag.tag" type = "riot/tag"></script>
<script>
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!'
}
}
});
riot.mount("*");
</script>
</body>
</html>
这将产生以下结果 -
RIOT.JS - 可观察的
Observables 机制允许 RIOT 将事件从一个标签发送到另一个标签。以下 API 对于理解 RIOT 可观测值非常重要。
riot.observable(element) - 添加对给定对象元素的观察者支持，或者如果参数为空，则创建并返回新的可观察实例。此后，该对象就可以触发并侦听事件。
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);
});
例子
以下是完整的示例。
自定义10Tag.tag
<custom10Tag>
<button onclick = {sendMessage}>Custom 10</button>
<script>
sendMessage() {
riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');
}
</script>
</custom10Tag>
自定义11Tag.tag
<custom11Tag>
<script>
riot.eventBus.on('message', function(input) {
console.log(input);
});
</script>
</custom11Tag>
定制9.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom10Tag></custom10Tag>
<custom11Tag></custom11Tag>
<script src = "custom10Tag.tag" type = "riot/tag"></script>
<script src = "custom11Tag.tag" type = "riot/tag"></script>
<script>
var EventBus = function(){
riot.observable(this);
}
riot.eventBus = new EventBus();
riot.mount("*");
</script>
</body>
</html>
这将产生以下结果 -