模板引擎Jade

shixinzhang 发布于2019-08-01 15:31 / 2777人阅读

摘要：前言的模板引擎有多种，如，，。一开始首先学习了，但是发现其有一个很大的弊端，那就是它不能继承由于之前用的全部是的模板，所以用起来非常别扭，只能进行，而不能，于是转为，将做了一层抽象的模板引擎。对于来说我既可以引入，也可以引入文件。

前言：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就是

</>复制代码 
  Hello

  World

设定class与id:

div.tite#title代表的就是

在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.aa11
2.bb22
3.cc22
4.dd44

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

</>复制代码
style.
body{
color: gray;
}
script.
var x = "123";

注释：

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

</>复制代码
// div#title 123
html中的显示为：

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

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

变量声明：

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

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

</>复制代码
input(type="text", value="#{zp}")
input(type="text", value=zp)
// html

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

</>复制代码
- var data = ""
div !{data}
div!= data //- 注意,此时=要紧挨着div且与data之间有一空格
// 编译成html得：

当我们需要在网页上输出#{}和!{}时，采用#{}和!{}就好。
流程控制语法
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

1

2

3

4

0

1

2

3
the length of arr is more than 3

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
x: 1
y: 2
z: 3
1
2
3
zp is undefined
n is four
重用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")
// 编译后：
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}

模板继承

</>复制代码
block demo
p this is a demo about how to use block
block demo
// 编译后：
this is a demo about how to use block
this is a demo about how to use block

模板的继承和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/Hel...
clone下来直接node app.js就行不用npm install
本文参考：
慕课网—带你学习Jade引擎

GPU云服务器云服务器模板引擎 python模板引擎 ejs模板引擎 smarty模板引擎

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49953.html

上一篇：小白上学のcanvas零基础

下一篇：和BEM的战斗：10个常见问题及如何避免

相关文章

模板引擎Jade

摘要：前言的模板引擎有多种，如，，。一开始首先学习了，但是发现其有一个很大的弊端，那就是它不能继承由于之前用的全部是的模板，所以用起来非常别扭，只能进行，而不能，于是转为，将做了一层抽象的模板引擎。对于来说我既可以引入，也可以引入文件。前言：node.js的模板引擎有多种，如：ejs，Handlebars，jade。一开始首先学习了ejs，但是发现其有一个很大的弊端，那就是它不能继承（由于...

omgdog 2019-08-22 10:34 评论0 收藏0

Express 文档（使用模板引擎）

摘要：一些与一起使用的流行模板引擎是和，应用程序生成器使用作为其默认值，但它也支持其他几个。有关可与一起使用的模板引擎列表，请参阅模板引擎，另请参阅比较模板引擎等。，使用的模板引擎，例如，要使用模板引擎。使用模板引擎模板引擎使你可以在应用程序中使用静态模板文件，在运行时，模板引擎用实际值替换模板文件中的变量，并将模板转换为发送到客户端的HTML文件，这种方法可以更轻松地设计HTML页面。...

gxyz 2019-08-23 14:21 评论0 收藏0

10个最好的 JavaScript 模板引擎

摘要：是一个有着完善和惊艳特性的模板引擎。是一个强大的客户端模板引擎，用来将数据绑定到页面的结构中。一套同时可用于浏览器或的异步模板引擎。是一套富功能的模板引擎。本文链接个最好的模板引擎来源编译含内容扩充责任沙渺 JavaScript随着各种神奇的实用功能库日渐丰富，而越来越受到Web开发者与设计师的追捧，例如：jQuery, MooTools, Prototype等。使用JavaScr...

Stardustsky 2019-08-19 14:44 评论0 收藏0

express web的一款mvc框架

摘要：相关的网站开发有这么常用的四款数据层视图层控制层框架，我们今天说一下阿里的框架是一个自身功能极简，完全是由路由和中间件构成一个的开发框架安装创建一个目录通过命令为你的应用创建一个文件。修改请求和响应对象。注意只对使用或加载的中间件有效。 express express相关的网站*http://expressjs.com/*http://www.expressjs.com.cn/*htt...

_ang 2019-08-21 17:11 评论0 收藏0

前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0

发表评论

登陆后可评论

0条评论

shixinzhang

男|高级讲师

我要关注我要私信

TA的文章
阅读更多

一道2016年nice的校招笔试题引发的思考

阅读 1060·2021-11-24 09:39

CloudCone,IPv6,KVM,MC机房,SSD硬盘,VPS,便宜VPS,服务器,服务器租用,

阅读 3494·2021-10-27 14:20

前端基础知识学习记录（三）

阅读 2386·2019-08-30 14:08

关于CSS里BFC特性的理解和应用

阅读 3467·2019-08-29 16:34

微信小程序input标签正则初体验

阅读 2266·2019-08-26 12:14

Vue组件-极简的地址选择器

阅读 2184·2019-08-26 11:54

javascript：this 关键字

阅读 2857·2019-08-26 11:44

JS-Number—了解IEEE双精度浮点数

阅读 2549·2019-08-26 11:38

最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

模板引擎Jade

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

Hello

World

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动