riot.js教程【一】简介
Riotjs简介
Riotjs是一款简单的、优雅的、组件化UI前端开发框架；
他支持自定义标签（custom tags），拥有令人愉悦的语法，优雅的API和非常小的体积；
为什么需要一个新的界面库
前端开发框架的确已经非常多了，但还是没有令人足够满意的东西，reactjs貌似是来解决问题的，但是用过的人都知道，它有很多令人不爽的弱点，我们相信Riotjs找到了解决问题的那个微妙的平衡点，足以让开发者愉悦的用他解决界面问题；
自定义标签（custom tags）
Riotjs为所有浏览器带来了自定义标签
|
<todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form> <!-- style --> <style> h3 { font-size: 14px; } </style> <!-- logic --> <script> this.items = [] add(e) { e.preventDefault() var input = this.refs.input this.items.push(input.value) input.value = '' } </script> </todo> |
自定义标签把HTML和JS组合在一起，使之成为一个可复用的UI组件；
如你所见，riotjs有令人愉悦的语法和平缓的学习曲线；这是reactjs和polymer不能比的；
可读性
你可以使用自定义标签创建复杂的用户界面
来看看下面这个界面（如果你用传统的写法，会写成什么样呢？）
|
<body> <h1>Acme community</h1> <forum-header/> <div class="content"> <forum-threads/> <forum-sidebar/> </div> <forum-footer/> <script>riot.mount('*', { api: forum_api })</script> </body> |
Html语法是用来创建用户界面的；
他具备可嵌套的标签和标签属性；
这为自定义标签提供了基础支撑；
Riotjs先把Riotjs标签解析成纯JS，再在浏览器内执行；
DOM绑定
最少的DOM更新
单向数据流：无论是更新还是卸载，都是从父组件传递给子组件
为了更高的性能，riotjs会预编译表达式，缓存表达式结果；
为了更好的可控性，riotjs提供了很多自定义标签的生命周期事件；
支持服务端渲染
贴近标准
没有专有的事件系统
不需要额外的附加库
编译渲染出来的DOM可以被其他库自由的操纵；
不需要特别的HTML根标签
DOM标签上不需要data-属性
可以和jquery很好的兼容
工具链友好
可以使用ES6，TypeScript，CoffeeScript，Jade，LiveScript等工具创建标签；
可以使用NPM，CommonJS，AMD，Bower，Component等工具整合项目；
可以使用Gulp，Browserify，Grunt等工具进行开发；
极简原则
极简原则使得riotjs不同于其他的类库
易用的语法
Riotjs的主要设计目标就是创建一套极简的标签撰写语法；
便捷的简写形式： class={ enabled: is_enabled, hidden: hasErrors() }
不用关心render, state, constructor
内联表达式: Add #{ items.length + 1 } or class="item { selected: flag }"
不一定非得吧逻辑代码放到<script>标签内
ES6语法支持
平缓的学习曲线
Riotjs的API数量是同类js库的1/10或者1/100
不需要花大力气去学习
更少的专有的东西，更多的标准的东西；
体积非常小
polymer.html – 49.38KB (gzip)
react.min.js – 34.89KB (gzip)
riot.min.js – 10.38KB (gzip)
更少的BUG
下载压力更小，解析速度更快
可嵌入的，库的体积应该比应用程序的体积小才对
维护成本比较低，riot不需要一个非常庞大的团队来维护他
麻雀虽小，五脏俱全
Riotjs拥有所有必要的模块：
响应式界面编程所必须的模块；
为独立的模块编写API所必须的事件库；
控制URL前进后退功能所必须路由模块
总结
Riot是普适性的WEB UI组件化解决方案，它就像React和Polymer的组合，并且它不会导致代码爆炸；你可以凭你的直觉使用它；他体积很小，几近于无；它并不是重新发明的轮子，他是采各家之长，并把事情做到极简，极好；
我们应该关注组件，而不是关注模版；
把有关联的逻辑和展现放到一起，做成一个组件；这样我们整个系统都会变的更加清晰；
riot.js教程【一】简介的更多相关文章
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...
- riot.js教程【六】循环、HTML元素标签
前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS): 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这 ...
- 阅读：重新介绍 JavaScript（JS教程）
这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...
- Bootstrap：教程、简介、环境安装
ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...
- 【js】【读书笔记】廖雪峰的js教程读书笔记
最近在看廖雪峰的js教程,重温了下js基础,记下一些笔记,好记性不如烂笔头嘛 编写代码尽量使用严格模式 use strict JavaScript引擎是一个事件驱动的执行引擎,代码总是以单线程执行 执 ...
随机推荐
- class中的东西和继承、多态的概念
class中的private.public.protected 最近看了一些视频顺便总结一下class中的这几个类型以及继承 public: 在C++和C#中类的用法,语法是差不多的.当变量,函数之类 ...
- 201521123095《java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结上课内容. 对于一个系统中,对于名词大多为类或属性,对于动词大多为方法. 1.3 注释的应用 使用类的注释与 ...
- 201521123062 《Java程序设计》第3周学习总结
1.本周学习总结 二.书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pu ...
- 201521123029《Java程序设计》第三周学习总结
1.本周学习总结 2.书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; pu ...
- 《JAVA程序设计》第14周学习总结
1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- 201521123060 《Java程序设计》第11周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2.书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...
- 201521123008《Java程序设计》第11周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...
- java: Java中this和super的用法总结
this this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this的用法在java中大体可以分为3种: 1.普通的直接引用 这种就不用讲了,this相当于是指向当前对象本 ...
- python 集合的操作
list_1 = set([1,2,3,4,5])#print(list_1,type(list_1))list_2 = set([1,2,3,6,7,8,9,10])#print(list_2,ty ...
- Mybatis（1）
properties 标签的作用引入外部properties 文件的内容typeAliases 的作用可以用package这个标签批量给这个包下的所有类起一个别名 name属性写包的名字. 默认别名为 ...