模板引擎Jade

前言：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 htmlhtml    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，一有改变自动编译。

基本语法

1. jade采取的是缩进的方式来确定其关系，并且无论是需要闭合的标签还是单个标签都是用其标签名即可，如：

div  h1 Hello  brdiv   h1 World

编译成html就是

  # Hello  # World

1. 设定class与id:

div.tite# title代表的就是'
在jade中还可以将div.tite# title简写为.title# title，也会被编译成相应的div

1. 设定其他属性：

除了class和id，其余属性都要在括号内设定，如：

meta(charset="utf-8")a(href="http://www.baidu.com", title="百度")

1. 一行文本太长怎么破：

这种情况是指，我们的文字太多，编译器会换行，这样我们的缩进就会被破坏，解决这个问题的方法有两种：

一： 缩进后一个|和一个空格：

p    | 1.aa    strong 11    | 2.bb    strong 22    | 3.cc    strong 33    | 4.dd    strong 44

二： 利用.:

p.  1.aa**11  2.bb22  3.cc22  4.dd44

注意：p的每一行内容，在.后开始**，利用.我们还可以写内置的样式与脚本：

style.      body{         color: gray;      }script.       var x = "123";

1. 注释：

jade的注释有两种：
一： 可以被编译到我们的html中：

// div# title 123html中的显示为：

二：非缓存注释，不能被编译到html中：
只需要在//后加一个-就可以//- # title 不会被编译到html中

jade同时允许我们假如对ie浏览器的条件判断注释，格式与html中一样：
换浏览器吧

1. 变量声明：

在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 = "alert(1);"div # {data}div= data  //- 注意,此时=要紧挨着div且与data之间有一空格// 编译成html得：alert(1);alert(1);

但是=号与# {}也有不同，那就是在我们所取得变量是没有定义的，用# {}取值取出来的是undefined，而=取出来的是空字符串：

input(type="text", value="# {zp}")input(type="text", value=zp)// html

二： !{}取值时不对变量进行转义，利用!=同样可以

- var data = "alert(1);"div !{data}div!= data  //- 注意,此时=要紧挨着div且与data之间有一空格// 编译成html得：alert(1);alert(1);

当我们需要在网页上输出# {}和!{}时，采用# {}和!{}就好。

流程控制语法

1. js原生流程控制语句

jade支持js原生的流程控制语句，如遍历对象属性时的for...in，遍历数组时的for，进行判断时的if...else：

- var arr = [1, 2, 3, 4];ul  - for (var i = 0, len = arr.length; i  3)  p the length of arr is more than 3else  p the length of arr is less than 3// html  1. 1  1. 2  1. 3  1. 4  1. 0  1. 1  1. 2  1. 3the length of arr is more than 3

1. 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 undefinedcase n  when 3    p n is three  when 4    p n is four  default     p n is n// htmlx: 1y: 2z: 3123zp is undefinedn is four

重用jade代码块

1. 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")// 编译后：attr// 我们想要传递的是多个属性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}

1. 模板继承

block demo  p this is a demo about how to use blockblock demo// 编译后：this is a demo about how to use blockthis is a demo about how to use block

模板的继承和thinkphp的模板继承语法基本类似，通过extend来进行继承，下面来看个例子：

// layout.jadehtml  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.jadeextends layoutblock content  block item    p a item in item.jade// 编译后我们会发现的就是外面的那个item块被里面的这个item块给覆盖掉了

1. include

通过include我们可以将页面抽象出一个个小块，可以说形成一个组件化的方式，比如头部，尾部，搜索框等，这样利于我们的维护我们的页面。
对于include来说我既可以引入.jade，也可以引入.html文件。

// 我们的一个页面的一个骨架doctype htmlhtml  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/Hel...
clone下来直接node app.js就行不用npm install
本文参考：
慕课网—带你学习Jade引擎

关键字：html, JavaScript, node.js

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！