欢迎来到[自学php网] ①群 287460651

主页 > 网站前端 > javascript >

jade中文模板引擎简明文档

来源:未知    时间:2018-06-25 17:01 作者:小飞侠

[导读] jade中文模板引擎简明文档 Jade是变体的HTML 来看一个官网上的 Jade 示例。(左边为 Jade ,右边为对应的HTML) doctype html html(lang=en)headtitle= pageTitle script(type=text/javascript).if (foo) {bar(1 + 5)}...

jade中文模板引擎简明文档

Jade是变体的HTML

来看一个官网上的Jade示例。(左边为Jade,右边为对应的HTML)

doctype html
html(lang="en")headtitle= pageTitle
script(type='text/javascript').if (foo) {bar(1 + 5)}
bodyh1 Jade - node template engine
#container.colif youAreUsingJade
p You are amazing
elsep Get on it!p.Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
<!DOCTYPE html>
<html><head>
<title>Jade</title>
<script type="text/javascript">if (foo) {bar(1 + 5)}</script></head>
<body><h1>Jade - node template engine</h1>
<div id="container"><p>You are amazing</p>
<p>Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.</p></div></body></html>

在这里我们可以看到,相对于HTML,Jade中的元素(Element)标记(Tag)没有用“<>”包围,其属性(Attribute)是用“()”括起来的。

另外,你可能已经注意到了,Jade的元素没有相对应的“开始标记”和“结束标记”。Jade是用“缩进”来描述元素的从属关系(与Python的语法相似)。

DOCTYPE

HTML本质上是XML,在HTML文件的起始位置需定义doctype。

doctype html<!DOCTYPE html>

元素及属性

前面说过,在Jade中,元素是不需要用“<>”包围的,直接写元素的标记名(TagName)即可。

div<div></div>
diva<div><a></a></div>

在以上这个示例中, a 元素没有任何内容。而在实际开发中, a 元素一般都是包含有文本内容的,现在我们来为 a 元素添加文本内容:

diva Google<div><a>Google</a></div>

a 元素还应该有 href 属性:

diva(href="http://www.google.com") Google<div><a href="http://www.google.com">Google</a></div>

再加一个 target 属性:

diva(href="http://www.google.com", target="_blank") Google<div><a href="http://www.google.com" target="_blank">Google</a></div>

还可以用“=”设置元素包含的内容。“=”后可跟任何“表达式”,可以是一个字符串、一个“变量”,也可以是“函数”或“表达式”的运算结果。“=”后的内容会被转码(escaped)。

div= 'If you think you can, <b>you can</b>.'<div>If you think you can, &lt;b&gt;you can&lt;/b&gt;.</div>

“=”后的内容是“表达式”的例子:

div= 'If you think you can' + ', <b>you can</b>.'<div>If you think you can, &lt;b&gt;you can&lt;/b&gt;.</div>

关于“=”后跟“变量”的示例将在后面的示例中给出。

如果希望“=”后的内容不被转码呢?可在“=”前加“!”:

div!= 'If you think you can, <b>you can</b>.'<div>If you think you can, <b>you can</b>.</div>

对于布尔属性(Boolean Attribute),若将值设为false,则不会加入该属性。见下面的示例:

button(disabled=true) Click Mebutton(disabled=false) Click Me<button disabled>Click Me</button><button>Click Me</button>

还可以像下面这样设置元素的 style:

div(style={color:red, padding:'10px 5px'}) Style attributes<div style="color:red; padding:'10px 5px'">Style attributes</div>

是不是觉得这种写法完全没有必要?其实不然。如果这里 style 的值不是写死的,而是一个变量呢?是不是感觉要灵活多了?

在HTML中,除了大多数有明确关闭标记的元素外,还有一些自关闭(Self close)的元素,如:<img/>、<input/>。Jade模板解析器能自动识别自关闭元素。

img(src="/imgs/face.jpg")<img src="/imgs/face.jpg"/>

当然,你也可以明确标明这是一个自关闭元素:

img(src="/imgs/face.jpg")/<img src="/imgs/face.jpg"/>

纯文本

看看下面这段HTML代码,

<div><a href="http://google.com">Google</a>If you think you can, you can.</div>

在这段HTML代码中,div 包含了一个 a 元素与一段没有标记包围的文本。若要用Jade表述这段HTML,div 元素和 a 元素都可以用前面所述的方法实现,但剩下的那个没有标记包围的文本就不能用前面所述的方法实现了。

如果这样写:

diva(href="http://google.com") Google If you think you can, you can.

Jade模板解析器会认为这段文本是 a 元素包含的文本中的一部分:

<div><a href="http://google.com">Google If you think you can, you can.</a></div>

如果这样写:

diva(href="http://google.com") GoogleIf you think you can, you can.

Jade模板解析器会认为这是一个 <If> 元素:

<div><a href="http://google.com">Google</a><If>you think you can, you can.</If></div>

很显然,我们无法用前面所述的方法实现要求。为解决此类问题,要使用Jade的特殊字符“竖线”(|)。正确的写法是:

diva(href="http://google.com") Google| If you think you can, you can.

“|”告诉Jade模板解析器:将后面的内容原样输出。因此,“|”后面也可以包含HTML元素。

| this is HTML element, <a href="http://google.com">Google</a>this is HTML element, <a href="http://google.com">Google</a>

需要注意的是,“|”的“作用域”只有一行,若需要按原样输出多行文本,则要用到Jade的另一个特殊字符“.”。“.”一般用在填充<script>或<style>元素包含的内容。

script(type="text/javascript").window.onload = function(){console.log('hello jade');};<script type="text/javascript">window.onload = function(){console.log('hello jade');};</script>

如果希望在一段纯文本中插入Jade语句,则需要引入“#[]”语法:

div.My name is #[b CYF]<div>My name is <b>CYF</b></div>

嵌入Javascript代码

Jade支持嵌入Javascript代码。注意,这里指的不是运行于浏览器端的Javascript,而是指运行于Server端的Javascript。

(声明:本人并不建议在Jade中滥用嵌入逻辑代码,那样会不利于代码的可维护性与复用性。在Jade中嵌入的逻辑代码应仅仅是针对视图(View)本身的)

嵌入的Javascript代码必须以“-”开头:

- var blClosed = true;

Jade中嵌入Javascript代码能带来很大的便利性与灵活性。下面这个示例,用 for 循环生成了三个 div 元素:

- for(var i = 0; i < 3; i++)div This is div element<div>This is div element</div><div>This is div element</div><div>This is div element</div>

至于多行Javascript代码,当然可以在每一行代码前加“-”,但也有更简洁的写法,即让“-”独占一行,且Javascript“缩进”书写:

-var n = 3;for(var i = 0; i < n; i++)div This is div element<div>This is div element</div><div>This is div element</div><div>This is div element</div>

Jade自带的逻辑语法

Jade自带有一些逻辑语法,可与Javascript语句结合使用。这类语句前面不需要有“-”。

看完下面的示例后,你或许会想:这。。。不就是Python语法么?没错,这就是Python语法!

遍历

each ... in 语法:

- var ary = ['One', 'Two', 'Three'];each item in arydiv= item<div>One</div><div>Two</div><div>Three</div>

注意:前面说过,“=”后可跟“变量”,上面这个示例中“div=”后的“item”就是“变量”。

each ... in 还可获得“迭代”(iterate)的“索引”(index):

- var ary = ['One', 'Two', 'Three'];each item, index in arydiv= index + ':' + item<div>1:One</div><div>2:Two</div><div>3:Three</div>

从上面的示例可以知道,each ... in 的第二个变量即为索引。如果将 each ... in 作用于Object,则又是另一番景象,此时第二个变量为“键名”(key name):

- var obj = {'one': 1, 'two': 2, 'three': 3};each val, key in objdiv= key + ':' + val<div>one:1</div><div>two:2</div><div>three:3</div>

while 语法:

- var n = 0;while n < 3div= n++<div>0</div><div>1</div><div>2</div>

条件判断

if 语法:

- var bl0 = false, bl1 = true;if bl0div bl0 is trueelse if bl1div bl1 is trueelsediv all are false<div>bl1 is true</div>

case 语法:

- var gender = 0;case genderwhen 0div you are a girldefaultdiv you are a boy<div>you are a girl</div>

复用块(Reusable Block)

可以在Jade中定义“复用块”,以增强代码的复用性,及便于代码的维护。“复用块”用关键字“mixin”定义,用“+”调用。

mixin showNamediv CYF+showName+showName<div>CYF</div><div>CYF</div>

可将“复用块”理解为“函数”(function),它可接收“参数”(param),使“复用块”更具灵活性。

mixin showName(name)div= name+showName('CYF')+showName('Cao Yongfeng')<div>CYF</div><div>Cao Yongfeng</div>

“复用块”还可接收一个“块”(block)参数,即一组Jade语句,只需将这组Jade语句以“缩进”的形式写在“mixin”下面即可。

mixin showName(name)div= nameif blockblock+showName('CYF')div Welcome to my blog<div>CYF</div><div>Welcome to my blog</div>

在上个示例中,在调用“通用块”时使用了 block 参数,这是“通用块”隐含的参数,指以“缩进”的方式写在“mixin”下面的内容。

“通用块”还有另一个隐含参数“attributes”,看下面这个示例:

mixin showName(name)div(title!=attributes.title)= name+showName('CYF')(title='this is your name')<div title="this is your name">CYF</div>

attributes的数据来自第二个“()”。

需要注意的是,这里我们在使用attributes时用的是“!=”,而不是“=”。在这里如果用“=”,表示后面的内容会被转码,如果用“!=”,表示后面的内容不会被转码。

对C#有所了解的人都知道,C#的方法(method)支持“可变数目的参数”,Jade的“通用块”也支持“可变数目的参数”(Rest Arguments),在参数名前加“...”,即表示该参数的数目是可变的。不过需要注意的是,Jade中“可变数目的参数”与C#中“可变数目的参数”的含义是有所不同的,或许将Jade中的 Rest Arguments 理解为“其它参数”更为贴切。

mixin list(id, ...items)ul(id=id)each item in itemsli= item+list('mylist', 1, 2, 3)<ul id="mylist"><li>1</li><li>2</li><li>3</li></ul>

填充数据(Interpolation)

前面的示例中已经用到了很多用“=”给元素填充数据的方法,现在介绍另一种填充数据的方法:

- var str = 'my name is <b>CYF</b>';div= strdiv #{str}<div>my name is &lt;b&gt;CYF&lt;/b&gt;</div><div>my name is &lt;b&gt;CYF&lt;/b&gt;</div>

这里用到的新方法就是使用“#{}”将一个变量的数据填充进来。从上例中可以看到,使用“#{}”与使用“=”是等效的,同样对数据进行了转码。如果不希望转码,可将“#”改为“!”:

- var str = 'my name is <b>CYF</b>';div!= strdiv !{str}<div>my name is <b>CYF</b></div><div>my name is <b>CYF</b></div>

从上例可以看到,使用“!{}”与使用“!=”是等效的。

既然已经有了“=”和“!=”,为何还要引入“#{}”和“!{}”呢?这是因为有些地方只能使用“#{}”和“!{}”,而不能使用“=”和“!=”,如下面这个例子:

- var name = 'CYF';div my name is #{name}<div>my name is CYF</div>

与“=”、“!=”相比,“#{}”、“!{}”更灵活、能适应更多的场景。“=”、“!=”一般用在比较“简单”的场景。

注释

Jade的注释语法与大多数语言(Javascript、Java、C#等等)一样,使用“//”作为注释的开头:

// if you think you can, you can<!-- if you think you can, you can -->

如果是多行注释,则需在新行中“缩进”书写:

//if you think you can,you can<!--if you think you can,you can-->

可是。。。,这样的注释似乎给人怪怪的感觉。注释是给开发人员看的,而不是给用户看的,用户也不会对你的注释感兴趣。基于此,Jade引入了另一种注释语法“//-”,当Jade模板解析器遇到“//-”时,会忽略后面的语句:

//- if you think you can,div you can<div>you can</div>

HTML中的“条件注释”(Conditional Comments)是写给浏览器的,因此这类注释必须输出到客户端。但是在Jade中并没有“条件注释”的语法,因此在Jade中若要写此类注释,直接按HTML的语法书写即可:

<!--[if IE 8]><html><![endif]--><!--[if gt IE 8]><!--><html><!--<![endif]--><!--[if IE 8]><html><![endif]--><!--[if gt IE 8]><!--><html><!--<![endif]-->

继承(extends)

Jade支持继承,即一个Jade模板继承自另一个Jade模板:

//- layout.jadedoctype htmlhtmlheadtitle this is Titleblock scriptbodyblock content//- index.jadeextends layout.jade
block scriptscript(type="text/javascript", src="/js/jquery.js")
block contentdiv This is content
<!doctype html><html><head><title>this is Title</title><script type="text/javascript" src="/js/jquery.js"></script></head><body><div>This is content</div></body></html>

在上例中,layout.jade 文件是父模板,index.jade 是子模板,它继承自 layout.jade。

在父模板中,用关键字“block”定义可在子模板中替换的块,每个“block”有一个名字,在子模板中,同样用关键字“block”跟上该名字定义需在该“block”中填充的内容。

Jade支持多重继承,即子模板也可以是其它模板的父模板。

一些简写

以下左右两边的写法是等效的:

#theIddiv(id="theId")
div#theId if you think you can, you candiv(id="theId") if you think you can, you can
.theClassdiv(class="theClass")
div.theClass if you think you can, you candiv(class="theClass") if you think you can, you can
div&attributes({id:'theId', class:'theClass'})div(id="theId",)


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com