Jade之Mixins

Mixin

mixin容許咱們對某一個塊的重複使用，相似於函數。
用法：首先聲明mixin，而後使用（在mixin名字以前加+便可以使用）便可。

最簡單的mixin

jade：

//- 聲明
mixin list
  ul
    li foo
    li bar
    li baz
    
//- 使用
+list
+list

html：

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

帶參數的mixin

mixin支持傳入參數，根據參數來改變塊內容。

jade：

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

html：

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

mixin塊

mixin使用時，也能夠包含一個塊。經過判斷，能夠使內容不一樣。

jade：

mixin article(title)
  .article
    .article-wrapper
      h1= title
      //- 若是mixin含有塊，則爲塊內容
      if block
        block
      else
        p No content provided

+article('Hello world')

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

html：

<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 attributes

jade容許將隱性屬性變量傳入mixin。

jade：

mixin link(href, name)
  a(class!=attributes.class, href=href, id!=attributes.id)= name

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

html：

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

在jade代碼中，由於class屬性和id屬性已經逃逸，因此在mixin中須要使用!=，或者也能夠使用&attributes。

多參數

jade的mixin的形參能夠爲多個，即便未知多少個也能夠。

jade：

mixin list(...name)
    each i in name
        p my name is #{i}

+list('Tom', 'Jack', 'Jim', 'Alice', 'Allen')

html：

<p>my name is Tom</p>
<p>my name is Jack</p>
<p>my name is Jim</p>
<p>my name is Alice</p>
<p>my name is Allen</p>