jade-mixin 代码的重用

有时候页面有好多个区块，比如列表区块，但是他们代码结构又是一模一样的怎么弄？jade天生就是节约成本，节约时间的，mixin就是让代码块可以重用的函数

 

mixin lession
　　p jade study

像这样，，一个mixin就完成了，怎么调用呢，通过一个+

+lession
=>
<p>jade study</p>

 

 

传参数的方式

mixin study(name,courses)
　　p #{name}
　　ul
　　　　each course in courses
　　　　　　li=course
+study('tom',['jade','node'])

=>

<p>tom</p>
<ul>
　　<li>jade</li>
　　<li>node</li>
</ul>

 

 

mixin的嵌套

mixin group(student)
　　h4 #{student.name}
　　　　+study(student.name, student.courses)
+group({name:'tom',courses:['jade','node']})

=>

<h4>tom</h4>
<p>tom</p>
<ul>
　　<li>jade</li>
　　<li>node</li>
</ul>

 

 

mixin内联代码块

mixin team(slogon)
　　h4 #{slogon}
　　if block
　　　　block
　　else
　　　　p no team
+team('slogon')
　　p good job

=>

<h4>slogon</h4>
<p>good job</p>

里面的good job会传到block里面去

 

添加属性

1、单个属性

mixin attr(name)
　　p(class!=attributes.class) #{name}
+attr('attr')(class='magic')

=>

<p class="magic">attr</p>

这里的attributes.class已经转义过了，现在非转义

 

2、多个属性

mixin attrs(name)
　　p&attributes(attributes) #{name}
+attrs('attrs')(class='magic2',id='attrid')

=>

<p id="attrid" class="magic2">attrs</p>

 

在不知道参数多少个的时候，拿到所有参数

mixin magic(name,...items)
　　ul(class='#{name}')
　　　　each item in items
　　　　　　li=item
+magic('magic','node','jade','...')

=>

<ul class="magic">
　　<li>node</li>
　　<li>jade</li>
　　<li>...</li>
</ul>