riot.js入门--简介

Web Componnets(网页组件化)

Web Component 是标准，所以会是组件技术的最终方向。最终互联网上将全部是这种标准组件，但这可能需要很长时间

Riot简介

Riot的目标是使 UI 开发尽可能地简单。可以把它理解成 “web component的jquery” - 它提供了达成同样目标的更简短的语法。它简化了编写可重用组件的整体开发体验。

Riot.js是一个客户端模型-视图-呈现(MVP)框架并且它非常轻量级甚至小于1kb。
尽管他的大小令人难以置信，所有它能构建的有如下：一个模板引擎，路由，甚至是库和一个严格的并具有组织的MVP模式。当模型数据变化时视图也会自动更新。

MVP设计模式

Riot使用Model-View-Presenter (MVP)设计模式来组织代码，这样它能够更模块化、更具可测试性且易于理解。

正如在MVC（模型-视图-控制器）或MVVM（模型-视图-视图模型）模式里，其目的是从应用程序的视图中分离逻辑，但MVP更简单。让我们把它和MVC比较一下：

MVC模式更复杂。许多箭头围成一个圈。控制器的角色不明确，这种模式可以以许多不同的方式解释。事实上，这是造成有太多该模式下客户端框架的根本原因。

MVP则相反，没有太多的解释空间，歧义少。每部分的作用是明确的。它适合大大大小小的工程，是单元测试的最佳模式。

Riot的核心思想

把部分的DOM和代码逻辑封装成一个为tag的文件，然后在需要的时候mount，在不需要的时候unmount。

mount: 加载，在页面中显示
unmount: 卸载，在页面中移除

my-tag 示例

<my-tag>
  <!-- 布局 -->
  <h3 class="title">{ opts.title }</h3>
  <div>{ opts.text }</div>
  <!-- 逻辑 -->
  <script>
  var tag = this;
  tag.title = "标题3"
  </script>
  <!-- 样式，:scope 只对my-tag作用 -->
  <style>
  :scope{
    display:block;
  }
  :scope .title{
    color:#333;
  }
  </style>
</my-tag>

mount 示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="main"></div>
    <!-- 加载Riot -->
    <script src="js/riot+compiler.min.js" charset="utf-8"></script>
    <!-- 加载自定义的tag -->
    <script src="js/my-tag.tag" type="riot/tag" charset="utf-8"></script>
    <!-- 执行Mount -->
    <script type="text/javascript">
      riot.mount(
         document.getElementById("main"),
         "my-tag",
         {title:"标题3",text:"内容"}
      );
    </script>
  </body>
</html>