Riot.js 英文原文：Riot.js — The 1kb client-side MVP framework

一个可以构建大型收集使用并使人难以相信快和弱小但轻量级的客户端框架

Riot.js是一个客户端模子-视图-出现(MVP)框架而且它十分轻量级乃至小于1kb.虽然他的巨细使人难以相信，一切它能构建的有以下：一个模板引擎，路由，乃至是库和一个严厉的并具有组织的MVP形式。当模子数据变更时视图也会主动更新。

Riot.js快并且容易-现实上，是完整分歧的范围-并且用它的使用也很快容易。真的。

让我具体说明吧。

其它翻译版本 (1) 加载中

最快

Riot.js是今朝存在的JavaScript模板引擎中速度最快的。它比Resig的“微模板”快5倍，比Underscore快7倍。

在你使用中的模板影响着衬着工夫。模板快可让你的使用快。在大型使用中影响是很大的，特殊是在非Webkit阅读器中。上述在火狐顶用100K反复的测试可在Hogan破费1300ms而在Riot中耗时30ms。请在分歧的阅读器中做做测试可以失掉更好的后果。

最轻

下面是Riot和其它盛行的客户端框架文件巨细比拟：

很分明，Riot的是最小的，并且框架的巨细会影响到以下几个方面：

1. 轻易进修。需求看更少的书和指点。这类分歧点影响是宏大的：想一想看3个API和300个API的差别。你需求更多的工夫来构建使用。这根本上是给大团队用的。过错的决议会招致全部工程失败。
2. 更少专有语法，更多是间接用JavaScript。用通用的编程技能替代一些框架本人的规矩是很主要的。
3. 更少的问题。更不轻易遭到进犯和发明弱点。一切的过错都是用户发生的问题点。使人懊丧的是有时分你的使用失败很有多是由于框架惹起的。
4. 易嵌入。在那里用Riot.js都不会让人感到过剩。框架不克不及比使用自身的代码量大。
5. 更快。依据Google的陈述，每增加1kb的JavaScript，阅读器就多破费1ms的工夫来剖析(1)。
6. 更浪费。关于Amazon.com，每增加100ms的加载JavaScript工夫会让其税收增加1%(2)。在2012年，Amazon 1%的税收总共$610.9百万。

假如你的Tools是其它花费使用而用的，那末其巨细可能愈加主要。

最弱小

这是一个使人震动的部分：一个唯一1Kb的顺序库创立一个待处事项的MVC使用所需的代码量：

使用所需代码量的图片转达出了一个好框架的才能。一个框架的全体意义在于处理公共问题，如许用户就不用从头创造轮子。写尽可能少的代码但能完成更多功用。

代码量的巨细取决于多种要素，比方编程作风，所以诚实说你的目的不该该是代码量小，而是容易。

简练是Riot真正闪亮的地方。

MVP设计形式

Riot运用Model-View-Presenter (MVP)设计形式来组织代码，如许它可以更模块化、更具可测试性且易于了解。

正如在MVC（模子-视图-把持器）或MVVM（模子-视图-视图模子）形式里，其目标是从使用顺序的视图平分离逻辑，但MVP更容易。让我们把它和MVC比拟一下：

MVC形式更庞杂。很多箭头围成一个圈。把持器的脚色不明白，这类形式可以以很多分歧的方法说明。现实上，这是形成有太多该形式下客户端框架的基本缘由。

MVP则相反，没有太多的说明空间，歧义少。每部分的用处是明白的。它合适大大巨细小的工程，是单位测试的最好形式。

让我们看一下MVP在Riot中是怎么任务的。

Model

Riot的models定义了你的使用。 它是你的贸易逻辑对外供给的一个深图远虑后的API。一个完整隔离的、可在阅读器和Server端（node.js）运转的可测试单位。下面是一个待处事项使用。

function Todo(store) {
 
   var self = this,
      items = [];
 
   self.add = function(label) {
      var item = { ... };
      items.push(item);
 
      // notify others
      self.emit("add", item);
   }
 
   self.remove = function(id) {
      delete items[id];
      self.emit("remove", item);
   }
 
   // + other public methods ...
 

   // Enable MVP pattern (this is the secret for everything)
   $.observable(self);
 
   // save state
   self.on("add remove edit", function() {
      store.put(items);
   })
 
}

这个Model是一个传统的JavaScript工具（POJO），没有框架作风。在MVC的术语中，这是一个域模子而不单单是数据拜访层。

你有权运用prototype工具或工具结构器{}。以上只是我个人运用的JavaScript作风。

