Riot简单教程

2016-09-07

Riot

在文章大量DOM的操作中我们提到JS改变DOM一直都是个比较坑爹的事情，不仅要防着XSS还要简单便于理解，为了解决React的复杂性，Riot诞生了(其实我想查查它什么时候诞生的，但是官网喵了一下没看到)

Riot的核心思想

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

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

这个思想，根据我的理解是一个典型的MVVM模式，理解MVVM模式应该一看就能懂，可以查看我Blog中MVVM的文章。

准备tag

我们首先准备一个tag

<my-tag>
  <!-- 布局 -->
  <h3>{ opts.title }</h3>
  <div>{ opts.text }</div>

  <!-- 逻辑 -->
  <script>
  this.title = "标题3"
  </script>

</my-tag>

这里看到会有2个问题

my-tag 这个标签HTML认么？
opts是啥？

答案是

因为tag是自定义的，所以才要起个html不认识的标签
opts是mount函数的一个参数，用于装数据

mount函数

mount就是把实现准备好的一部分HTML和JS加载到当前页面上，虽然根据官方文档有很多种用法，这里从最基本的三参数做举例

1	riot.mount(dom,tag,opts);

三参数的mount函数最便于理解

参数	意义	举例
dom	具体加载到HTML文件的哪里	document.getElementById(“”)
tag	要加载哪个tag	“my-tag”
opts	要带什么参数进去，使用一个JS对象传入数据	{title:””,text:””}

具体举例可以看文章末尾简单的试验

除了标准的使用方法，riot还自身支持选择器和JQuery,还有单参数和双参数的使用方法请看官方文档

1 2	riot.mount(selector, tagName, [opts]) //直接传入选择器 "#id" riot.mount($("#id"), tagName, [opts]) //直接传入JQuery对象

update和Ajax

在网页中我们最常用的就是Ajax，现在我们来看riot的update函数和ajax的结合

<ajax-tag>
  <ul>
    <li each={datas} id="name{id}">{name}</li>
  </ul>

  <script>
    var self = this

    $.get(url,function(response){
        self.datas = response
        self.update()
      })
  </script>
</ajax-tag>

为什么使用self和update

由于Ajax是异步的，所以说当我们mount的时候，很多信息还没有得到具体的值，需要进行两步操作

首先在ajax回调函数外声明self变量让它指向tag本身，也就是this，因为回调函数内的this是指向回调函数而不是tag
在ajax回调函数内部使用self指向tag，然后给tag.datas赋值，datas内部需要有“id”和”name”，才会循环赋值给不同的li标签

在完成以上操作之后，使用update函数，顾名思义就是重新渲染HTML文档，调用Riot的Render

取id的小坑

如果我们想对

1	<li id="name1">Lily</li>

这个DOM操作，我们需要在 self.update() 之后操作，因为update之前，这些内容还没有被Render到HTML文档，也就是说HTML文档中没有这些内容，getElementById是取不到这个DOM的

还有哪些关注点

Riot除了以上这些常用的功能外，还有

动态赋值的 yield 功能，可以执行一些Runtime操作
标签套用 Nest 功能实现标签套标签实现更加复杂的功能
参数合并的 Mixin 功能来创建公用的数据

参考官网 Riot中文版

简单的试验

通过以下代码，可以进行简单的试验

<!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>