js 模板引擎 jade使用语法

分享到:

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

功能

· 客户端支持

· 超强的可读性

· 灵活易用的缩进

· 块扩展

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

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

· 命令行编译支持

· HTML5模式(使用!!!5文档类型)

· 可选的内存缓存

· 联合动态和静态标记类

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

· 支持 Express JS

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

· 块注释

· 不需要标记前缀

· AST过滤器

· 过滤器

o :sass 需要安装sass.js

o :less 需要安装less.js

o :markdown 需要安装markdown-jsnode-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" }}'

[完]

昵    称:
验证码:

相关文档:

  • html5实现web app摇一摇换歌
    微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在webapp上实现类似于微...
  • HTML5轻松实现拍照上传功能[转载]
    转载http://www.18sucai.com/article/275.htm 传统方法如果想实现拍照功能,需要后台应用程序复杂的编写,但随着html5的发展,在HTML5规范的支持...
  • 基于HTML5/CSS3可折叠的3D立方体动画
    今天要给大家带来另外一款CSS33D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体...
  • create-html5-canvas-javascript-drawing-app
    create-html5-canvas-javascript-drawing-app...
  • 【PHP开发】国外程序员收集整理的 PHP 资源大全
    ziadoz在Github发起维护的一个PHP资源列表,内容包括:库、框架、模板、安全、代码分析、日志、第三方库、配置工具、Web工具、书籍、电...
  • 移动前端头部标签(HTML5 head meta)
    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用...
  • browser.html – HTML 实现 Firefox UI
    browser.html是一个实验性的项目,用于证明一个概念:使用HTML重新实现FirefoxUI,并作为一个应用程序。它是基于浏览器的API,并以浏览器...
  • [html5/css3] html5 canvas --绘制变形图形
    <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>html5canvas--绘制变形图形</title> <script> wi...
  • Html5选择本地视频音频文件播放
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <scriptsrc="../Script/jquery-1.9.1.min.js"t...
  • 让所有浏览器支持HTML5 video视频标签
    让所有浏览器支持HTML5video视频标签 一、前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我...
  • 大熊君学习html5系列之------XHR2(XMLHttpRequest Level 2)
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点...
  • HTML5新特性学习-2
    本文在于巩固基础 HTML5绘图基础 <canvas>画布元素的使用 <div> <canvasid="can"width="200px"height="200px"></canvas> </div>...
  • javascript+html5+canvse+3d俄罗斯方块
    javascript+html5+canvse+3d俄罗斯方块 必须使用支持html5的浏览器打开,比如firefox,chrome 得分:0速度:1000...
  • 基于html5制作3D拳击游戏源码下载
    今天给大家分享一款基于HTML5实现的3d拳王游戏源码。这款实例适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.不支...
  • 基于HTML5 Canvas可撕裂布料效果
    分享一款布料效果的HTML5Canvas应用演示,效果逼真。你会看到,借助Canvas的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神...
  • Html5 Web Workers
    web worker 是运行在后台的 JavaScript,不会影响页面的性能。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。...
  • [html5/css3]html5 表单验证
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5中的表单</title> <scripttype="text/javascript">...
  • 浅析天猫H5站点
    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿、艺龙、同程等与携程的移动站点竞品分析,竞品分析...
  • html5的视频和音频的兼容问题
    /*html5的视频和音频的兼容问题*/ 跨浏览器兼容的HTML5视频音频播放器 HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支...
  • W3C vs. WHATWG HTML5 Specs – The Differences Documented
    Afewweeksago,HTML5becameanofficialW3CRecommendation.Itookadvantageofthiseventtodiscuss5interestingbutnowobsoletefeaturesonSitePoint.Theproblemisthatth...