Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。

功能

· 客户端支持

· 超强的可读性

· 灵活易用的缩进

· 块扩展

· 代码默认经过编码处理以增强安全性

· 编译及运行时的上下文错误报告

· 命令行编译支持

· HTML5模式（使用!!!5文档类型）

· 可选的内存缓存

· 联合动态和静态标记类

· 利用过滤器解析树的处理

· 支持 Express JS

· 利用each透明的循环objects,arrays甚至不可枚举对象

· 块注释

· 不需要标记前缀

· AST过滤器

· 过滤器

o :sass 需要安装sass.js

o :less 需要安装less.js

o :markdown 需要安装markdown-js或node-discount

o :cdata

o :coffeescript 需要安装coffee-script

· Vim语法文件

· TextMate包

· Screencasts

其它语言实现

· php

· Scala

· Ruby

安装

通过npm：

npm install jade

浏览器支持

可以通过下面命令将jade编译为客户端浏览器兼容的文件：

$ make jade.js

或者，如果你已经通过npm安装了uglifyjs（npminstalluglify-js），可以通过下面的命令同时创建两个文件：

$ make jade.min.js

公开API

var jade = require('jade');

// 渲染字符串

jade.render('.csser.com 字符串', { options: 'here' });

// 渲染文件

jade.renderFile('path/to/csser.com.jade', { options: 'here' }, function(err, html){

// 这里的options是可选的

// 回调函数可以作为第二个参数

});

// 编译一个函数

var fn = jade.compile('string of jade', options);

fn.call(scope, locals);

Options

· scope 执行作用域（this）

· locals 本地变量对象

· filename 处理异常及缓存时使用

· cache 通过文件名将Javascript缓存在内存中

· debug 输出生成的标记和函数体

· compiler 替换jade默认编译引擎

语法

行尾

在解析前会将 CRLF 和 CR 转换为 LF.

标记

标记是一行的第一个单词：

html

会被转换为 <html></html>

标记也可以有id：

div#container

这将被渲染成<div id=”container”></div>

如何处理类？

div.user-details

渲染为: <div class=”user-details”></div>

多个class？并且还有id？

div#foo.bar.baz

渲染为：<div id=”foo” class=”bar baz”></div>

总写div确实很烦人，可以省略之：

#foo

.bar

输出： <div id=”foo”></div><div class=”bar”></div>

标记文本

只需要将文本内容放在标记后面：

p wahoo!

渲染为 <p>wahoo!</p>.

酷，但是如何处理大段文本呢？

p

| foo bar baz

| rawr rawr

| super cool

| go jade go

渲染为 <p>foo bar baz rawr…..</p>

内插法？是的，这两种类型的文本都可以使用内插法，如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }}，可以这样做：

#user #{name} <#{email}>

输出：<div id=”user”>一回 <xianlihua[at]gmail.com></div>

出于某种原因需要输出#{}？转义之：

p \#{CSSer, 关注Javascript技术}

这样就得到了：<p>#{CSSer, 关注Javascript技术}</p>

也可以使用反转义变量!{html}，下面的代码将输出script标记：

- var html = "<script></script>"

| !{html}

包含文本的嵌套标记也可以使用文本块：

label

| Username:

input(name='user[name]')

或者直接使用标记文本:

label Username:

input(name='user[name]')

只接受纯文本的标记，如script,style,以及textarea不需要开头的|字符，例如：

html

head

title CSSer, 关注Web前端技术

script

if (foo) {

bar();

} else {

baz();

}

再次作为替代方案，我们可以使用点号’.'来表示一个文本块，例如：

p.

foo asdf

asdf

asdfasdfaf

asdf

asd.

输出:

<p>foo asdf

asdf

asdfasdfaf

asdf

asd

.

</p>

如果点号’.'与标记之间有空格，Jade解析其会忽略它，将其作为文本处理：

p .

输出:

<p>.</p>

注释

