riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法

时间 2019-12-05

标签 riot.js riot 教程组件撰写准则预处理标签样式装配方法栏目 JavaScript 繁體版

原文原文链接

基本要求html

一个riot标签，就是展示和逻辑的组合（也就是html和JS）git

如下是编写riot标签最基本的规则：es6

先撰写HTML，再撰写JS，JS代码能够写在<script>标签内部，但这并非必须的；github

当riot标签订义在document body以内时，其内部不能使用script标签；typescript

当riot标签订义在单独的文件中时，其内部才可使用script标签；浏览器

若是JS代码没有写在<script>标签内部，dom

那咱们就认为最后一个HTML标签结尾以后就是JS代码；ide

riot标签能够是空的，或者只有HTML，或者只有JS；this

引号是可选的，<foo bar={baz}>等价于<foo bar="｛baz｝">；编码

类似的ES6编码风格：

methodName(){ }等价于this.methodName=function(){ }.bind(this)

这里的this老是指向当前的标签实例；

<div class={selected:flag}></div>当flag变量是true的时候，该DIV的class属性是selected；

全部的属性名称必须是小写（浏览器规范要求）；

riot标签能够支持自闭合标签<div />等价于<div></div>；<br> <img> <hr>等标签编译以后并不会自闭合；

riot标签必须闭合（或者自闭合）

标准HTML标签，例如label，table等也能够被重写，但不建议这么干

riot标签也能够拥有本身的属性；

在document body中自定义riot标签，必须注意缩进格式；

tab键的缩进与空格缩进是不一样的，这要注意；

不用写<script>标签

<todo>

<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标签内加入一个这样的标签：

这样的话标签内的样式就都会转义到该区块内了；

<todo>

<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：对本文部分文字和修辞方式作了修改