riot, 简单而优雅的基于组件的UI库

分享于 

6分钟阅读

GitHub

  繁體 雙語
A React- like, 3.5KB user interface library
  • 源代码名称:riot
  • 源代码网址:http://www.github.com/riot/riot
  • riot源代码文档
  • riot源代码下载
  • Git URL:
    git://www.github.com/riot/riot.git
    Git Clone代码到本地:
    git clone http://www.github.com/riot/riot
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/riot/riot
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Riot logo

    基于的简单而优雅的组件库

    Build StatusMIT LicenseRiot ForumJoin the chat at https://gitter.im/riot/riotJoin the chat (ja) at https://riot-jp-slackin.herokuapp.com/OpenCollective BackersOpenCollective Sponsors

    NPM versionNPM downloadsjsDelivr HitsCoverage StatusRiot SizeCode Quality

    Sauce Test Status

    框架大小比较

    框架版本缩小大小( gzip )
    Ember2.17.0122.39kb
    @angular/core + Polyfills5.1.287.46kb
    聚合物+ 网络组件 Polyfill Lite1.8.066.3kb
    响应+ 映射并设置 Polyfills16.1.041.817kb
    Web组件 Polyfill0.7.2433.68kb
    Vue2.5.1331.41kb
    Riot3.9.010.74kb
    Inferno4.0.27.98kb
    Preact8.2.63.45kb

    上面 比较包括支持旧浏览器( 如 IE9 )的polyfills,在 Riot.js 中,默认情况下支持

    浏览器支持

    所有现代浏览器都支持暴乱,它不需要任何额外的polyfill

    • IE 9 +
    • 边缘
    • Chrome
    • Safari 7 +
    • Firefox
    • Safari iOS
    • Android

    暴乱为所有现代浏览器带来定制标签。 思考React+ 聚合物,但是语法和学习曲线都很有趣。

    标记定义
    <timer><p>Seconds Elapsed: { time }</p>this.time=opts.start||0tick() {
     this.update({ time:++this.time })
     }
     var timer =setInterval(this.tick, 1000)
     this.on('unmount', function() {
     clearInterval(timer)
     })</timer>

    在 Plunker 打开这里示例

    安装
    riot.mount('timer', { start:0 })
    嵌套

    定制标签让你用HTML构建复杂的视图。

    <timetable>
     <timerstart="0"></timer>
     <timerstart="10"></timer>
     <timerstart="20"></timer>
    </timetable>

    HTML语法是web上事实上的语言,它是为构建用户界面而设计的。 语法是明确的,嵌套是语言的固有属性,属性提供了提供自定义标记选项的简洁方法。

    表达式绑定

    • 绝对可能的DOM更新和回流的最小数量。
    • 单向数据流:更新和卸载从父级向下传播到子进程。
    • 表达式被预先编译并缓存为高性能。
    • 用于更多控制的生命周期事件。

    接近标准

    • 无专有事件系统。
    • 事件正常化。
    • 渲染的DOM可以通过其他工具自由操作。
    • 没有额外的HTML root 元素或者 data- 属性。
    • 任何前端框架配合良好。

    使用你最亲爱的语言和工具

    注:: * 官方维护

    CDN主机

    简明语法

    • 电源快捷方式: class={ enabled: is_enabled, hidden: hasErrors() }
    • 没有额外的大脑负荷,如 renderstate 或者 constructor
    • 插值: Add #{ items.length + 1 } 或者 class="item { selected: flag }"
    • compact ES6方法语法。

    演示

    教程

    视频教程

    库/框架

    组件

    资源


    相关文章