单行注释当前看起来与Javascript一致，即“//”，单行注释的内容必须放在同一行上：

// 一些段落

p foo

p bar

将会输出：

<!-- 一些段落 -->

<p>foo</p>

<p>bar</p>

Jade也支持非缓冲注释，只需增加一个横杠：

//- 该行注释将不会被输出到解析后的页面中

p foo

p bar

输出：

<p>foo</p>

<p>bar</p>

块注释

块注释会依据缩进进行处理：

body

//

#content

h1 CSSer,关注Web前端技术

输出：

<body>

<!--

<div id="content">

<h1>CSSer,关注Web前端技术</h1>

</div>

-->

</body>

Jade也支持条件注释，例如：

body

/if IE

a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox

输出:

<body>

<!--[if IE]>

<a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>

<![endif]-->

</body>

嵌套

Jade支持通过嵌套来以自然的方式定义标记：

ul

li.first

a(href='#') foo

li

a(href='#') bar

li.last

a(href='#') baz

块扩展

块扩展允许创建单行的简洁嵌套标记，下面的示例与上例输出相同：

ul

li.first: a(href='#') foo

li: a(href='#') bar

li.last: a(href='#') baz

特性

目前Jade支持’(‘和’)'的特性定界符。

a(href='/login', title='View login page') Login

另外我们也可以使用冒号（:）来作为分割符：

a(href: '/login', title: '注册成为CSSer.com会员') Login

Boolean特性也被支持：

input(type="checkbox", checked)

值为变量的Boolean特性只有在值为true时输出：

input(type="checkbox", checked: someValue)

分拆在多行也能正常解析：

input(type='checkbox',

name='agreement',

checked)

文档类型

利用!!!来增加页面的文档类型：

!!!

将会输出过渡型文档类型，然而：

!!! 5

将会输出HTML5的文档类型，下面是默认定义的文档类型，这也可以很容易的被扩展：

var doctypes = exports.doctypes = {

'5': '<!DOCTYPE html>',

'xml': '<?xml version="1.0" encoding="utf-8" ?>',

'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',

'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',

'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',

'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',

'1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',

'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',

'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'

};

要修改默认值只需改变：

jade.doctypes.default = 'whatever you want';

过滤器

过滤器以冒号（:）作为前缀，如 :markdown 将会对文本进行函数处理，（一回注：类似Smarty的变量调节器），本页开始处列出了目前Jade支持的过滤器。

body

:markdown

Woah! jade _and_ markdown, very **cool**

