jade模板引擎（下）

[html]  view plain  copy

      三）模板继承

      1） jade会利用extends，block来实现父子模块的继承；

            1.1）block：

           父模块：用来引入指定jade块；

           子模块：用来定义某个jade块的内容；

            ps：jade块会覆盖父块中某处引入该jade块中所包含的后代元素的内容；

           1.2） extends：

             将子模块继承父模块，父模块中的内容会出现在子模块中；

              语法：extends 文件

          2）前置，后置追加：

           2.1）前置：在jade块默认的内容前添加该jade块定义的内容 ；

            语法：block prepend  指定jade块

             eg：      父：        doctype    html                                                 （子）   extends 父

                                          html                                                                                         block prepend scriptA

                                                head                                                                                            script（title="3"）

                                                       block scriptA                                                                         script（title="4"）

                                                                 script(title="1")

                                                                 script(title="2") 

            

             最后script加载的顺序是3412；

              2.2）后置：在jade块默认的内容后方添加该jade块定义的内容：

                       语法：    block  append 指定jade块                                     

             eg：      父：        doctype    html                                                 （子）   extends 父

                                          html                                                                                         block append scriptA

                                                head                                                                                            script（title="3"）

                                                       block scriptA                                                                         script（title="4"）

                                                                 script(title="1")

                                                                 script(title="2") 

            最后script执行顺序：1234;

      四）模块包含：

            定义：jade可以将静态资源（html，css，js，jade）以文本块的形式引入到jade中指定位置；

            语法：     include filename（相对当前文件路径）；

            eg：

[html]  view plain  copy

1. doctype html  
2.     html  
3.           head  
4.                 include  jade/exam  
5.                 style  
6.                       include style/exam.css  
7.                  script  
8.                       include js/exam.js  
9.            body  
10.                 #d1  
11.                      p welcome  
12.                 #d2  
13.                      include jade/contentA  
14.                      p end  
15.                  block contentB  
16. jade/exam:  
17.             title= title  
18. etyle/exam.css:  
19.              #d1{.....}  
20.              #d2{.....}  
21. ja/exam.js:  
22.               console.log("ok");  
23. jade/contentA:  
24.               p: span#s1(title="#{变量}")= 变量  

因为include可以包含块内容，而引入的内容会在块内容之前出现，所以可以用yeild可决定块内容的摆放位置；

 eg：      

[html]  view plain  copy

1. include  jade/one  
2.             p 1  
3.             p 2  
4. jade/one:  
5.             p 3  
6.             yeild  
7.             p 4  
8. 最后结果是：3 1 2 4  

         五）mixins

                定义：用来定义重复利用的块；

                语法：mixin  name

                                     content

                          +name( )     //调用

            5.1）可以在mixin中引入参数；

                    eg：

[html]  view plain  copy

1. mixin  A(name)  
2.           div(class="#{name}")  content  
3. +A("i1")  
4. +A("i2")  

           5.2)mixin引入外部块：

eg：

[html]  view plain  copy

1. mixin A（name）  
2.          p(title="i") = name  
3.          if block  
4.             block  
5.          else  
6.             p one  
7. +A("Hi")  
8.    p i1  
9.    p i2  

ps:block在mixin中表示外 部块的后代内容；

        六）case

              定义：case....when与 switch....case功能基本一致；

              语法：

                         case   表达式

                                  when  条件1：contentA

                                  when  条件2：contentB

                                  .......

                                  default : contentN