当设计一个model时，坚持思绪明白很主要。你需求的最初一件事是用一个框架来聚焦你的使用逻辑。JavaScript自身就具有宏大的表示力。

observable

察看者是从你使用平分离模子的要害：

$.observable(object); 

当一些主要的事情发作后，上面的函数挪用给定的工具并告诉给其它工具。视图将会从头绘制或许API运用者也能够用监听改动事情来予以扩大。

察看者是将你的使用别离为可保护的组件的要害。它是一个典范的设计形式来将模子从视图平分离出来。

"构建大使用的秘笈就是永久不要一会儿做成大使用。要将你的使用联系为小的模块"。Justin Meyer,JavaScriptMVC的作者
"假如将分歧组件绑的太紧，可重用性将下降，并且很难在改动一些组件时而不影响其它的组件。"--Rebecca Murphey,jQuery Fundamentals作者

在客户端框架中一个好的事情库是别离各组件的很主要的特征。这就是Riot受存眷的缘由。

察看者可以对给定工具添加以下办法：

• emit(event_name, args...)— 带有可选参数并能触发一个定名事情
• on(event_name, fn)— 当一个特定事情发作时挪用给定的函数
• one(event_name, fn)— 当一个特定事情触发时挪用给定函数一次，额定的事情将没有用处
• off(event_name)— 中止监听指定的事情

Riot 事情是基于jQuery事情的，所以它有很弱小的特征，如定名空间，一次可以监听多个事情。

最主要的分歧是它没有事情工具，由于它在DOM以外就没有相干的事情了。你也能很优雅的发送和接纳参数而不必数组来完成。

// 发送事情
obj.emit("my-event", "1st argument", "2nd arg", ... argN);
 
// 接纳事情
obj.on("my-event", function(arg1, arg2, ... argN) {
 
});

察看者形式发生于1988年的Smlltalk言语，自从那时起它就被用来构建用户接口了。它是一个设计形式，而不是框架。事情和监听器的实质是被别离存眷点的优秀代码。这也应当是你理念的中心部分。

换句话说：

你不需求用框架来写一个模块级的客户端使用。

视图

视图就是你的使用中可见的那部分。比方文本，图片，表格，按钮，链接等等，html代码和css款式文件。

Riot视图尽量的轻。没有了那些视图中本不应有的前提语句，轮回，或许数据绑定，自定义的属性或元素。就是你对一切网页设计师希冀的那种视图。

只要"模版"——也就是html代码块能在运转的时分插到视图外面。这些模版包括那些可以用Riot模版驱动很快用数据交换的变量。

下面是一段 待处置的MVC进口：

<li id="{id}">
   <div class="view">
      <input class="toggle" type="checkbox">
      <label>{name}</label>
      <button class="destroy"/>
   </div>
   <input class="edit" value="{name}">
</li>

这类”分歧逻辑的html“ 没有弱点或可测试的界面。 它经过了w3c校验器而且运转更快。

实践逻辑在presenter外面.

出现器

出现器监听视图上的事情(点击，转动，按键，前往按钮等等)和模子(添加，删除或修正的工具)上的事情，当模子更新后视图和模子城市响应的变更。这类"两头人"显示的定义了用户是怎样运用接口的行动。下面是备忘录使用：

$(function() {
 
   / 1. 初始化 /
 
   // 创立一个模子工具
   var model = new Todo(),
 
      // 抓出这个视图HTML root实例
      root = $("#todo-list"),
 
      // 单个备忘录 HTML 模板
      template = $("#todo-tmpl").html(),
 

   / 2. 监听用户事情 /
 
   // 点击"肃清终了"
   $("#clear-completed").click(function() {
      todo.remove("completed");
   })
 
   //点击"切换一切"
   $("#toggle-all").click(function() {
      todo.toggle(filter);
   })
 
   // ...
 

   / 3. 监听模子事情 /
 

   // 一个删除进口
   todo.on("remove", function(items) {
      $.each(items, function() {
         $(this.id).remove()
      })
 
   // 一个编辑进口
   }).on("edit", function(item) {
      var el = $(item.id);
      el.removeClass("editing");
      $("label, .edit", el).text(item.name).val(item.name);
   })
 
   // ...
 
})

在你的使用中能决议每个分歧出现器的觉得十分自在。这是基于UI(边栏，账目，头地位...)上的规矩或是基于功用(登岸，添加，创立，删除...)。

出现器可以用jQuery来运用一切的用户接口逻辑。

本文中的一切译文仅用于进修和交换目标，转载请务必注明文章译者、出处、和本文链接。 2KB翻译任务按照 CC 协议，假如我们的任务有进犯到您的权益，请实时联络我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务