1、自定义标签
它允许所有浏览器【>ie8】，使用自定义标签，<=ie8的浏览器，可使用html5shiv.js或其它方法，使用riot.js
<todo>
<!-- 布局 -->
<h1>{ opts.title }</h1>
<ul>
<li each={ value, index in list }>
{index}: {value}
</li>
</ul>
<form onsubmit={ add }>
<input>
<button>Add #{ items.length + 1 }</button>
</form>
<!-- ui逻辑，可以放在这 -->
<script>
this.list = [];
this.title = opts.title || "标题";
add(e) {
var input = e.target[0]
this.items.push(input.value)
input.value = ''
}
</script>
</todo>
一个自定义标签，把脚本也html结构关联到一起，形成一个可重用的组件。
2、可读性更强
自定义标签，让你更简单的使用html，构建更复杂的views。你的应用，使用自定义标签后，看起来，就会像这样子：
<body>
<h1>欢迎学习riot.js</h1>
<article-header></article-header>
<article-content>
<part1></part1>
<part2></part2>
</article-content>
<article-footer></article-footer>
<script>
riot.mount('*', { api: forum_api });
</script>
</body>
用自定义标签划分板块，结构会更加的清晰易懂，每个板块只管管好自己的逻辑，并不担心因板块太多，而显得混乱。
3、虚拟dom
-
尽可能减少DOM重绘和回流的次数
-
单向的数据传输： update或unmount都是从 父亲->孩子
-
预编译和缓存表达式，解析更加高效
-
更多可控的事件
-
可用于服务器端
4、更加接近标准
-
没有独立的监听属性的系统【没额外的消耗】
-
事件对IE8友好
-
能很好的跟其它工具合作
-
没有额外的属性前缀 【不需要 data-xx 或 ng-xx】
-
jQuery友好
5、使用你自己喜欢的工具编译
-
能用coffeescript、jade、typescript、es6或任意的预处理器创建标签
-
整合到npm, commonjs, amd, bower和component
-
有gulp，grunt, browserfiy插件
特性
1、友好的语法
尽可能简单，但高效强大的语法，是它设计的初衷之一。
-
强大的属性缩写: class={enable: true, hidden: false}
-
不需要额外的手动绑定，像render，state，constructor等
-
可插值使用: Add #{items.length + 1} 或 class=”item {selectd: true}”
-
逻辑代码，可不放在script标签内
-
可使用【部分】es6方法声明
2、更短的学习曲线
只有很少的API，常用的，就mount/unmount, route, on/trigger, observable
3、体积小，但功能强大
除了mvp常用功能外，还有路由，事件监听等强大的板块，几乎能满足日常的站点开发。
4、零依赖
而且不依赖其它类库，能独立运行。
5、低耦合
独立组件，随时可以插拔使用
部分转载来源：da宗熊专栏 －－ 初识riot.js
评论 (0)