Riot.js：不足1K的MVP客户端框架

Riot.js是一款MVP（模型-视图-呈现）开源客户端框架，其最大的特点就是体积非常小，不足1KB，虽然体积小，但它可以帮助用户构建大规模的Web应用程序。

Riot.js是由Moot公司开发，目前最新版本为v2.0.1.下载、githut。

Riot.js包含的组件有：一件模板引擎、路由、事件库和一个严格的MVP模型，可以把所有的组件组织在一起。和其他框架相比，它速度更快、体积更小、功能更加强大。

下面我们一起来看下Riot.js的几大特征。

最小

下面是目前几个比较流行的客户端JS框架，Riot.js是所有这些框架里体积最小的：

Riot.js之所以如此轻量，它主要注重于构建和维护应用的核心因素，目前，它主要依赖于jQuery，但在即将发布的v1.0中会有一个独立的版本，并且可以在Node.js上运行。

应用程序代码更少

下面是各个框架构建Todo MVC应用程序的代码量：

Raw amount of minified JS and HTML in Todo MVC

代码量的多少要取决于很多因素，比如编码风格等，所以这并不是一个非常重要的指标。

最快

Riot.js配备了一个非常快速的JavaScript模板引擎，它的速度几乎是Resig“微模板”或Underscore模板的5倍。

MVP设计模式

Riot.js使用 MVP(模型(model)－视图(view)－呈现(Presenter))设计模式来组织代码，相比于MVC的最大特点是取消了model和view的直接联系，必须通过Presenter 进行通信，这样它能够更加模块化、更具可测试性且易于理解。

入门实例：

1.创建自定义标签

riot.tag(tagName, html, [constructor])

首先需要创建个自定义标签，一个自定义标签中实际上包含了view和presenter俩个部分。

tagName 标签名称

html 一段html代码，实际上相当于一个view模板。其中可以使用riot表达式来处理model数据。

constructor 处理逻辑，即presenter. 其中可包含业务处理代码以及元素事件的绑定.

如：创建个名称为person(个人信息)标签，riot.tag('person', '<h3>姓名:{ opts.name }</h3><h3>年龄：{ opts.age }</h3>', function(opts) {

})

opts是一个输入参数，其值通常情况下就是model数据，在实际渲染view时传入(通过mount方法)。

2.创建标签实例

上面定义好标签后就可以在html中使用了，其用法和普通的html没有区别。如：

<body>

</body>

3.渲染或呈现

只有上面俩步view是不会展现出来的，必须调用

riot.mount(selector, [opts])来渲染。通过mount将model绑定、渲染到view上，最终呈现view。

selector 是自定义标签的选择器，其载体必须是自定义的标签，而不能是普通的html标签。

opts是model数据，对应自定义标签中的opts。

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>riot入门</title>
<script src="riot.js"></script>
</head>

<body>
<person></person>
</body>
</html>
<script>
    riot.tag('person', '<h3>姓名:{ opts.name }</h3><h3>年龄：{ opts.age }</h3>', function(opts) {

    })
    riot.mount('person', {name:'张三', age:24});
</script>

效果：

+友情链接