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打印和套打 ...
随机推荐
- js中防止全局变量被污染的方法
(function ($){ var oDiv = $('div1');//获取id为'div1'的页面元素 })(function $(id){ return document.getElement ...
- 结对编程-四则运算生成程序-GUI界面
201421123118 张中结 201421123098 胡丹丹 a.需求分析 这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web,手机上的),成为一个有基本功 ...
- Swing-JMenu菜单用法-入门
菜单是Swing客户端程序不可获取的一个组件.窗体菜单大致由菜单栏.菜单和菜单项三部分组成,如下图所示: 由图可见,对于一个窗体,首先要添加一个JMenuBar,然后在其中添加JMenu,在JMenu ...
- 201521123085 《JAVA程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...
- 201521123097《Java程序设计》第二周学习总结
1.本周学习总结 (1)学习了java的一些类型和变量. (2)学习了码云的部分功能的使用. 2.书面作业 使用Eclipse关联jdk源代码,并查看String对象的源代码. 为什么要尽量频繁的对字 ...
- 201521123099 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...
- 201521123108《Java程序设计》第12周学习总结
1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. Q ...
- 多线程面试题系列（5）：经典线程同步 关键段CS
上一篇提出了一个经典的多线程同步互斥问题,本篇将用关键段CRITICAL_SECTION来尝试解决这个问题.本文首先介绍下如何使用关键段,然后再深层次的分析下关键段的实现机制与原理.关键段CRITIC ...
- python之socket--粘包补充
struct补充 import struct import json header_dic={'total_size':123123, 'filename':None, 'md5':None} hea ...
- 如何在CentOS上安装一个2048小游戏
如何在centos上安装一个2048小游戏 最近在学习CentOS系统,就琢磨着玩点什么,然后我看到有人在玩2048小游戏,所有我就在想,为啥不装一个2048小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...