Jade語法
一、代碼
不會被緩沖代碼
ul - for(var i=0; i<3; i++) li Jade Engine
會轉換為：
<ul> <li>Jade Engine</li> <li>Jade Engine</li> <li>Jade Engine</li> </ul>
被緩沖代碼
p= 'Hello Jade'
會轉換為：
<p>Hello Jade</p>
注意: =默認會轉義內容
p= 'Welcome to wandoujia fe, we want <b>you</b>'
會轉換為：
<p>Welcome to wandoujia fe, we want <b>you</b></p>
如果不想被轉義的，在=前面添加!
p!= 'Welcome to wandoujia fe, we want <b>you</b>'
會轉換為：
<p>Welcome to wandoujia fe, we want <b>you</b></p>
二、使用變量
- var name = 'Jade'
p my name is #{name}
會轉換為：
<p>my name is Jade</p>
如果要輸出 #{},那就得使用/來轉義
- var name = 'yaochun'
p my name is \#{name}
會轉換為：
<p>my name is #{name}</p>
變量中的特殊字符會被轉義，如：
- var name = '<script></script>' | #{name}
會轉換為：
<script></script>
如要得到不轉義的，用!替換#來調用
- var name = '<script></script>' | !{name}
會轉換為：
<script></script>
| 其實就是管道，一般也可以定義一段文本
三、循環
語法結構：
each VAL[,KEY] in OBJ
- VAL是值
- KEY是鍵，可選
- OBJ是對象，array or object
數組實例
- var jobs = ["fe", "wandoujia", "beijing", "We want you"]
each job in jobs
li= job
會轉換為：
<li>fe</li> <li>wandoujia</li> <li>beijing</li> <li>We want you</li>
對象實例
- var jobs = {"catagory" : "fe", "company" : "wandoujia", "local" : "beijing"}
each val,key in jobs
li #{key} : #{val}
會轉換為：
<li>catagory : fe</li> <li>company : wandoujia</li> <li>local : beijing</li>
四、Case
case主要的作用和js里面的switch一樣
方式一 本文推薦的方式
- var apples = 1
case apples
when 0
p you have no apples
when 1
p you have an apple
default
p you have #{apples} apples
會轉換為：
<p>you have an apple</p>
方式二
- var apples = 1
case apples
when 0: p you have no apples
when 1: p you have an apple
default: p you have #{apples} apples
方式三
有些時候，確實有需求合並一些when的情況
- var apples = 1
case apples
when 0
when 1
p you have few apples
default
p you have #{apples} apples
當apples這個值為0或者1的時候會轉換為：
<p>you have few apples</p>
五、過濾器
支持markdown
注意：必須是已經安裝 markdown-js 或者 node-discount
:markdown
我們來自豌豆莢前端，歡迎有志之士加盟，簡歷發送至zhangyaochun@wandoujia.com
會轉換為：
<p>我們來自豌豆莢前端，歡迎有志之士加盟，簡歷發送至zhangyaochun@wandoujia.com</p>
六、Mixins
無參數的mixin
mixin join
ul
li 我們需要一幫人
li 喜歡前端
li 了解前端
li 願意在前端不斷學習奮斗的
li 你是嗎？
li 快來加入我們把
+join()
會轉換為：
<ul> <li>我們需要一幫人</li> <li>喜歡前端</li> <li>了解前端</li> <li>願意在前端不斷學習奮斗的</li> <li>你是嗎？</li> <li>快來加入我們把</li> </ul>
有參數的mixin
mixin join(company)
ul
li 我們 #{company} 需要一幫人
li 喜歡前端
li 了解前端
li 願意在前端不斷學習奮斗的
li 你是嗎？
li 快來加入我們 #{company} 把
+join('wandoujia')
會轉換為：
<ul> <li>我們 wandoujia 需要一幫人</li> <li>喜歡前端</li> <li>了解前端</li> <li>願意在前端不斷學習奮斗的</li> <li>你是嗎？</li> <li>快來加入我們 wandoujia 把</li> </ul>
minxin中支持block
mixin join(company)
ul
li 我們需要一幫人
li 喜歡前端
li 了解前端
li 願意在前端不斷學習奮斗的
if block
block
else
li 你是嗎？
li 快來加入我們把
+join('wandoujia')
li 我們這有神馬？
li 我們這個有一幫能折騰的老師阿姨
li 我們這有美麗的阿姨
li 我們每周都有技術交流
li 我們這可以用很多開源的新技術
會轉換為：
<ul> <li>我們需要一幫人</li> <li>喜歡前端</li> <li>了解前端</li> <li>願意在前端不斷學習奮斗的</li> <li>我們這有神馬？</li> <li>我們這個有一幫能折騰的老師阿姨</li> <li>我們這有美麗的阿姨</li> <li>我們每周都有技術交流</li> <li>我們這可以用很多開源的新技術</li> </ul>
minxin中還支持attributes
mixin link(href, name)
a(class!=attributes.class, title!=attributes.title, href=href)= name
+link('http://wandoujia.com/join', '豌豆莢前端招聘')(class="btn", title="招聘啦，小伙伴快來點")
會轉換為：
<a title="招聘啦，小伙伴快來點" href="http://wandoujia.com/join" class="btn">豌豆莢前端招聘</a>
七、包含
有點類似freemaker，通過include來載入一些jade模板
轉自：http://www.w3cplus.com/html/jade.html