riot.js教程【一】简介

时间 2019-11-24

标签 riot.js riot 教程简介栏目 JavaScript 繁體版

原文原文链接

题记html

这是一个系列文章的第一篇前端

若是关注riot.js的人，能够关注个人博客；react

我接下来会持续不断的发这一块的文章；jquery

系列文章内容大多来自官网翻译；编程

Riotjs简介api

Riotjs是一款简单的、优雅的、组件化UI前端开发框架；浏览器

他支持自定义标签（custom tags），拥有使人愉悦的语法，优雅的API和很是小的体积；缓存

为何须要一个新的界面库框架

前端开发框架的确已经很是多了，但仍是没有使人足够满意的东西，reactjs貌似是来解决问题的，可是用过的人都知道，它有不少使人不爽的弱点，咱们相信Riotjs找到了解决问题的那个微妙的平衡点，足以让开发者愉悦的用他解决界面问题；ide

自定义标签（custom tags）

Riotjs为全部浏览器带来了自定义标签

<todo>

<h3>{ opts.title }</h3>

<ul>

</ul>

<button>Add #{ items.length + 1 }</button>

</form>

<style>

h3 {

font-size: 14px;

}

</style>

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/>

<forum-threads/>

<forum-sidebar/>

</div>

<forum-footer/>

</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的组合，而且它不会致使代码爆炸；你能够凭你的直觉使用它；他体积很小，几近于无；它并非从新发明的轮子，他是采各家之长，并把事情作到极简，极好；

咱们应该关注组件，而不是关注模版；

把有关联的逻辑和展示放到一块儿，作成一个组件；这样咱们整个系统都会变的更加清晰；