riot自定义todo标签

riot自定义todo标签_第1张图片

为什么需要一个新的 UI 库?

前端世界的库已经太多了,但坦白说我们认为终极解决方案仍有待探索。我们相信 Riot 为解决前端开发的难题提供了正确的方向。React 似乎能够解决问题,但其自身仍有重大弱点,这些弱点正是 Riot 要克服的。

理由如下:

1. 自定义标签

Riot 在所有浏览器上支持自定义标签。


    

{opts.title}

  • {item}

自定义标签将相关的 HTML 和 JavaScript 粘合在一起,成为一个可重用的组件。可以认为它同时具有 React 和 Polymer 的优点,但是语法更友好,学习成本更小。

对阅读友好

自定义标签允许你用HTML来编写复杂的用户界面。你的应用会长成这个样子:



  

Acme community

HTML 是web世界的 标准 语言,它就是被设计用来描述用户界面的。语法明确,语言天生支持嵌套,而属性可以作为向自定义标签提供选项的简洁手段。

Riot 标签首先被 编译 成标准 JavaScript,然后在浏览器中运行。

虚拟 DOM

  • 保证最少量的DOM 更新和数据流动
  • 单向数据流: 更新和删除操作由父组件向子组件传播
  • 表达式会进行预编译和缓存以保证性能
  • 为更精细的控制提供生命周期事件
  • 支持自定义标签的服务端渲染,支持单语言应用

与标准保持一致

  • 没有专有的事件系统
  • 渲染出的 DOM 节点可以放心地用其它工具(库)进行操作
  • 不要求额外的 HTML 根元素或 data- 属性
  • 与 jQuery 友好共存

对工具友好

  • 可选择使用 ES6, Typescript, CoffeeScript, Jade, LiveScript 或 其它预处理器 创建自定义标签
  • 可与 NPM, CommonJS, AMD, Bower 或 Component 集成
  • 可以利用 Gulp, Grunt 或 Browserify 插件

2. 简单,最小化

最小化是 Riot 区别于其它库的重要特点:

1. 友好的语法

设计目标之一是尽量少写脚手架(boilerplate)代码就能实现强大的标签语法:

  • 强大的简化写法: class={ enabled: is_enabled, hidden: hasErrors() }
  • 不需要费脑记忆 renderstateconstructor 或 shouldComponentUpdate
  • 直接插值: Add #{ items.length + 1 } 或 class="item { selected: flag }"
  • 用 

你可能感兴趣的:(riot,javascript)