基本要求
一個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：對本文部分文字和修辭方式做了修改