Jade的mixin用法

这天看老师的jade代码看到了mixin，前后文看看大致明白是个模板块一样的东西，但是不少细节不是很清楚，于是就上jade的网站去看了一下mixin的具体例子和方法，在这个blog里面记录一下。

mixin可以让你的代码变成可以复用的块。即是说可以在不同的地方里用到同样的块，只需要改变期中的参数即可，类似于模板的概念。

例1： 最简单的实例

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list
+list

创建一个名为list的mixin，由一个ul构成，然后+list表示创建一个list内的内容，编译后如下。

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

例2：同时他们可以编译成函数，可以获得参数。例如：

mixin pet(name)
  li.pet= name
ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

编译后如下。

<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

mixin pet可以接受一个名为name的参数，内容是li，li的class类的值被赋成name的值。通过传参可以用来区分不同的block.

例3：mixin还可以用一个jade的块来作为自己的内容。

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article

编译后如下：

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

如果是+mixin之后没有jade块，则会输出no content provided。这样一来mixin的用法简直就像是函数一样，十分的强大，复用性很强

例4：mixin从传递到mixin的属性获得隐式属性参数（好拗口）

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")

编译之后：

<a href="/foo" class="btn">foo</a>

你也可以使用 &attributes(在jade此页面的最后一段。http://jade-lang.com/reference/attributes/#and-attributes)

mixin link(href, name)
  a(href=href)&attributes(attributes)= name

+link('/foo', 'foo')(class="btn")

得到的一样的链接

<a href="/foo" class="btn">foo</a>

例5：其余的参数方式（下例是数组）

mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item

+list('my-list', 1, 2, 3, 4)

编译后如下：

<ul id="my-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

在mixin中用到了循环 each in。