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>
</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>
</body> |
在body區域內的自定義標簽，必須通過這種方式閉合：<todo></todo>
這種閉合方式是錯誤的：<todo />
下面是其他集中裝配組件的方式
// 自動裝配當前頁面上所有的自定義組件
riot.mount(‘*‘)
// 通過指定的ID裝配組件
riot.mount(‘#my-element‘)
// 裝配選中的組件
riot.mount(‘todo, forum, comments‘) |
一個頁面可裝配的組件的數量是不受限制的
riot.js教程【二】組件撰寫準則、預處理器、標簽樣式和裝配方法