当前位置: 首页 > 工具软件 > Riot.js > 使用案例 >

riot.js教程【一】简介

薛涛
2023-12-01

题记

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

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

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

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

 

 

 类似资料: