node框架---Jade详解

最新推荐文章于 2024-06-05 09:49:13 发布

那1年

最新推荐文章于 2024-06-05 09:49:13 发布

阅读量1.8k

点赞数

分类专栏： Node.js

Node.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Jade框架是HTML的一个模板引擎通过该引擎可以用过转换化HTML

下面通过对比观察jade是如何转换成html的。

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>

jade

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

Jade 是一种用于HTML模板的简介的语言。
他的功能有：
    1、产生HTML
    2、支持动态代码
    3、支持可重复性

Attributes：
标签属性看起来有点像html，然而他们的值却是一种规则的javascript。
jade:
a(href='google.com') Google
a(class='button',href='google.com')Google
html:
<a href='google.com'>Google</a><a href="google.com" class="button">Google</>
所有良好的javascript的表达式的运行都不错
jade:
- var authenticated = true
body(class=authenticated?'authed':'anon')
html:
<body class="authed"></body>

如果有很多属性在标签中，你也可以跨越多行来表达他们
jade：
input(
    type='checkbox'
    name='agreement'
    cheked
)
html:
<input type="checkbox" name="agreement" checked="checked">

非转义属性
默认情况下，所有的属性都是被转义的（替换特殊转义字符）去预防特殊攻击例如跨站式脚本攻击，如果你想用特殊的字符你可以使用！=instead of=

div(escaped="<code>")
div(unescaped!="<code>")
-------------------------
<div escaped="<code>"></div>
<div unescaped="<code>"></div>

注意：
非转义的缓存代码可能是危险的，你必须确保所有的用户输入避免跨站式脚本

Boolean属性
Boolean属性都是通过jade来映射，同时可以映射 bools,aka true 和 false，当没用值被指定为true时。
jade：
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())
---------------------------------------------------
html:
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="checkbox" checked="true"/>
---------------------------------------------------
如果doctype是HTML jade可以不去映射属性和使用简洁的style（所有的浏览器都能理解）
jade：
doctype html
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true && 'checked')
---------------------------------------------------
HTML：
<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">
---------------------------------------------------
Style属性
style属性可能是一个String（像所有的正常的属性一样）但是它也可能是一个对象，它那被脚本生成的部分是很方便的。
jade：
a(style={color: 'red', background: 'green'})
---------------------------------------------
html:
<a style="color:red;background:green"></a>
--------------------------------------------

Class属性
class属性可能是一个String（像所有的正常的attribute一样）但是它也可能是一个array的class names ，很方便生成javascript。
jade：
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bing(class=classes class=['bing'])
--------------------------------------------------------------
html：
<a class="foo bar baz"></a><a class="bing foo bar baz bing"></a>
--------------------------------------------------------------------
它也可能是一个mapping对象的class names to true or false values，which is useful for applying conditional classes
jade:
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
--------------------------------------------------------------------
html:
<a href="/">Home</a><a href="/about" class="active">About</a>
--------------------------------------------------------------------
class Literal

Classes may be defined using a.classname Syntax:
a.button
<a class="button"></a>

Since div's ara such a common choice of tag ,it is the default if you omit the tag name:
.content
<div class="content"></div>

ID 文字
IDs 可能定义使用 #idname字符
jade:
a#main-link
html:
<a id="main-link"></a>

Since div's are such a common choice of tag, it is the default if you omit the tag name;
#content
<div id="content"></div>

&attributes
Pronounced "and attributes",the &attributes syntax can be used to explode an object into attributes of an element
div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
<div id="foo" data-bar="foo" data-foo="bar"></div>
这个对象没有一个对象literal，it can also just be a variable that has an object as its value(see also Mixin Attributes)

- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)
<div id="foo" data-bar="foo" data-foo="bar"></div>

那1年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
node框架---Jade详解

Jade框架是HTML的一个模板引擎通过该引擎可以用过转换化HTML下面通过对比观察jade是如何转换成html的。html Jade if (foo) { bar(1 + 5) } Jade - node template engine You are amazin
复制链接

扫一扫

专栏目录