第4章-模板引擎Jade和Handlebars-4.2.Jade的语法和特性
Jade是Node.js的一個模板引擎，他借鑒了Haml，語法和Haml相似，支持空格縮進。
一、標簽
一行開頭的任何文件都會被默認解釋成HTML標簽，Jade的主要優(yōu)勢是為HTML元素同時渲染閉合和開始標簽，
標簽后的文本和空格會被解釋成內聯(lián)HTML，也就是元素的文本內容。如：
Bodydivh1 Practical Node.jsp The only book most people will ever need.divfooter © Apress上面的模板會輸出：
<body><div><h1>Practical Node.js</h1><p>The only book most people will ever need.</p></div><div><footer>© Apress</footer></div> </body>二、變量/數據
傳給Jade模板的數據稱為locals。要輸出一個變量的值，使用等號=。
Jade代碼：
輸出的HTML：
<h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>三、屬性
屬性緊跟在標簽的名字之后，用括號括起來，格式是name=value。多個屬性之間用逗號分割。
如：
會變成：
<div id="content" class="main"><a href="http://expressjsguide.com" title="Express.js Guide" target="_blank">Express.js Guide</a><form action="/login"><button type="submit" value="保存"></button></form><div class="hero-unit">Learn Node.js</div> </div>有時，一個屬性的值必須是動態(tài)的，在這種情況下，只需要使用該變量的名字。符號|允許我們在新的一行里寫HTML節(jié)點的內容，換句話說，就是有符號|的那行會變成文本內容。
如：
給上面的模板提供數據：
{url: "/logout",isActive: true,isChecked: false }模板和數據一起會輸出如下：
<a href="/logout" data-active="data-active"></a> <label><input type="checkbox" />yes / no </label>注意：值是false的屬性在輸出HTML代碼時會被忽略；而當沒有傳值時，會被賦值為true
如：
四、字面量
為了方便起見，可以直接在標簽名之后寫類和ID。比如，我們給一個段落使用類lead和center，給一個div使用ID side-bar和類pull-right（再次使用符號|創(chuàng)建文本內容）：
div#contentp.lead.center| webapplog: where code lives#side-bar.pull-rightspan.contact.span4a(href="/contact">Contact us翻譯成：
<div id="content"><p class="lead center">webapplog: where code lives<div id="side-bar" class="pull-right"></div><span class="contact span4"><a href="/contact">Contact us</a></span></p> </div>注意：如果沒有寫標簽名，則默認就是div標簽
五、文本
通過符號|可以輸出原始文本
六、Script和Style塊
有時，開發(fā)人員要在HTML的script 或 style標簽里寫內容塊。這時，可以使用點號. 比如，可以這樣寫前端JavaScript：
script.console.log('Hello Jade!')setTimeout(function(){window.location.href='http://rpjs.co'}, 200)console.log('Good bye!')翻譯成：
<script>console.log('Hello Jade!')setTimeout(function(){window.location.href='http://rpjs.co'}, 200)console.log('Good bye!') </script>七、JavaScript代碼
與上面例子相反，如果要在模板編譯時使用JavaScript代碼，
即，要在Jade中寫可以操作輸出的可以執(zhí)行JavaScript代碼，可以使用符號-、=或!=。
這在要輸出HTML元素和注入JavaScript時是很有用的，很顯然，處理這種操作要小心，要避免跨站腳本（XSS）攻擊，
如：
會生成這個：
<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的一個主要區(qū)別是：Jade允許在代碼里寫幾乎所有的JavaScript；
而Handlebars則限制開發(fā)人員只能使用少量的內置和自定義的helpers。
八、注釋
想輸出注釋：用JavaScript的注釋形式//
不想輸出注釋：則使用//-
如：
輸出：
<!-- content goes here--> <p> Node.js is a non-blocking I/O for scalable apps.</p> <p id="footer">Copyright 2015 深情小建</p>九、if語句
給if語句加個前綴-，就可以寫標準的JavaScript代碼了。
也可以使用一種極簡的不需要前綴、不需要括號的替代寫法
如：
除了if外，還有unless，他相當于不或者!
十、each語句
與if語句相似，Jade里的迭代可以只簡單地寫each，
如：
輸出的HTML如下
<div><p>0. php</p><p>1. node</p><p>2. java</p><p>3. ruby</p><p>4. c++</p> </div>同樣的寫法也適用于是對象的時候：
- var languages = {'php': -1, 'node': 2, 'java': 3, 'ruby': 6, 'c++': 1} diveach value, key in languagesp= key + ": " + value上面的Jade被編譯后，輸出HTML
<div><p>php: -1</p><p>node: 2</p><p>java: 3</p><p>ruby: 6</p><p>c++: 1</p> </div>十一、過濾器
當有一個文本塊需要用另外一種語言寫時，就會用到過濾器。比如：Markdown的過濾器的寫法如下：
p :markdown # Practical Node.js [This book](http://expressjsguide.com) really helps to grasp many components needed for modern-day web development.注意：要想使用Markdown的過濾器，需要安裝Markdown模塊，以及marked和Markdown NPM包。不需要其他配置，只要在項目的本地文件夾node_modules下安裝他們即可。
十二、讀取變量
Jade中讀取變量的值是通過#{name}來實現的。
如：
在模板編譯時變量的值就會被處理，因此，不要在可執(zhí)行JavaScript(-)里使用它。
十三、case
- var coins = Math.round(Math.random() * 10) case coins when 0p You have no money when 1p You have a coin defaultp You have #{coins} coins!十四、函數mixin
mixin是帶參數，并產生一些HTML的函數。聲明的語法是mixin name(param, param2, …),用法是+name(data)
如：
上面的模板和數據生成的HTML代碼如下：
<table><tr><td>深情小建</td></tr><tr><td>劉德華</td></tr><tr><td>孫悟空</td></tr> </table> <table><tr><td>那英</td></tr><tr><td>哈林</td></tr><tr><td>王峰</td></tr> </table>十五、include
include是把邏輯提取到單獨文件里的一種方式，旨在讓多個文件重用他，
include是一種自頂向下的方法，
格式：include /path/filename。
如：include ./includes/header
注：不用給模板名字和路徑加雙引號或單引號
下面的例子會從父目錄開始查找：
include ../includes/footer
但是，沒有辦法在文件名和文件路徑里使用變量，因為includes/partials是在編譯時處理的，而不是在執(zhí)行時。
十六、extend
extend是一種自底向上的方法（和include相反）
格式：extend filename 和 block blockname
如：
在文件file_a里：
在文件file_b里：
extend file_a block headerp very specific text block content.main-content總結
以上是生活随笔為你收集整理的第4章-模板引擎Jade和Handlebars-4.2.Jade的语法和特性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#输入分数自动成绩评级
- 下一篇： 2020年中考英语计算机考试,2020年