专栏首页liulunriot.js教程【一】简介

riot.js教程【一】简介

题记

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

如果关注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的组合,并且它不会导致代码爆炸;你可以凭你的直觉使用它;他体积很小,几近于无;它并不是重新发明的轮子,他是采各家之长,并把事情做到极简,极好;

我们应该关注组件,而不是关注模版;

把有关联的逻辑和展现放到一起,做成一个组件;这样我们整个系统都会变的更加清晰;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • riot.js教程【五】标签嵌套、命名元素、事件、标签条件

    前文回顾 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs...

    liulun
  • riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法

    基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS) 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<s...

    liulun
  • javascript中bind绑定接收者与函数柯里化

    如果我已经把匿名函数抽象出来,做成了一个公共的方法 (可能其他地方也会用的到) 那么,这个遍历会是这样的;

    liulun
  • 浅谈电商网站安装合信SSL证书的必要性

    在互联网快速发展的同时,也存在着很多安全问题,尤其是对用户的信息安全产生严重的影响和威胁,当遭受黑客攻击的时候,损失无疑是巨大的。要想加强网站的安全以及让用户对...

    合信ssl证书
  • logcat无法使用

    drunkdream
  • as3与node.js的socket通信

    SocketManager最多在连接失败时,进行5次重连。建立socket连接代码:

    meteoric
  • VBA批量打印同一文件夹下的Excel文件

    VBA批量打印同一文件夹下的Excel文件!!注意:只能打已经设置好打印范围的Excel文件!!如果想打印任意数据区域请自行增加!!

    巴西_prince
  • 【iOS学习】——手势识别

    LeeCen
  • Spring归纳小结

    如果说有什么框架是Java程序员必然会学习、使用到的,那么Spring肯定是其中之一。本篇博客,将根据博主在日常工作中对Spring的使用做一个系统的归纳小结。

    Java团长
  • Spring归纳小结

    如果说有什么框架是Java程序员必然会学习、使用到的,那么Spring肯定是其中之一。本篇博客,将根据博主在日常工作中对Spring的使用做一个系统的归纳小结。

    用户2890438

扫码关注云+社区

领取腾讯云代金券