IT博客汇 | Jade快速入门

Jade快速入门

dwqs发表于 2015-09-05 01:42:58

Jade是Node的一个模板引擎，借鉴了Haml，语法上和Haml有很多类似之处，Jade的主要优势为HTML元素同事渲染闭合和开始标签，当然也会添加符号<>和< />。

变量/数据

传给Jade模板的数据称为locals。有输出一个变量，使用等号=:

h1= title
p= body
//传递的locals
{
    title:'数据1',
    body: 'body变量'
}

输出地HTML:

<h1>数据1</h1>
<p>body变量</p>

如果要在文本中读取变量的值，则通过#{name}语法实现：

- var title = 'node.js'
p I am studying #{title}.

在模板编译时变量的值会被处理，因此，不要在可执行的Javascript(-)使用。

属性

属性紧跟在标签的名字之后，用括号括起来，格式是name=value，多个属性用逗号分开：

div(id='content', class='main')
    a(href='http://www.ido321.com', title='我的博客') 博客地址
    form(action='/login')
        button(type='submit')
    div(class='hero') Learn Node

输出地HTML为：

<div id="content" class="main">
    <a href="http://www.ido321.com">博客地址</a>
    <form action="/login">
        <button type='submit'></button>
    </form>
    <div class="hero">Learn Node</div>
</div>

属性值可以用locals中的变量代替，符号|允许在新的一行中写HTML中的内容，即该符号之后的那行内容会变成文本内容：

a(href=url, data-active=isActive)
label
    input(type='checkbox',checked=isChecked)
    | yes/no
//locals数据
{
    url: '/login',
    isActive:true,
    isChecked:false
}

输出地HTML为：

<a href="/login" data-active='true'></a>
<label>
    <input type='checkbox' />yes/no
</label>

可以输出多行文本内容：

div
    | 文本1
    | 文本2

字面量

在Jade中，如果没有写标签名，则默认是div，因而，可以直接在元素后写类和id来生成元素：

div#center
    p.lead.test
        | web app
        #side.pull-right
        span.contact.span4
            a(href="/contact") contact me

输出地HTML为：

<div id="center">
    <p class="lead test">
        web app
        <div id="side" class="pull-right"></div>
        <span class="contact span4">
            <a href="/contact">contact me</a>
        </span>
    </p>
</div>

Script和Style块

使用.，可以直接在模板中输入Javascript和Style：

script.
    console.log('hello');
    setTimeout(function(){
        console.log('script');
    },1000);

被编译后，输出内容为：

<script>
    console.log('hello');
    setTimeout(function(){
        console.log('script');
    },1000);
</script>

Javascript

上述是通过script标签嵌入js，如果要在模板编译时使用Javascript，可以使用符号-、=和!=：

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

输出地HTML内容：

<ul>
    <li>
        <span>0</span><span>unescaped:<a>vs.</span><span>escaped:&lt;a&gt
    </li>
    <li>
        <span>1</span><span>unescaped:<b>vs.</span><span>escaped:&lt;b&gt
    </li>
    <li>
        <span>2</span><span>unescaped:<c>vs.</span><span>escaped:&lt;c&gt
    </li>
</ul>

还可以加入注释。如果要输出注释，则使用//，如果不输出注释，则使用//-:

// 输出注释
p 上面是注释
//- 不输出注释
div 上面注释没有输出

对应输出地HTML内容是:

<!-- 输出注释-->
<p>上面是注释</p>
<div>上面注释没有输出</div>

if和unless

通过符号-能在模板中嵌入js，还有一种不需要前缀-和括号的简洁写法：

- var user = {}
- user.admin = Math.random() > 0.5
if user.admin
    button(class = "test") 这是按钮
else
    | 文本

unless的判断则和if相反。

each

改语句用于迭代数组或对象，比for更简洁的语法：

- var language = ['php', 'node', 'java'];
div
    each value, index in language
     p= index + '. ' + value

输出地HTML为:

<div>
    <p>0. php</p>
    <p>1. node</p>
    <p>2. java</p>
</div>

case

有多个选择区分时，可以用case实现：

- var coins = Math.round(Math.random() * 10)
case coins
 when 0
 p You hava no money
 when 1
 p You have a coin
 default
 p You hava #{coins} coins

函数mixin

mixin是带参数，并产生一些HTML的函数。声明的语法是mixin name(param1, 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: 'hapi'}, {name: "derby"}]
+table(node)

输出地HTML为：

<table>
    <tr>
        <td>express</td>
    </tr>
    <tr>
        <td>hapi</td>
    </tr>
    <tr>
        <td>derby</td>
    </tr>
</table>

include

include是自顶向下的方法，用于引入其他的Jade模板，实现模板的复用，语法：include /path/filename。
比如，在A文件中：

include ./includes/header

不用给模板名字和路径加上单引号和双引号，支持相对路径：

//从父目录开始查找
include ../xxx

extend

extend是自底向上的方法，包含的文件决定它要替换主文件的哪一个部分，语法：extend filename和block filename。
在文件A中:

block header
    p default text
block content
    p Loading....
block footer
    p copyright

在文件B中：

extend A
block header
    p 这是文件B
block content
    .main-content

转载请注明：淡忘~浅思 » Jade快速入门

淡忘~浅思猜你喜欢
【译】有趣的JavaScript原生数组函数	JavaScript面向对象精要(一)	【译】JavaScript面试问题：事件委托和this	【译】创建优雅表格的8个js工具	JavaScript数值转换总结
无觅