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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。