详解Node.js模板引擎Jade入门


Posted in Javascript onJanuary 19, 2018

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。并且我已经深深的爱上了前端。

7、Script 和 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>。

8、JavaScript代码

使用-,=或!=这三个符号在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>

10、if 语句

给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, 它相当于不或者!。

注意: 每行的代码结尾处并没有分号“;”

11、each语句

在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包。

13、case

- 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!

14、Function 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>

15、include

include与引入JS和CSS外部文件很相似。它是自顶向下的方法: 在include其它文件的主文件里,我们决定要用什么。主文件会被首先处理(可以在主文件了定义数据locals),然后才会再接着处理主文件里所包含进来的子文件(子文件里可以使用主文件中定义的数据locals);

包含一个Jade模板,用include /path/filename.

例如,在文件A里:

include ./includes/header

注意: 这里不用给模板名以及路径添加双引号或者单引号。

再例如,从父目录开始查找:

include ../includes/footer

注意:不能再文件名和文件路径中使用变量,因为includes/partials是在编译时处理的,而不是在执行时。

对于使用Sass、Compass又或者Less的人这些事再熟悉不过的了。

16、extend

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
JS实现碰撞检测的方法分析
Jan 19 #Javascript
angular1配合gulp和bower的使用教程
Jan 19 #Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 #Javascript
Angular实现搜索框及价格上下限功能
Jan 19 #Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 #Javascript
web前端vue实现插值文本和输出原始html
Jan 19 #Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 #Javascript
You might like
pdo中使用参数化查询sql
2011/08/11 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php生成HTML文件的类方法
2019/10/11 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JS访问SWF的函数用法实例
2015/07/01 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
解析vue中的$mount
2017/12/21 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
快速了解python leveldb
2018/01/18 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python障碍式期权定价公式
2019/07/19 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
django修改models重建数据库的操作
2020/03/31 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
遗产继承公证书
2014/04/09 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
爱护公物标语
2014/06/24 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
简易版租房协议书范本
2014/10/13 职场文书
优秀团员自我评价
2015/03/10 职场文书
运动会跳远广播稿
2015/08/19 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
MySQL数据库表约束讲解
2022/06/21 MySQL