Jade学习笔记

来源：互联网发布：网站美工培训机构编辑：程序博客网时间：2024/05/15 23:50

1，mixins和&attributes的用法。

使用mixins能够让我们编写的jade模块能够得到复用，同时它能够支持参数的传递，这样更加有利于复用。

mixin pet(name)  li.pet= nameul  +pet('cat')  +pet('dog')  +pet('pig')

等价的html代码是：

<ul>  <li class="pet">cat</li>  <li class="pet">dog</li>  <li class="pet">pig</li></ul>

mixins能够实现jade模块的复用，但很多时候，虽然复用了相同的jade模块，但是模块中元素的属性却要求不一样，例如复用的jade模块中会有input 元素，但是input 元素的属性type，name 等往往是不一样的。所以在编写可复用jade模块时应该考虑能够实现元素属性的参数化，这时就要用的到&attributes 。传给&attributes 应该是一个键值模式的对象。具体的代码可以如下：

div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})

相对应的html代码是：

<div id="foo" data-bar="foo" data-foo="bar"></div>

然后在结合mixins的语法，就可以编写这样的代码：

mixin link(href, name)  a(href=href)&attributes(attributes)= name+link('/foo', 'foo')(class="btn")

对应的html代码就是：

<a href="/foo" class="btn">foo</a>

有时候jade模块嵌套不只一层，就是说一个mixins中还有另外一个已经mixins的jade模块。这时使用&attributes就应该注意一下。
在最外层的jade代码或是直接考虑html代码中，元素的属性都是以这样的形式出现的"attribute = value" 。
在最外层jade模块的键/值型属性到了它的上一层这个属性就是attributes 变量。例如上面的代码中class="btn"在mixins link中就表示为attributes。由于在最底层，传递给&attributes的参数应该是整个attributes对象，所以在最外层的jade模块和最底层的jade模块之间的jade模块的attributes的传递要做一些处理。具体看一下的代码：

mixin link(href, name)  a(href=href)&attributes(attributes.attrs)= namemixin block0  +link('/foo', 'foo')(attrs=attributes.attrs)mixin block1  +block0(attrs=attributes)+block1(class="btn")

对应的html代码就是：

<a href="/foo" class="btn">foo</a>

可以观察到最外层block1class="btn"传递给block0模块就是以attrs=attributes 的形式传递，这样传给block0的还是一个属性对象class="btn" 。以此类推，最后传给&attributes 的也是一个属性对象。

2，jade中支持变量的使用。

在jade中可以使用变量的申明，只需在相应的语句之前加一个减号就可以。例如：

- var authenticated = truebody(class=authenticated ? 'authed' : 'anon')

对应的html代码如下：

<body class="authed"></body>

甚至可以使用函数。。

-var setName = function(type) {-    if(type=='submit') return "提交按钮"-    else if(type='text') return "文本框"-}mixin _input(type)  input(type=type name=setName(type))+_input("submit")

对应的html代码如下：

<input type="submit" name="提交按钮"/>

参考资料：Jade官网文档

0 0