瀏覽器內(nèi)編譯
1. 直觀體驗(yàn)
自定義標(biāo)簽需要編譯成 JavaScript 后才能在瀏覽器中運(yùn)行。你可以在script標(biāo)簽中設(shè)置type="riot/tag"屬性
<!-- 加載點(diǎn) -->
<my-tag></my-tag>
<!-- 在當(dāng)前頁面中內(nèi)置標(biāo)簽定義 -->
<script type="riot/tag">
<my-tag>
<h3>Tag layout</h3>
<inner-tag />
</my-tag>
</script>
<!-- <inner-tag/> 定義在外部文件中 -->
<script src="path/to/javascript/with-tags.js" type="riot/tag"></script>
<!-- 包含 riot.js 和編譯器 -->
<script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<!-- 正常加載 -->
<script>
riot.mount('*')
</script>
script 標(biāo)簽和外部文件可以包含多個(gè)標(biāo)簽定義，可以與普通 javascript 代碼混合在一起。
Riot 會自動提取內(nèi)置和外部標(biāo)簽定義，并在調(diào)用 riot.mount() 對標(biāo)簽進(jìn)行渲染之前對其進(jìn)行編譯。
2. 訪問標(biāo)簽實(shí)例
如果用 script src 加載標(biāo)簽而希望訪問加載后的標(biāo)簽實(shí)例，你需要象下面這樣將mount調(diào)用包在riot.compile中：
<script>
riot.compile(function() {
// 這種寫法標(biāo)簽的編譯和加載（mount）操作是同步的
var tags = riot.mount('*')
})
</script>
3. 編譯器性能
?編譯過程基本上不花什么時(shí)間。在一個(gè)普通的應(yīng)用中編譯一個(gè) timer標(biāo)簽 30次需要2毫秒。如果你的頁面上有1000個(gè)不同的象timer這樣大小的標(biāo)簽，編譯也只需要35毫秒。
?編譯器的大小只有 3.2KB (gzip壓縮后僅 1.7K) 所以在生產(chǎn)環(huán)境中進(jìn)行客戶端編譯不會有下載和性能方面的問題.
?
編譯方案 - 預(yù)編譯
1. 編譯方案
有兩種編譯方式
- 瀏覽器內(nèi)編譯 - 對調(diào)試不友好，不建議使用
- 預(yù)編譯
我們只介紹一下 “預(yù)編譯”。在服務(wù)器上預(yù)編譯有以下好處:
- 可以使用你喜愛的 預(yù)處理器
- 小小的性能優(yōu)勢， 不需要在瀏覽器里加載和執(zhí)行編譯器。
- “單語言應(yīng)用” 以及可以在服務(wù)端預(yù)渲染標(biāo)簽。
預(yù)編譯使用 riot 命令, 用 NPM 全局安裝:
npm install riot -g
如果使用了預(yù)編譯，你的 HTML 就可以改成下面這樣：
<!-- 加載點(diǎn) -->
<my-tag></my-tag>
<!-- 包含 riot.js -->
<script src="https://cdn.jsdelivr.net/riot/2.3/riot.min.js"></script>
<!-- 包含預(yù)編譯的自定義標(biāo)簽 (正常 javascript) -->
<script src="path/to/javascript/with-tags.js"></script>
<!-- mount 方法一樣 -->
<script>
riot.mount('*')
</script>
2. 預(yù)編譯的用法
riot 命令的用法:
# 編譯到當(dāng)前目錄
riot some.tag
# 編譯到目標(biāo)目錄
riot some.tag some_folder
# 編譯到目標(biāo)路徑
riot some.tag some_folder/some.js
# 將源目錄下的所有文件編譯至目的目錄
riot some/folder path/to/dist
# 將源目錄下的所有文件編譯（合并）到單個(gè)js文件
riot some/folder all-my-tags.js
?每個(gè)源文件可以包含一個(gè)或多個(gè)自定義標(biāo)簽，也可以有標(biāo)準(zhǔn)JavaScript代碼混在里面。編譯器只會轉(zhuǎn)換自定義標(biāo)簽，其它的內(nèi)容不會動。
3. Watch模式
你可以 watch 目錄，當(dāng)文件有變化時(shí)自動編譯
# 自動檢測文件修改
riot -w src dist
4. 指定后綴名
對標(biāo)簽定義文件，你可以隨意使用后綴名 (默認(rèn)為 .tag):
riot --ext html
5. ES6配置文件
可以使用一個(gè)配置文件來保存和配置所有的 riot-cli 選項(xiàng)，以及創(chuàng)建自定義解析器
riot --config riot.config
riot.config.js文件樣例：
export default {
from: 'tags/src',
to: 'tags/dist',
// 文件后綴名
ext: 'foo',
// html parser
template: 'foo',
// js parser
type: 'baz',
// css parser
style: 'bar',
parsers: {
html: {
foo: (html, opts, url) => require('foo').compile(html),
},
css: {
bar: (tagName, css, opts, url) => require('bar').compile(css),
},
js: {
baz: (js, opts, url) => require('baz').compile(js),
},
},
};
6. Node 模塊
var riot = require('riot')
var js = riot.compile(source_string, options, url)
compile 函數(shù)接受string參數(shù)，返回string.
7. 融入你的工作流程
?
預(yù)處理器
?這是預(yù)編譯的最大優(yōu)勢. 你可以使用你喜歡的預(yù)處理器來創(chuàng)建自定義標(biāo)簽。HTML 和 JavaScript 處理器都可以自定義。
1. 使用方法
?源語言使用命令行參數(shù) --type 或 -t 來指定，也可以在<script>標(biāo)簽上指定type：
<my-tag>
<h3>My layout</h3>
<script type="coffee">
@hello = 'world'
</script>
</my-tag>
2. CoffeeScript
# 使用 coffeescript 預(yù)處理器
riot --type coffee --expr source.tag
--expr 參數(shù)表示所有的表達(dá)式也做預(yù)處理. 還可以使用 “cs” 作為 “coffee” 的別名. 以下是 CoffeeScript 自定義標(biāo)簽的例子:
<kids>
<h3 each={ kids[1 .. 2] }>{ name }</h3>
# Here are the kids
this.kids = [
{ name: "Max" }
{ name: "Ida" }
{ name: "Joe" }
]
</kids>
注意: each 屬性也是用 CoffeeScript 寫的. 你的機(jī)器上需要安裝有 CoffeeScript:
npm install coffee-script -g
