jade的复用块

jade的复用块，可以简单的作为一个函数来理解。
js中，函数的产生方式有两种，一种是函数声明，一种函数表达式。函数声明使用function关键字来声明，后跟函数名字、参数及函数体。然后参数可以有1个或多个，参数之间使用逗号分隔。使用关键字function声明的函数有一个特点，就是函数声明提升，在函数声明以前的代码种个也可以使用这个函数。这个特点是函数表达式所不具备的。

function add(num1,num2){
  var sum = num1 + num2;
  return sum;  
}

到jade中，有一种和js中函数类似的数据结构，叫做复用块。jade中的复用块使用关键字mixin来声明，关键字后跟复用块的名字，名字后可以跟参数列表，参数与参数之间使用逗号分隔，也可以不跟参数(不跟参数的时候，就可以不写复用块名后面的小括号)

mixin showName
    .name Nicholas
    .age 28

mixin box(cls,title)
    .box(class=cls)
        .hd
            h2=title
        .bd

上面两组为定义复用块的基本方式，定义完成之后就得调用它了，复用块的调用也很简单，通过使用加号(+) + 复用块的名字的方式实现调用。

+showName
+box("news","消息列表")

这样就实现了对复用块的调用，这里有一点需要注意的，就是js通过关键字function定义的函数可以实现函数提升，可以在函数定义之前的地方调用后面定义的函数，但jade中的复用块不可以，对复用块的调用只能在复用块的声明之后，jade中没有定义提升的概念。
上面的声明的box的复用块和调用，其实在我们的页面布局中是一个很经典的应用。我们在写网页的时候，一般情况下，项目中的很多网页都会有很多公用模块，我们之前的做法是先提取出来公共的UI模块，然后写一个基本的UI组件，然后以这个基本的UI组件为基础，在有相同结构的模块中直接复制一段代码，然后改个class名称，更改下模块的标题，就苏啊是一个新的模块完成了。传统的HTML结构：

<div class="box news">
    <div class="hd">
        <h2>新闻列表</h2>
    </div>
    <div class="bd"></div>
</div>

如果现在使用了jade的复用块的话，就不用使用复制代码的方式了，可以直接定义一个复用块就可以了，有了新的模块，直接调用定义好的复用块。

mixin box(cls,title)
    .box(class=cls)
        .hd
            h2=title
        .bd
+box("news","新闻列表")

这样就实现了一个新的新闻列表模块，“news”是我们给新模块的class名，“新闻列表”为新的模块的模块标题。其中模块“新闻列表”的class有2个box和news。这段jade代码解释为HTML后的对应代码为：

<div class="box news">
    <div class="hd">
        <h2>新闻列表</h2>
    </div>
    <div class="bd"></div>
</div>

从这个方面来讲，使用jade比直接使用HTML有了一定的进步。