riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求
一个riot标签，就是展现和逻辑的组合（也就是html和JS）
以下是编写riot标签最基本的规则：
先撰写HTML，再撰写JS，JS代码可以写在<script>标签内部，但这并不是必须的；
当riot标签定义在document body之内时，其内部不能使用script标签；
当riot标签定义在单独的文件中时，其内部才可以使用script标签；
如果JS代码没有写在<script>标签内部，
那我们就认为最后一个HTML标签结尾之后就是JS代码；
riot标签可以是空的，或者只有HTML，或者只有JS；
引号是可选的，<foo bar={baz}>等价于<foo bar="｛baz｝">；
相似的ES6编码风格：
methodName(){ }等价于this.methodName=function(){ }.bind(this)
这里的this总是指向当前的标签实例；
<div class={selected:flag}></div>当flag变量是true的时候，该DIV的class属性是selected；
<input checked={ undefined }> 等价于 <input>
所有的属性名称必须是小写（浏览器规范要求）；
riot标签可以支持自闭合标签<div />等价于<div></div>；<br> <img> <hr>等标签编译之后并不会自闭合；
riot标签必须闭合（或者自闭合）
标准HTML标签，例如label，table等也可以被重写，但不建议这么干
riot标签也可以拥有自己的属性；
在document body中自定义riot标签，必须注意缩进格式；
tab键的缩进与空格缩进是不同的，这要注意；
不用写<script>标签
|
<todo> <!-- layout --> <h3>{ opts.title }</h3> // logic comes here this.items = [1, 2, 3] </todo> |
this.items = [1,2,3]就是JS代码，可以正确执行
riotjs标签内部最后一个html标签结束后，就可以直接写JS代码，不用把JS代码写在<script>标签内部；
声明预处理器
你可以通过type属性指定一个JS的预处理器
<my-tag> <script type="coffee"> # your coffeescript logic goes here </script> </my-tag> |
目前支持coffee，typescript，es6和none；
你也可以写成这样：type = 'text/coffee';
标签样式
你可以在riot标签内部插入<style>标签，并在内部编写样式；
Riotjs会自动把<style>标签内部的东西，插入到html的head节中；
这个调整过程，只会发生一次，不管这个riot标签在页面内实例化多少次；
如果你想控制这个调整过程，你可以在head标签内加入一个这样的标签：
<style type='riot';></style>
这样的话标签内的样式就都会转义到该区块内了；
|
<todo> <!-- layout --> <h3>{ opts.title }</h3> <style> /** other tag specific styles **/ h3 { font-size: 120% } /** other tag specific styles **/ </style> </todo> |
Riotjs支持scoped伪类；但目前还不支持shadow dom；
我不建议你使用scoped伪类；因为这玩意儿已经被W3C废除了；
Riotjs将在4.x版本支持shadow dom；
关于shadow dom的内容，请参考：
https://www.toobug.net/article/what_is_shadow_dom.html
关于riotjs 4.x升级的内容，请参考：
https://github.com/riot/riot/issues/2283
关于scoped伪类，请参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
装配方法
你可以通过如下方式装配组件
<body> <!-- place the custom tag anywhere inside the body --> <todo></todo> <!-- include riot.js --> <script src="riot.min.js"></script> <!-- include the tag --> <script src="todo.js"></script> <!-- mount the tag --> <script>riot.mount('todo')</script>
</body> |
在body区域内的自定义标签，必须通过这种方式闭合：<todo></todo>
这种闭合方式是错误的：<todo />
下面是其他集中装配组件的方式
// 自动装配当前页面上所有的自定义组件 riot.mount('*')
// 通过指定的ID装配组件 riot.mount('#my-element')
// 装配选中的组件 riot.mount('todo, forum, comments')
|
一个页面可装配的组件的数量是不受限制的
上一篇文章的地址：http://www.cnblogs.com/liulun/p/7672876.html
20171113：对本文部分文字和修辞方式做了修改
riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法的更多相关文章
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...
- riot.js教程【六】循环、HTML元素标签
前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...
- riot.js教程【一】简介
Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前 ...
- JS模块化工具require.js教程(二)：基本知识
前一篇:JS模块化工具我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,r ...
- C#模板编程(2): 编写C#预处理器，让模板来的再自然一点
在<C#模板编程(1):有了泛型,为什么还需要模板?>文中,指出了C#泛型的局限性,为了突破这个局限性,我们需要模板编程.但是,C#语法以及IDE均不支持C#模板编程,怎么办呢?自己动手, ...
- js生成二维码的jquery组件–qrcode
js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...
- 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)
JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...
随机推荐
- 【★】RSA-什么是不对称加密算法？
不对称加密算法RSA浅析 本文主要介绍不对称加密算法中最精炼的RSA算法.我们先说结论,也就是RSA算法怎么算,然后再讲为什么. 随便选取两个不同的大素数p和q,N=p*q,r=(p-1)*(q-1) ...
- 201521123117 《Java程序设计》第3周学习总结
1. 本周学习总结: 2. 书面作业 Q1:代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...
- 201521123002 《Java程序设计》第2周学习总结
<Java程序设计>第2周学习总结 1. 本章学习总结 String 1.String类的对象是不可变(immutable)的 2.拼接(+号) "PG"+13; (一 ...
- 201521123012 《Java程序设计》第二周学习总结
1. 本章学习总结 1.Java中String和StringBuilder的区别. 2.Arrays()的用法. 2.课后作业 1.使用Eclipse关联jdk源代码(截图),并查看String对象的 ...
- 三分钟深入TT猫之故障转移
结束了一周繁忙的工作,趁着周末,小编手中的键盘早已饥渴难耐了,想知道上期省略号中发生了什么有趣的故事么?且听小编娓娓道来,结尾有彩蛋. 目录 风月前场 梦回现实 模拟老鸨 会话机制 故障转移 总结 风 ...
- PHPStorm调试PHP代码~实际操作+mark~~
因为wamp自己已经下载了xdebug,只要配置开启就行了. 1. 配置php.ini(有就打开注释,没有就加上) XDEBUG Extension[xdebug]zend_extension =&q ...
- JDBC在javaweb中的应用之分页数据查询
分页查询 分页查询是java web开发中经常使用到的技术.在数据库中数据量非常大的情况下,不适合将所有的数据全部显示到一个页面中,同时为了节约程序以及数据库的资源,就需要对数据进行分页查询操作. 通 ...
- JVM菜鸟进阶高手之路一(一次与笨神，阿飞近距离接触修改JVM）
转载请注明原创出处,谢谢! 今天在JVMPocket群里面看见,阿牛发了一个gc截图,之后ak47截图了特别恐怖,我就觉得好奇,去看看服务情况,截图日志如下 关于jstat命令详情可以参考:https ...
- JS（二）
上周给大家介绍了一下JS基础中一点东西,今天给大家介绍一下JS基础中一个重要部分,循环和函数. 04-JS中的循环结构 一.[循环结构的步骤] 1.首先要先声明循环变量. 2.判断循环条件 3.执行循 ...
- Java的垃圾回收
Java的垃圾回收 System.gc()和Runtime.gc()用来请求JVM启动垃圾回收 try与return的问题 任何调用try 或者catch中的return语句之前,都会先执行final ...