模板引擎Jade

zp1996

前言:node.js的模板引擎有多种,如:ejsHandlebarsjade。一开始首先学习了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>
  • 设定classid:

div.tite#title代表的就是<div class='title' id='title></div>'
jade中还可以将div.tite#title简写为.title#title,也会被编译成相应的div

  • 设定其他属性:

除了classid,其余属性都要在括号内设定,如:

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>&lt;script&gt;alert(1);&lt;/script&gt;</div>
<div>&lt;script&gt;alert(1);&lt;/script&gt;</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与后台交互

首先我们需要了解的就是jadeAPI,详情请见:http://jade-lang.com/api/
经常用的的API有就是jade.renderFile(filename, options)filenamejade文件的一个路径,options是一些配置,如我们的jade文件内变量名的值,pretty是否进行格式化等;这个函数的返回值为html字符串

与后台交互的一个demo:
https://github.com/zp1996/Hel...
clone下来直接node app.js就行不用npm install
本文参考:
慕课网—带你学习Jade引擎

阅读 3.8k

zp的笔记
一些个人笔记

coder

3.2k 声望
48 粉丝
0 条评论

coder

3.2k 声望
48 粉丝
宣传栏