未加星标

Riot简单教程

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
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加载到当前页面上, 虽然根据官方文档有很多种用法,这里从最基本的三参数做举例

riot.mount(dom,tag,opts);

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

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

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

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的小坑

如果我们想对

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLAjaxReact数据其实变量
分页:12
转载请注明
本文标题:Riot简单教程
本站链接:http://www.codesec.net/view/481281.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)