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 &lt;b&gt;you&lt;/b&gt;</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

 

转载于:https://www.cnblogs.com/lvmylife/p/5629615.html