模板引擎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

版权声明

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

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部