we can even link to [CSSer](http://www.csser.com)

渲染后:

<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>

过滤器也可以处理解析树，通常过滤器可以正常处理文本块，但是通过传入规则的块过滤器可以做任何它能做的。

body

conditionals:

if role == 'admin'

p You are amazing

else

p Not so amazing

代码

Jade目前支持三种类型的可执行代码，第一种以-为前缀，不会被缓冲：

- var foo = 'bar';

这可被用于条件或循环：

- for (var key in obj)

p= obj[key]

由于Jade的缓冲技术，下面的代码是有效的：

- if (foo)

ul

li yay

li foo

li worked

- else

p oh no! you are not in csser.com

甚至详细的迭代循环：

- if (items.length)

ul

- items.forEach(function(item){

li= item

- })

任何你希望的都可以实现！

接下来我们转义了缓冲代码，用于缓冲返回值，以等号（=）作为前缀：

- var foo = 'bar'

= foo

h1= foo

输出： bar<h1>bar</h1>. 被’='缓冲的代码会默认经过转义以增强安全性，要输出为转义的值需要使用 !=：

p!= aVarContainingMoreHTML

一个允许使用”vanilla”Javascript的例外，是 – each 标记，其表现形式为：

- each VAL[, KEY] in OBJ

实现循环数组的例子：

- var items = ["one", "two", "three"]

- each item in items

li= item

输出:

<li>one</li>

<li>two</li>

<li>three</li>

循环对象的键和值：

- var obj = { foo: 'bar' }

- each val, key in obj

li #{key}: #{val}

这会输出 <li>foo: bar</li>

也可以进行嵌套循环：

- each user in users

- each role in user.roles

li= role

当一个属性为undefined，Jade会输出空串，例如：

textarea= user.signature

近期的Jade版本会输出空字符串而不是undefined：

<textarea></textarea>

命令行工具：bin/jade

输出html到标准输出（stdout）：

jade examples/*.jade --pipe

生成 examples/*.html ：

jade examples/*.jade

传入参数：

jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'

[完]

js 模板引擎 jade使用语法的更多相关文章

  1. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  2. js模板引擎之juicer，特别好用

    中文文档地址 https://www.npmjs.com/package/juicer Juicer基础知识:语法2  http://blog.163.com/lvshutao@126/blog/st ...

  3. js模板引擎-art-template常用

    art-template javascript 模板引擎 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一.引 ...

  4. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  5. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

  7. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  8. JS模板引擎：tppl

    全球最快的JS模板引擎:tppl 废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发 ...

  9. 百度JS模板引擎 baiduTemplate 1.0.6 版

    A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...

随机推荐

  1. spoj 10606 Balanced Numbers 数位dp

    题目链接 一个数称为平衡数, 满足他各个数位里面的数, 奇数出现偶数次, 偶数出现奇数次, 求一个范围内的平衡数个数. 用三进制压缩, 一个数没有出现用0表示, 出现奇数次用1表示, 出现偶数次用2表 ...

  2. QR Code於台灣各行業的行銷應用案例介紹

    當走在東京的大街小巷時,在五花八門的廣告看板.雜誌.護照簽證.海關.宣傳品.廣告.旅遊和導覽手冊.產品包裝.甚至在餐廳菜單上,皆可看到上面有一組黑色神秘二維條碼圖案:QR Code,當看到有興趣的商品 ...

  3. nat123外网SSH访问内网LINUX的N种方法

    一,动态公网IP环境 1,环境描述: 路由器分配的是动态公网IP,且有路由管理权限,LINUX主机部署在路由内网.如何实现外网SSH访问内网LINUX主机? 2,解决方案: 使用nat123动态域名解 ...

  4. BZOJ 3498 PA2009 Cakes（三元环处理）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3498 [题目大意] N个点m条边,每个点有一个点权a. 对于任意一个三元环(j,j,k ...

  5. java设计模式（二）单例模式 建造者模式

    (三)单例模式 单例模式应该是最常见的设计模式,作用是保证在JVM中,该对象仅仅有一个实例存在. 长处:1.降低某些创建比較频繁的或者比較大型的对象的系统开销. 2.省去了new操作符,减少系统内存使 ...

  6. angular学习(一):动态模板总结

    近期在项目中用到了angular,之前从未用到过此js lib库,因为项目也比較着急,学习的寥寥草草.到眼下为止也仅仅是学会皮毛而已,现将自己学习的知识总结例如以下: 备注1: 版本:1.2.2 备注 ...

  7. 生产环境提升rman备份速度----启动块跟踪

    生产环境提升rman备份速度----启动块跟踪 [环境] AIX(5300-08).oracle10g(10.2.0.1.0-64bit) [目标] 因为生产环境数据量较大,欲加快rman备份的速度 ...

  8. 1.语言概述-JavaScript权威指南笔记

    上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...

  9. iOS 相互引用引起内存泄露问题说明

    release动作只会对自身计数减一,而不会对属性发出release消息,只有该对象的引用计数为0,系统才会对该对象的所有属性发出release消息 类A的属性有类B,类B的属性有类A,而且两者都是强 ...

  10. DEV GridControl 小结（持续添加）

    一.属性: 1.Views OptionsBehavior=>Editable:False  列表不可编辑 OptionsSelection=>EnableAppearanceFocuse ...