Jade模板引擎学习（二）语法：代码、变量、循环、过滤器及mixin
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
