jade 模板引擎

2016-10-23

摘要：jade 的学习笔记

jade 优缺点

优点：
1.超强的可读性
2.灵活易用的缩进
3.块扩展
4.代码默认经过编码处理，以增强安全性
5.编译及运行时有上下文错误报告
6.支持命令行编译
7.可选的内存缓存
8.联合动态的静态标记类、
9.可利用过滤器解析树的处理
缺点：
1.可移植性差
2.调试困难
3.性能不是很出色

基础语法

1.注释
单行注释 // 注释，编译后的文件可见
非缓冲注释 //- 注释，编译后的文件不可见（完全不编译）
注释父级，全部子级也会被注释

2.文档声明和标签
a.添加一个doctype只需要doctype，然后再跟一个可选的值，默认是html
b.标签后面跟上#id，.class（可以有多个），如果没有标签则使用默认标签div
c.标签属性要写在小括号()内（id和class属性可以直接写在标签后面）,多个属性需要使用逗号,隔开
d.标签属性写完后空一格是标签内容，子级标签需要换行并落后父级2个或4个空格（tab键也可以），但一定要使用统一的缩进来嵌套标签
index.jade

doctype html
html
  head
    meta(charset="utf-8")
    title jade
body
    h1#id1.class1.class2
    #id2.class1.class2

3.大段文本
大段文本的有两种处理方式
第一种

1
2
3

p
  | 1.第一行
  | 2.第二行

第二种

1
2
3

p.
    1.第一行
    2.第二行

都会被处理为

<p>
  1.第一行
  2.第二行
</p>

页面显示如图
blog6

如果是

1
2
3

script.
    console.log(1)
    console.log(2)

编译后

<script>
  console.log(1)
  console.log(2)
</script>

4.命令行编译
直接命令行编译
压缩

1	jade index.jade

非压缩

1	jade -P index.jade

实时编译

1	jade -P -w index.jade

5.变量传值
a.外部传值，--obj与对象关联，-O与文件关联

1	jade index.jade -P -w --obj "{'name':'<xiaowang>'}"

或者

1 2	// index.json {'name':'<xiaowang>'}

执行命令

1	jade index.jade -P -w -O index.json

b.内部传值

1	- var name = "xiaowang"

内部传值的变量优先级高于外部

6.变量调用
当变量作为内容时
转义

1 2	p #{name} p= name

不转义

1 2	p !{name} p!= name

编译后

<p>&lt;xiaowang&gt;</p>
<p>&lt;xiaowang&gt;</p>
<p><xiaowang></p>
<p><xiaowang></p>

当变量作为属性时,有两种写法

1 2	p(value='#{name}') p(value=name)

这两种写法在一般情况下没什么区别，但如果变量没有赋值，前者的value属性值为undefined,后者则不会有value属性

1 2	p(value='#{name1}') 有属性 p(value=name1) 无属性

编译后

1 2	<p value="undefined">有属性</p> <p>无属性</p>

7.循环

- var arr = ['a','b','c']
- var obj = {'x':'xiao','y':'zhong','z':'da'}
// for循环数组
- for(var index in arr) 
    p= arr[index]
// each循环数组和对象
each value in arr
    p= value
each value in obj
    p #{value}
each value,key in obj
    p #{key} : #{value}
// while
- var i = 0 
ul
    while i < 4
        li= i++

编译后

<!-- for循环数组-->
<p>a</p>
<p>b</p>
<p>c</p>
<!-- each循环数组和对象-->
<p>a</p>
<p>b</p>
<p>c</p>
<p>xiao</p>
<p>zhong</p>
<p>da</p>
<p>x : xiao</p>
<p>y : zhong</p>
<p>z : da</p>
<!-- while-->
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

支持多层嵌套

8.条件语句

// if语句
-var a = 0
  if a > 0
      p 正数
  else if a < 0
      p 负数
  else
      p 零
// unless与if相反，不是XXX就XXX
unless a < 0
  p a为非负数
// case:类似 switch 的分支判断语句
- var name = 'jade'
case name
  // 前三种情况都会输出
  when 'html'
  when 'css'
  when 'js'
      p 学习前端基础
  // 两种书写方式（推荐第一种）
  when 'jade'
      p 学习jade
  when 'node': p 学习node
  // 其他情况
  default
      p 学习其他知识

编译后

<!-- if语句-->
<p>零</p>
<!-- unless与if相反，不是XXX就XXX-->
<p>a为非负数</p>
<!-- case:类似 switch 的分支判断语句-->
<p>学习jade</p>

mixin混合宏

创建混合宏需要使用mixin标识符，创建混合宏实例时，需要使用+标识符，可以相互调用内嵌

无参数

mixin people
  p xiaowang
  p 24
+ people()

编译后

1 2	<p>xiaowang</p> <p>24</p>

有参数

mixin people(name,age)
  p #{name}
  p #{age}
+ people('xiaowang',24)
+ people('dagang',33)

编译后

<p>xiaowang</p>
<p>24</p>
<p>dagang</p>
<p>33</p>

当参数的个数未知时

mixin people(name,...items)
  ul
    each item in items
      li= item
+ people('xiaowang',24,180,180,180)

编译后

<ul>
  <li>xiaowang</li>
  <li>24</li>
  <li>180</li>
  <li>180</li>
  <li>180</li>
</ul>

block

如果要替换混合宏的某个部分，可以使用block标识符来占位

mixin people(name,age)
  if block
    block
  else
    p #{name}
    p #{age}
// 无子级
+ people('xiaowang',24)
// 有子级
+ people('xiaowang',24)
  p dagang
  p 33

编译后

<!-- 无子级-->
  <p>xiaowang</p>
  <p>24</p>
<!-- 有子级-->
  <p>dagang</p>
  <p>33</p>

attributes

可以使用mixin来传递属性,只传递一个参数时

1
2
3

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

编译后

1	<p class="people">xiaowang</p>

传递多个参数时

1
2
3

mixin attr(name)
  p&attributes(attributes) #{name}
+ attrs('xiaowang')(class='people',id='person')

编译后

1	<p id="person" class="people">xiaowang</p>

include

引入其他的模块文件，可以是jade、css、html等,例如引入同级目录includes下的header.jade文件

1	include ./includes/header

继承

jade使用extends来继承代码片段,定义使用block+名字，调用几次便输出几次。注意路径要正确

// head.jade
doctype html
html
  head
    meta(charset="utf-8")
    title jade
  body
    block name
    block name

// body.jade
extends ./head.jade
block name
  p xiaowang

编译后

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jade</title>
  </head>
  <body>
    <p>xiaowang</p>
    <p>xiaowang</p>
  </body>
</html>

参考：
Jade学习
 带你学习Jade模板引擎