前言:node.js
的模板引擎有多种,如:ejs
,Handlebars
,jade
。一开始首先学习了ejs
,但是发现其有一个很大的弊端,那就是它不能继承(由于之前用的全部是thinkphp
的模板,所以用起来非常别扭,只能进行include
,而不能extend
),于是转为jade
,将html
做了一层抽象的模板引擎。
安装jade
利用npm全局安装:
$ npm install jade --global
由于sublime对jade没有高亮的支持,所以需要我们手动来安装插件,进入到sublime下的Packages,然后执行下面命令即可:
git clone https://github.com/davidrios/jade-tmbundle.git
Hello World
先来进行一个简单的小demo,感觉下jade
:
新建一个文件命名为:demo.jade
:
doctype html
html
head
meta(charset="utf-8")
title Jade
body
h1 Hello World
终端中执行命令jade demo.jade
,会发现我们的文件夹下多了一个demo.html
,这个就编译出来的html代码,打开一开会非常的乱:
这个代码是被压缩过的,没有任何可读性,我们改下命令就可以得出具有可读性的代码,jade demo.jade -P
:
但是每次更改完文件,我们都要手动来执行一次命令这样实在是太费时间了,我们可以采用jade demo.jade -P -w
,监控我们的jade
,一有改变自动编译。
基本语法
- jade采取的是缩进的方式来确定其关系,并且无论是需要闭合的标签还是单个标签都是用其标签名即可,如:
div
h1 Hello
br
div
h1 World
编译成html
就是
<div>
<h1>Hello</h1>
</div><br>
<div>
<h1>World</h1>
</div>
- 设定
class
与id
:
div.tite#title
代表的就是<div class='title' id='title></div>'
在jade
中还可以将div.tite#title
简写为.title#title
,也会被编译成相应的div
- 设定其他属性:
除了class
和id
,其余属性都要在括号内设定,如:
meta(charset="utf-8")
a(href="http://www.baidu.com", title="百度")
- 一行文本太长怎么破:
这种情况是指,我们的文字太多,编译器会换行,这样我们的缩进就会被破坏,解决这个问题的方法有两种:
一: 缩进后一个|
和一个空格:
p
| 1.aa
strong 11
| 2.bb
strong 22
| 3.cc
strong 33
| 4.dd
strong 44
二: 利用.
:
p.
1.aa<strong>11<strong>
2.bb<strong>22<strong>
3.cc<strong>22<strong>
4.dd<strong>44<strong>
注意:p的每一行内容,在.
后开始,利用.
我们还可以写内置的样式与脚本:
style.
body{
color: gray;
}
script.
var x = "123";
- 注释:
jade的注释有两种:
一: 可以被编译到我们的html
中:
// div#title 123
html中的显示为:
<!-- div#title 123-->
二:非缓存注释,不能被编译到html
中:
只需要在//
后加一个-
就可以//- #title 不会被编译到html中
jade同时允许我们假如对ie
浏览器的条件判断注释,格式与html中一样:
<!--[if IE 8]><strong>换浏览器吧</strong><![endif]-->
- 变量声明:
在jade中可以进行变量的声明,- var test = "zp1996"
,这样我们就声明了一个test
变量,要是想用这个变量的话也很简单,利用#{test}
就可以,并且这个{}
内支持js
语法,如:#{test.toUpperCase()}
,得到的就是ZP1996
,作为模板语言来说,当然可以接受外界传来的数据,但是需要注意的是在jade声明的变量优先级高于外面传入的,我们来尝试下外面传入数据的方式,首先我们将demo.jade的title
写成#{title}
,然后我们在终端中输入下面命令:
$ jade index.jade -P -w --obj '{"title": "Hello World"}'
打开浏览器刷新下,可以看到我们的网页的title值为Hello World。我们也可以利用一个json
文件来进行数据的传递,新建一个data.json
:
// json文件内容
{
"title": "Hello World"
}
// 终端输入命令
$ jade index.jade -P -w -O data.json
刷新浏览器,可以看到我们的title值仍为Hello World
。
jade在拿变量的时候其实有两种方式:
一:#{}
取值时对变量进行转义,利用=
号同样可以。
- var data = "<script>alert(1);</script>"
div #{data}
div= data //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得:
<div><script>alert(1);</script></div>
<div><script>alert(1);</script></div>
但是=
号与#{}
也有不同,那就是在我们所取得变量是没有定义的,用#{}
取值取出来的是undefined
,而=
取出来的是空字符串:
input(type="text", value="#{zp}")
input(type="text", value=zp)
// html
<input type="text" value="undefined">
<input type="text">
二: !{}
取值时不对变量进行转义,利用!=
同样可以
- var data = "<script>alert(1);</script>"
div !{data}
div!= data //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得:
<div><script>alert(1);</script></div>
<div><script>alert(1);</script></div>
当我们需要在网页上输出#{}
和!{}
时,采用\#{}
和\!{}
就好。
流程控制语法
- js原生流程控制语句
jade支持js原生的流程控制语句,如遍历对象属性时的for...in
,遍历数组时的for
,进行判断时的if...else
:
- var arr = [1, 2, 3, 4];
ul
- for (var i = 0, len = arr.length; i < len; i++)
li #{arr[i]}
- var n = 0;
ul
while (n < 4)
li= n++
if (arr.length > 3)
p the length of arr is more than 3
else
p the length of arr is less than 3
// html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>the length of arr is more than 3</p>
- each
jade提供了一些语法糖
each
来遍历对象或者数组
unless
进行条件判断,unless(x) = if (!x)
case when
来实现js原生的switch
- var obj = {x: 1, y: 2, z: 3};
each val, key in obj
p #{key}: #{val}
each val in obj
p #{val}
unless zp
p zp is undefined
case n
when 3
p n is three
when 4
p n is four
default
p n is n
// html
<p>x: 1</p>
<p>y: 2</p>
<p>z: 3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>zp is undefined</p>
<p>n is four</p>
重用jade代码块
mixin
定义公共代码(类似于函数)
在某些情况下,代码可能经常会重用,就像函数一样,mixin
就是为了解决这一问题:
// 基本语法:
mixin test
p zp1996
+test
// 既然说了像函数一样,那么它肯定也可以带有参数
mixin lessonsInfo(name, course)
p #{name}'s lessons:
ul
each val, id in course
li #{id}: #{val}
+lessonsInfo("zp", {"001": "数学分析", "002": "线性代数"});
// 还可以内联代码块
mixin show
if block
block
else
p no content for the time being
+show
p 123
// 编译后为
p 123
+show
// 编译后为
p no content for the time being
// 同时还只是传递属性
mixin attr(name)
p(class!=attributes.class) #{name}
+attr("attr")(class="demo")
// 编译后:
<p class="demo">attr</p>
// 我们想要传递的是多个属性
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs("attrs")(class="demo", id="demo")
// 参数不确定时和和ES2015中箭头函数的处理方式相同,就是...
mixin manyarg(name, ...items)
ul(class="#{name}")
each item in items
li #{item}
- 模板继承
block demo
p this is a demo about how to use block
block demo
// 编译后:
<p>this is a demo about how to use block</p>
<p>this is a demo about how to use block</p>
模板的继承和thinkphp
的模板继承语法基本类似,通过extend
来进行继承,下面来看个例子:
// layout.jade
html
head
meta(charset="utf-8")
title jade
style.
body{
color: gray;
}
script.
var x = "123";
body
block item
p a item in layout.jade
block content
// item.jade
extends layout
block content
block item
p a item in item.jade
// 编译后我们会发现的就是外面的那个item块被里面的这个item块给覆盖掉了
- include
通过include
我们可以将页面抽象出一个个小块,可以说形成一个组件化的方式,比如头部,尾部,搜索框等,这样利于我们的维护我们的页面。
对于include
来说我既可以引入.jade
,也可以引入.html
文件。
// 我们的一个页面的一个骨架
doctype html
html
head
meta(charset="utf-8")
title jade
body
include header
block content
include footer
jade与后台交互
首先我们需要了解的就是jade
的API
,详情请见:http://jade-lang.com/api/
经常用的的API有就是jade.renderFile(filename, options)
,filename
是jade
文件的一个路径,options
是一些配置,如我们的jade
文件内变量名的值,pretty
是否进行格式化等;这个函数的返回值为html
字符串
与后台交互的一个demo:
https://github.com/zp1996/Hello-World-Follow/tree/master/learnjade
clone下来直接node app.js
就行不用npm install
本文参考:
慕课网—带你学习Jade引擎