这篇文章主要介绍了详解 Node.js 模板引擎 Jade 入门, Jade 是 Node.js 的一个模板引擎, 小编觉得挺不错的, 现在分享给大家, 也给大家做个参考一起跟随小编过来看看吧
Jade 是 Node.js 的一个模板引擎, 它借鉴了 Haml 的很多地方, 所以语法上和 Haml 比较相近并且, Jade 也支持空格
1 标签
在 Jade 里, 一行开头的任何文本都被默认解释成 html 标签并且你只需要你写开始标签注意: 不需要加 <> 因为Jade会帮我们渲染闭合和开始标签例如:
body
div
h1 Jade 是 Node.js 的一个模板引擎
p 它借鉴了 Haml 的很多地方, 所以语法上和 Haml 比较相近
div
footer © Pandora
上面的 Jade 模板最终渲染出的 HTML 代码是:
- <body>
- <div>
- <h1> Jade 是 Node.js 的一个模板引擎</h1>
- <p > 它借鉴了 Haml 的很多地方, 所以语法上和 Haml 比较相近</p>
- </div>
- <div>
- <footer>© Pandora</footer>
- </div>
- </body>
注意: 如果没有写标签名, 则默认就是 div 标签
2 变量 / 数据
传给 Jade 模板的数据我们称之为 locals 使用等号 = 来输出一个变量的值
- (locals):
- {
- title: "Express.js Guide",
- body: "The Comprehensive Book on Express.js"
- }
- Jade code :
- h1= title p= body
渲染输出的 HTML :
- <h1>Express.js Guide</h1>
- <p>The Comprehensive Book on Express.js</p>
3 读取变量
Jade 中读取变量的值是通过 #{name}来实现的例如:
- - var title = "Node"
- p I love #{title}
在模板被编译时变量的值就会被处理, 所以, 不要在可执行 JavaScript(-)里使用它
4 属性
属性紧跟在标签之后, 且用 () 括起来, 多属性用, 分隔例如: body (name1 = value1, name2 = value2)
div(id="content", class='main')
a(href='http://csdn.net', title='csdn 主页', target='_blank') CSDN: 中国软件联盟
- form(action="/login")
- button(type="submit", value="提交")
输出:
- <div id="content" class='main'>
- <a href='http://csdn.net' title='csdn 主页' target='_blank'> CSDN: 中国软件联盟</a>
- <form action="/login">
- <button type="submit" value="提交">
- </form>
- </div>
动态属性:
动态属性即属性的值是动态的, 即用一个变量来表示属性的值符号 | 可以在新的一行里写 HTML 节点内容例如:
- a(href=url, data-active=isActive)
- label
- input(type="checkbox", checked=isChecked)
- | yes / no
提供给上面模板的数据:
- {
- url: "/logout",
- isActive: true,
- isChecked: false
- }
最终渲染后输出的 HTML:
- <a href=""data-active=" rel="external nofollow" data-active"></a>
- <label>
- <input type="checkbox" />yes / no
- </label>
注意: 属性值为 false 的属性在输出 HTML 代码时将被忽略; 而没有传入属性值时, 将默认为 true.
5 字面量
为了省事, 可以直接在标签名之后写类名和 ID 名例如:
- div#content
- p.lead.center
- | Pandora_galen
- #side-bar.pull-right // 没有标签名, 默认为 div
- span.contact.span4
- a(href="/contact" rel="external nofollow" rel="external nofollow" ) contact me
渲染输出的 HTML:
- <div id="content">
- <p class="lead center">
- Pandora_galen
- <div id="side-bar" class="pull-right"></div>
- <span class="contact span4">
- <a href="/contact" rel="external nofollow" rel="external nofollow" > contact me </a>
- </span>
- </div>
6 文本
使用 | 符号输出原始文本
div
| 我两年前开始学习前端
| 在此之间, 我学过了 html, jQuery, JavaScript, Python, CSS3, HTML5, Bootstrap, D3.js, SVG... 而现在我在学 Node 并且我已经深深的爱上了前端
7Script 和 Style 块
使用. 符号在 HTML 里创建
- script.console.log("Hello world!");
- setTiemout(function() {
- window.location.href = "http://csdn.net"
- },
- 1000);
- console.log("Good bye!");
生成的代码:
- <script>
- console.log("Hello world!");
- setTiemout(function() {
- window.location.href = "http://csdn.net"
- }, 1000);
- console.log("Good bye!");
- </script>
同理, style. 生成的是 < style></style>
8JavaScript 代码
使用 -,= 或!= 这三个符号在 Jade 中写可以操纵输出的可执行 JS 代码这在要输出 HTML 元素和注入 JavaScript 时是很有用的不过, 这么做一定要小心避免跨站脚本 (XSS) 的攻击
比如, 可以使用!= 定义一个 array, 输出标签数据:
- - var arr = ['<a>', '<b>', '<c>']
- ul
- -for (var i = 0; i < arr.length; i++)
- li
- span= i
- span!= "unescaped:" + arr[i] + "vs."
- span= "escaped:" + arr[i]
生成的代码如下:
- <ul>
- <li><span>0</span><span>unescaped: <a>vs. </span><span>escaped: <a></span></li>
- <li><span>1</span><span>unescaped: <b>vs. </span><span>escaped: <b></span></li>
- <li><span>2</span><span>unescaped: <c>vs. </span><span>escaped: <c></span></li>
- </ul>
模板引擎 Jade 和 Handlebars 的一个主要的区别就是: Jade 允许在代码里写几乎所有的 JavaScript ; 但是, Handlebars 则限制了开发人员只能使用少量的内置和自定义的 helpers
9 注释
Jade 的注释有两种:
<1>. 输出到页面的 //
<2>. 不输出到页面的 //-
- // 普通注释, 会输出到渲染后生成的 HTML 页面
- p Hello Jade content
- //- 特殊注释, 不会输出到 HTML 页面
- p(id = "footer") copyright 2016
输出:
- <!-- 普通注释, 会输出到渲染后生成的 HTML 页面 -->
- <p> Hello Jade content </p>
- <p id="footer">copyright 2016</p>
10if 语句
给 if 语句加个前缀 -, 这样就可以写标准的 JavaScript 代码了; 也可以不用前缀不用括号, 当然后者更简洁
- - var user = {}
- - user.admin = Math.random() > 0.5
- if user.admin
- button(class = "launch") Launch Spacecraft
- else
- button(class = "login") Log in
此外, 还有 unless, 它相当于不或者!
注意: 每行的代码结尾处并没有分号;
11each 语句
在 Jade 里迭代很简单, 只需要使用 each 语句就行了
- - var language = ['JavaScript', 'Node', 'Python', 'Java']
- div
- each value, index in language
- p= index + "," + value
输出:
- <div>
- <p>0. JavaScript</p>
- <p>1. Node</p>
- <p>2. Python</p>
- <p>3. Java</p>
- </div>
示例 2:
- - var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]
- div
- each value, key in languages
- p= key + ":" + value
输出:
- <div>
- <p>JavaScript: -1</p>
- <p>Node: 2</p>
- <p>Python: 3</p>
- <p>Java: 1</p>
- </div>
12 过滤器
过滤器的作用是: 用另一种语言来写一个文本块;
- p
- :markdown
- # practical Node.js
- [This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.
注意: 要想使用 Markdown 过滤器, 需要安装 Markdown 模块, 以及 Marked 和 Markdown NPM 包
- 13case
- - var coins = Math.round(Math.random() * 10)
- case coins
- when 0
- p You have no money
- when 1
- p You have a coin
- default
- p You have #{coins} coins!
- 14Function mixin
如果你使用过 sass 又或者 compass 的 mixin 你肯定不会陌生, 而 Jade 里 mixin 的使用方法和它们基本相同
声明的语法: mixin name(param, param2, .)
调用: +name(data)
- mixin row(items)
- tr
- each item, index in items
- td= item
- mixin table(tableData)
- table
- each row, index in tableData
- +row(row)
- - var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}]
- +table(node)
- - var js = [{name: 'backbone'}, {name: 'angular'}, {name: "emberJS"}]
- +table(js)
输出:
- <table>
- <tr>
- <td>express</td>
- </tr>
- <tr>
- <td>Jade</td>
- </tr>
- <tr>
- <td>Handlebars</td>
- </tr>
- </table>
- <table>
- <tr>
- <td>backbone</td>
- </tr>
- <tr>
- <td>angular</td>
- </tr>
- <tr>
- <td>emberJS</td>
- </tr>
- </table>
- 15include
include 与引入 JS 和 CSS 外部文件很相似它是自顶向下的方法: 在 include 其它文件的主文件里, 我们决定要用什么主文件会被首先处理(可以在主文件了定义数据 locals), 然后才会再接着处理主文件里所包含进来的子文件(子文件里可以使用主文件中定义的数据 locals);
包含一个 Jade 模板, 用 include /path/filename.
例如, 在文件 A 里:
include. / includes / header
注意: 这里不用给模板名以及路径添加双引号或者单引号
再例如, 从父目录开始查找:
include.. / includes / footer
注意: 不能再文件名和文件路径中使用变量, 因为 includes/partials 是在编译时处理的, 而不是在执行时
对于使用 SassCompass 又或者 Less 的人这些事再熟悉不过的了
16extend
extend 与 include 唱对台戏, 正好相反, extend 是一种自底向上的方法它所包含的文件决定它要替换主文件中哪那一部分
使用格式: extend filename 和 block blockname;
示例 - 1: 在文件 file_a 里:
- block header
- p some default text
- block content
- p loading...
- block footer
- p copyright
示例 - 2: 在文件 file_b 里:
- extend file_a
- block header
- p very specific text
- block content
- .main-content
来源: http://www.phperz.com/article/18/0215/362910.html