网站加速服务,贵州飞乐云毕节网站建设,邯郸网站seo,杭州百度快照推广2013-12-11 发布Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 读完需要 69 分钟54Jade 是一个高性能的模板引擎#xff0c;它深受 Haml 影响#xff0c;它是用 JavaScript 实现的#xff0c;并且可以供 Node… 2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 54 Jade 是一个高性能的模板引擎它深受 Haml 影响它是用 JavaScript 实现的并且可以供 Node 使用。 试玩 你可以在网上试玩 Jade。 特性 客户端支持代码高可读灵活的缩进块展开Mixins静态包含属性改写安全默认代码是转义的运行时和编译时上下文错误报告命令行下编译jade模板HTML5 模式 (使用 !!! 5 文档类型)在内存中缓存(可选)合并动态和静态标签类可以通过 filters 修改树模板继承原生支持 Express JS通过 each 枚举对象、数组甚至是不能枚举的对象块注释没有前缀的标签AST Filters过滤器:stylus 必须已经安装 stylus:less 必须已经安装 less.js:markdown 必须已经安装 markdown-js 或者 node-discount:cdata:coffeescript 必须已经安装coffee-scriptEmacs ModeVim SyntaxTextMate BundleCoda/SubEtha syntax ModeScreencastshtml2jade 转换器其它实现 jade有其他语言的实现可以实现前后端渲染的统一 phpscalarubypythonjava安装 npm install jade浏览器支持 把 Jade 编译为一个可供浏览器使用的单文件只需要简单的执行: make jade.js如果你已经安装了 uglifyjs (npm install uglify-js)你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。 make jade.min.js 默认情况下为了方便调试Jade会把模板组织成带有形如 __.lineno 3 的行号的形式。 在浏览器里使用的时候你可以通过传递一个选项 { compileDebug: false } 来去掉这个。下面的模板 p Hello #{name}会被翻译成下面的函数 function anonymous(locals, attrs, escape, rethrow) { var buf []; with (locals || {}) { var interp; buf.push(\npHello escape((interp name) null ? : interp) \n/p); } return buf.join(); } 通过使用 Jade 的 ./runtime.js你可以在浏览器使用这些预编译的模板而不需要使用 Jade, 你只需要使用 runtime.js 里的工具函数, 它们会放在 jade.attrs, jade.escape 这些里。 把选项 { client: true } 传递给 jade.compile(), Jade 会把这些帮助函数的引用放在jade.attrs, jade.escape. function anonymous(locals, attrs, escape, rethrow) { var attrs jade.attrs, escape jade.escape, rethrow jade.rethrow; var buf []; with (locals || {}) { var interp; buf.push(\npHello escape((interp name) null ? : interp) \n/p); } return buf.join(); } API var jade require(jade);// Compile a function
var fn jade.compile(string of jade, options); fn(locals); 选项 self 使用 self 命名空间来持有本地变量. (默认为 false)locals 本地变量对象filename 异常发生时使用includes 时必需debug 输出 token 和翻译后的函数体compiler 替换掉 jade 默认的编译器compileDebug false的时候调试的结构不会被输出pretty 为输出加上了漂亮的空格缩进 (默认为 false)标签 标签就是一个简单的单词: html它会被转换为 html/html 标签也是可以有 id 的: div#container它会被转换为 div idcontainer/div 怎么加 class 呢 div.user-details转换为 div classuser-details/div 多个 class 和 id? 也是可以搞定的: div#foo.bar.baz 转换为 div idfoo classbar baz/div 不停的 div div div 很讨厌啊 , 可以这样: #foo
.bar这个算是我们的语法糖它已经被很好的支持了上面的会输出 div idfoo/divdiv classbar/div 标签文本 只需要简单的把内容放在标签之后 p wahoo!它会被渲染为 pwahoo!/p. 很帅吧但是大段的文本怎么办呢 p| foo bar baz| rawr rawr| super cool| go jade go渲染为 pfoo bar baz rawr...../p 怎么和数据结合起来 所有类型的文本展示都可以和数据结合起来如果我们把 { name: tj, email: tjvision-media.ca } 传给编译函数下面是模板上的写法: #user #{name} lt;#{email}gt;它会被渲染为 div idusertj lt;tjvision-media.cagt;/div 当就是要输出 #{} 的时候怎么办? 转义一下! p \#{something}它会输出 p#{something}/p 同样可以使用非转义的变量 !{html}, 下面的模板将直接输出一个 script 标签: - var html script/script | !{html} 内联标签同样可以使用文本块来包含文本 label| Username:input(nameuser[name])或者直接使用标签文本: label Username:input(nameuser[name])只 包含文本的标签比如 script, style, 和 textarea 不需要前缀 | 字符, 比如: htmlheadtitle Examplescriptif (foo) {bar();} else {baz();}这里还有一种选择可以使用 . 来开始一段文本块比如 p.foo asdfasdfasdfasdfafasdfasd.会被渲染为: pfoo asdf
asdfasdfasdfafasdf
asd
.
/p这和带一个空格的 . 是不一样的, 带空格的会被 Jade 的解析器忽略当作一个普通的文字: p .渲染为: p./p需要注意的是文本块需要两次转义。比如想要输出下面的文本 /pfoo\bar/p使用: p.foo\\bar注释 单行注释和 JavaScript 里是一样的通过 // 来开始并且必须单独一行 // just some paragraphs
p foo
p bar渲染为 !-- just some paragraphs --
pfoo/p pbar/p Jade 同样支持不输出的注释加一个短横线就行了 //- will not output within markup
p foo
p bar渲染为 pfoo/p
pbar/p 块注释 块注释也是支持的 body//#contenth1 Example渲染为 body!--div idcontenth1Example/h1/div--
/body Jade 同样很好的支持了条件注释 body//if IEa(hrefhttp://www.mozilla.com/en-US/firefox/) Get Firefox渲染为 body!--[if IE]a hrefhttp://www.mozilla.com/en-US/firefox/Get Firefox/a![endif]--
/body 内联 Jade 支持以自然的方式定义标签嵌套: ulli.firsta(href#) foolia(href#) barli.lasta(href#) baz 块展开 块展开可以帮助你在一行内创建嵌套的标签下面的例子和上面的是一样的 ulli.first: a(href#) fooli: a(href#) barli.last: a(href#) baz Case case 表达式按下面这样的形式写: htmlbodyfriends 10case friends when 0 p you have no friends when 1 p you have a friend default p you have #{friends} friends 块展开在这里也可以使用: friends 5htmlbodycase friends when 0: p you have no friends when 1: p you have a friend default: p you have #{friends} friends 属性 Jade 现在支持使用 ( 和 ) 作为属性分隔符 a(href/login, titleView login page) Login当一个值是 undefined 或者 null 属性 不 会被加上,所以呢它不会编译出 somethingnull. div(somethingnull)Boolean 属性也是支持的: input(typecheckbox, checked)使用代码的 Boolean 属性只有当属性为 true 时才会输出 input(typecheckbox, checkedsomeValue)多行同样也是可用的 input(typecheckbox,nameagreement,checked)多行的时候可以不加逗号 input(typecheckboxnameagreementchecked)加点空格格式好看一点同样支持 input(typecheckboxnameagreementchecked)冒号也是支持的: rss(xmlns:atomatom)假如我有一个 user 对象 { id: 12, name: tobi }我们希望创建一个指向 /user/12 的链接 href, 我们可以使用普通的 JavaScript 字符串连接如下: a(href/user/ user.id) user.name或者我们使用 Jade 的修改方式, 这个我想很多使用 Ruby 或者 CoffeeScript 的人会看起来像普通的 JS..: a(href/user/#{user.id}) user.nameclass 属性是一个特殊的属性你可以直接传递一个数组比如 bodyClasses [user, authenticated] : body(classbodyClasses)HTML 内联的 HTML 是可以的我们可以使用管道定义一段文本 : htmlbody| h1Title/h1| pfoo bar baz/p 或者我们可以使用 . 来告诉 Jade 我们需要一段文本 htmlbody.h1Title/h1pfoo bar baz/p 上面的两个例子都会渲染成相同的结果 htmlbodyh1Title/h1 pfoo bar baz/p /body/html 这条规则适应于在 Jade 里的任何文本 htmlbodyh1 User em#{name}/emDoctypes 添加文档类型只需要简单的使用 !!!, 或者 doctype 跟上下面的可选项: !!!会渲染出 transitional 文档类型, 或者: !!! 5或 !!! html或 doctype htmlDoctype 是大小写不敏感的, 所以下面两个是一样的: doctype Basic
doctype basic当然也是可以直接传递一段文档类型的文本 doctype html PUBLIC -//W3C//DTD XHTML Basic 1.1//EN渲染后: !DOCTYPE html PUBLIC -//W3C//DTD XHTML Basic 1.1//EN会输出 HTML5 文档类型. 下面的默认的文档类型可以很简单的扩展 var doctypes exports.doctypes {5: !DOCTYPE html,xml: ?xml version1.0 encodingutf-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 会把下面块里的文本交给专门的函数进行处理。查看顶部 特性 里有哪些可用的过滤器。 body:markdownWoah! jade _and_ markdown, very **cool**we can even link to [stuff](http://google.com)渲染为: bodypWoah! jade emand/em markdown, very strongcool/strong we can even link to a hrefhttp://google.comstuff/a/p/body 代码 Jade 目前支持三种类型的可执行代码。第一种是前缀 - 这是不会被输出的 - var foo bar;这可以用在条件语句或者循环中 - for (var key in obj)p obj[key]由于 Jade 的缓存技术下面的代码也是可以的 - if (foo)ulli yay li foo li worked - else p oh no! didnt work 哈哈甚至是很长的循环也是可以的 - if (items.length)ul- items.forEach(function(item){ li item - }) 所以你想要的 下一步我们要 转义 输出的代码比如我们返回一个值只要前缀一个 - var foo barfoo
h1 foo它会渲染为 barh1bar/h1. 为了安全起见使用 输出的代码默认是转义的,如果想直接输出不转义的值可以使用 ! p! aVarContainingMoreHTMLJade 同样是设计师友好的它可以使 JavaScript 更直接更富表现力。比如下面的赋值语句是相等的同时表达式还是通常的 JavaScript - var foo foo bar
foo foo bar Jade 会把 if, else if, else, until, while, unless 同别的优先对待, 但是你得记住它们还是普通的 JavaScript if foo barulli yay li foo li worked else p oh no! didnt work 循环 尽管已经支持 JavaScript 原生代码Jade 还是支持了一些特殊的标签它们可以让模板更加易于理解其中之一就是 each, 这种形式 each VAL[, KEY] in OBJ一个遍历数组的例子 - var items [one, two, three]
each item in items li item 渲染为: lione/li
litwo/li lithree/li 遍历一个数组同时带上索引 items [one, two, three]
each item, i in itemsli #{item}: #{i}渲染为: lione: 0/li
litwo: 1/li lithree: 2/li 遍历一个数组的键值 obj { foo: bar }
each val, key in objli #{key}: #{val}将会渲染为lifoo: bar/li Jade 在内部会把这些语句转换成原生的 JavaScript 语句就像使用 users.forEach(function(user){, 词法作用域和嵌套会像在普通的 JavaScript 中一样 each user in userseach role in user.rolesli role如果你喜欢也可以使用 for for user in usersfor role in user.rolesli role条件语句 Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号这样会看上去对设计师更友好一点同时要在心里记住这个表达式渲染出的是 常规 JavaScript for user in usersif user.role adminp #{user.name} is an admin else p user.name 和下面的使用了常规 JavaScript 的代码是相等的 for user in users- if (user.role admin)p #{user.name} is an admin - else p user.name Jade 同时支持 unless, 这和 if (!(expr)) 是等价的 for user in usersunless user.isAnonymousp| Click to viewa(href/users/ user.id) user.name 模板继承 Jade 支持通过 block 和 extends 关键字来实现模板继承。 一个块就是一个 Jade 的 block 它将在子模板中实现同时是支持递归的。 Jade 块如果没有内容Jade 会添加默认内容下面的代码默认会输出 block scripts, block content, 和 block foot. htmlheadh1 My Site - #{title}block scripts script(src/jquery.js) body block content block foot #footer p some footer content 现在我们来继承这个布局简单创建一个新文件像下面那样直接使用 extends给定路径可以选择带 .jade 扩展名或者不带. 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 foot 块 没有 定义所以它还会输出父级的 some footer content。 extends extend-layoutblock scriptsscript(src/jquery.js)script(src/pets.js)block contenth1 titleeach pet in petsinclude pet同样可以在一个子块里添加块就像下面实现的块 content 里又定义了两个可以被实现的块 sidebar 和 primary或者子模板直接实现 content。 extends regular-layoutblock content.sidebar block sidebar p nothing .primary block primary p nothing 前置、追加代码块 Jade允许你 替换 默认、 前置 和 追加 blocks. 比如假设你希望在 所有 页面的头部都加上默认的脚本你可以这么做 htmlheadblock headscript(src/vendor/jquery.js)script(src/vendor/caustic.js)bodyblock content现在假设你有一个Javascript游戏的页面你希望在默认的脚本之外添加一些游戏相关的脚本你可以直接append上代码块 extends layoutblock append headscript(src/vendor/three.js)script(src/game.js)使用 block append 或 block prepend 时 block 是可选的: extends layoutappend headscript(src/vendor/three.js)script(src/game.js)包含 Includes 允许你静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, HTML 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹 ./layout.jade
./includes/./head.jade./tail.jade下面是 layout.jade 的内容: htmlinclude includes/head bodyh1 My Site p Welcome to my super amazing site. include includes/foot 这两个包含 includes/head 和 includes/foot 都会读取相对于给 layout.jade 参数filename 的路径的文件, 这是一个绝对路径不用担心Express帮你搞定这些了。Include 会解析这些文件并且插入到已经生成的语法树中然后渲染为你期待的内容 htmlheadtitleMy Site/title script src/javascripts/jquery.js /scriptscript src/javascripts/app.js/script /head body h1My Site/h1 pWelcome to my super lame site./p div idfooter pCopyright(c) foobar/p /div /body /html 前面已经提到include 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后Jade 不会把这个文件当作一个 Jade 源代码并且会把它当作一个普通文本包含进来 htmlhead//- css and js have simple filters that wrap them instyle and script tags, respectivelyinclude stylesheet.cssinclude script.js body //- markdown files will use the markdown filter to convert Markdown to HTML include introduction.markdown //- html files have no filter and are included verbatim include content.html Include 也可以接受块内容给定的块将会附加到包含文件 最后 的块里。 举个例子head.jade 包含下面的内容 headscript(src/jquery.js)我们可以像下面给include head添加内容, 这里是添加两个脚本. htmlinclude headscript(src/foo.js)script(src/bar.js)bodyh1 test在被包含的模板中你也可以使用yield语句。yield语句允许你明确地标明include的代码块的放置位置。比如假设你希望把代码块放在scripts之前而不是附加在scripts之后 headyieldscript(src/jquery.js)script(src/jquery.ui.js)由于被包含的Jade会按字面解析并合并到AST中词法范围的变量的效果和直接写在同一个文件中的相同。这就意味着include可以用作partial的替代例如假设我们有一个引用了user变量的user.jade文件 h1 user.name
p user.occupation接着当我们迭代users的时候只需简单地加上include user。因为在循环中user变量已经被定义了被包含的模板可以访问它。 users [{ name: Tobi, occupation: Ferret }]each user in users .user include user 以上代码会生成 div classuserh1Tobi/h1 pFerret/p /div user.jade引用了user变量如果我们希望使用一个不同的变量user那么我们可以直接定义一个新变量user person如下所示 each person in users.useruser personinclude userMixins Mixins 在编译的模板里会被 Jade 转换为普通的 JavaScript 函数。 Mixins 可以带参数但不是必需的 mixin listulli foo li bar li baz 使用不带参数的 mixin 看上去非常简单在一个块外 h2 Groceries
mixin listMixins 也可以带一个或者多个参数参数就是普通的 JavaScript 表达式比如下面的例子 mixin pets(pets)ul.pets- each pet in pets li pet mixin profile(user) .user h2 user.name mixin pets(user.pets) 会输出像下面的 HTML: div classuserh2tj/h2 ul classpets litobi/li liloki/li lijane/li limanny/li /ul /div 产生输出 假设我们有下面的 Jade 源码 - var title yay
h1.title #{title}
p Just an example当 compileDebug 选项不是 false, Jade 会编译时会把函数里加上 __.lineno n;, 这个参数会在编译出错时传递给 rethrow(), 而这个函数会在 Jade 初始输出时给出一个有用的错误信息。 function anonymous(locals) { var __ { lineno: 1, input: - var title yay\nh1.title #{title}\np Just an example, filename: testing/test.js }; var rethrow jade.rethrow; try { var attrs jade.attrs, escape jade.escape; var buf []; with (locals || {}) { var interp; __.lineno 1; var title yay __.lineno 2; buf.push(h1); buf.push(attrs({ class: (title) })); buf.push(); buf.push( escape((interp title) null ? : interp) ); buf.push(/h1); __.lineno 3; buf.push(p); buf.push(Just an example); buf.push(/p); } return buf.join(); } catch (err) { rethrow(err, __.input, __.filename, __.lineno); } } 当 compileDebug 参数是 false, 这个参数会被去掉这样对于轻量级的浏览器端模板是非常有用的。结合 Jade 的参数和当前源码库里的 ./runtime.js 文件你可以通过 toString() 来编译模板而不需要在浏览器端运行整个 Jade 库这样可以提高性能也可以减少载入的 JavaScript 数量。 function anonymous(locals) { var attrs jade.attrs, escape jade.escape; var buf []; with (locals || {}) { var interp; var title yay buf.push(h1); buf.push(attrs({ class: (title) })); buf.push(); buf.push( escape((interp title) null ? : interp) ); buf.push(/h1); buf.push(p); buf.push(Just an example); buf.push(/p); } return buf.join(); } Makefile 的一个例子 通过执行 make 下面的 Makefile 例子可以把 pages/*.jade 编译为 pages/*.html 。 JADE $(shell find pages/*.jade)
HTML $(JADE:.jade.html)all: $(HTML)%.html: %.jade jade $ --path $ $ clean: rm -f $(HTML) .PHONY: clean 这个可以和 watch(1) 命令起来产生像下面的行为 $ watch make命令行的 Jade 使用: jade [options] [dir|file ...]选项:-h, --help 输出帮助信息-v, --version 输出版本号-o, --out dir 输出编译后的 HTML 到 dir-O, --obj str JavaScript 选项-p, --path path 在处理 stdio 时查找包含文件时的查找路径-P, --pretty 格式化 HTML 输出-c, --client 编译浏览器端可用的 runtime.js-D, --no-debug 关闭编译的调试选项(函数会更小)-w, --watch 监视文件改变自动刷新编译结果Examples:
# 编译整个目录$ jade templates# 生成 {foo,bar}.html $ jade {foo,bar}.jade # 在标准IO下使用jade $ jade my.jade my.html # 在标准IO下使用jade, 同时指定用于查找包含的文件 $ jade my.jade -p my.jade my.html # 在标准IO下使用jade $ echo h1 Jade! | jade # foo, bar 目录渲染到 /tmp $ jade foo bar --out /tmp 注意: 从 v0.31.0 的 -o 选项已经指向 --out, -O 相应做了交换 教程 cssdeck interactive Jade syntax tutorialcssdeck interactive Jade logic tutorial许可 Jade使用MIT许可证。 项目主页 jade-lang.com 转载于:https://www.cnblogs.com/zhangycun/p/10304209.html
