vs2013+node.js 学习javascript 第二篇:Jade 模板引擎使用

一、准备工作

       在vs2013中建立“Basic Node.js Express 4 Application”的工程ExpressAppJade。

       在vs2013中，点击"文件"-->"新建"-->“项目”，弹出“新建项目”界面，按下图进行配置，载点“确定”按钮

这时，系统又弹出如下界面，点击“是”

系统开始构建运用环境，构建完成后按”F5“，运行，在浏览器中出现下图，表示构建正确，可以开始Jade 模板引擎的学习了。

二、开始学习Jade 模板引擎使用

在vs2013的解决方案资源管理器中，点开views，再点击index.jade，如下图

注意：1、jade模板类同与python，通过缩进来识别块。

            2、虽然平常我们修改 node.js 代码之后需要重启来查看变化，但是 jade 引擎不在此列，因为是动态加载的，所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。

2.1、参数的使用

jade 的变量调用有 3 种方式：

1. #{表达式}
2. =表达式
3. !=表达式

index.jade中的h1= title和p Welcome to #{title}的#{title}就是调用路由器（routes/indes.js)传递过来的参数title。

打开routes/indes.js，我们修改routes/indes.js中的res.render('index', { title: 'Express' });为

res.render('index', { title: 'Jade参数调用' });

按F5,查看结果为

在index.jade中修改为代码，

extends layoutblock content  h1= title  p Welcome to #{title}  h2='1、参数调用'  - console.log('hello'); // 这段代码在服务端执行  - var s = 'hello world' // 在服务端空间中定义变量  p #{s}  p= s

注意：1、每行的缩进

             2、- 开头在 jade 种属于服务端执行的代码

             3、修改后保存，在浏览器中按F5刷新即可看到效果

2.2、判断

方式1

在index.jade中增加代码

 h2='2、判断 方式1'  - var user = { description: '我喜欢猫' }  - if (user.description)    h3 user描述    p.description= user.description  - else    h3 描述    p.description 用户无描述

结果：

<h2>2、判断 方式1</h2><h3>user描述</h3><p class="description">我喜欢猫</p>

 方式2 

在index.jade中增加代码

 h2='2、判断 方式2'  - var user = { description: '我喜欢猫' }    #user    if user.description        h3 描述        p.description= user.description    else        h3 描述        p.description 用户无描述

结果为

<h2>2、判断 方式2</h2><h3>user描述</h3><p class="description">我喜欢猫</p>

方式3

使用 Unless 类似于 if 后的表达式加上了 ! 取反

在index.jade中增加代码

  h2='2、判断 方式3'  - var user = { name: 'Alan', isVip: false }  unless user.isVip    p 亲爱的 #{user.name} 您并不是 VIP

结果为

<p>亲爱的 Alan 您并不是 VIP</p>

注意这个 unless 是 jade 提供的关键字，不是运行的 js 代码

2.3、循环

2.3.1、for

在index.jade中增加代码

  h1='循环'  h2='for 循环'  - var array = [1,2,3]  ul    - for (var i = 0; i < array.length; ++i) {       li hello #{array[i]}    - }

结果为

<h1>循环</h1><h2>for 循环</h2><ul>        <li>hello 1</li>        <li>hello 2</li>        <li>hello 3</li></ul>

2.3.2、each

在index.jade中增加代码

  h2='each 循环'  ul    each val, index in ['西瓜', '苹果', '梨子']        li= index + ': ' + val

结果为

<h2>each 循环</h2><ul>        <li>0: 西瓜</li>        <li>1: 苹果</li>        <li>2: 梨子</li></ul>

2.4、Case

类似 switch 里面的结果，不过这里的 case 不支持case 穿透，如果 case 穿透的话会报错。

在index.jade中增加代码

  h2='case'  - var friends = 10  case friends    when 0        p you have no friends    when 1        p you have a friend    default        p you have #{friends} friends

结果为

<h2>case</h2><p>you have 10 friends</p>

简略写法：

  h2='case 简略写法'
  - var friends = 1
  case friends
    when 0: p you have no friends
    when 1: p you have a friend
    default: p you have #{friends} friends

结果为

<h2>case 简略写法</h2><p>you have a friend</p>

2.5、可重用的 jade 块 (Mixins)

在index.jade中增加代码

  h2='可重用的 jade 块'  //- 申明可重用的块  mixin list    ul        li foo        li bar        li baz   //- 调用  +list()  +list()

结果：

<h2>可重用的 jade 块</h2><ul><li>foo</li><li>bar</li><li>baz</li></ul><ul><li>foo</li><li>bar</li><li>baz</li></ul>

你也可以给这个重用块制定参数

mixin pets(pets)

  ul.pets

    - each pet in pets

      li= pet

 

+pets(['cat', 'dog', 'pig'])

结果：

<ulclass="pets">

  <li>cat</li>

  <li>dog</li>

  <li>pig</li>

</ul>

Mixins 同时也支持在外部传入 jade 块

  h2='这里是外部传入的块'  mixin article(title)    .article        .article-wrapper            h1= title            //- block 为 jade 关键字代表外部传入的块            if block                block            else                p 该文章没有内容          +article('Hello world')    +article('Hello Jade')

Mixins 同时也可以从外部获取属性

   h2='Mixins 从外部获取属性'   mixin link(href, name)        a(class!=attributes.class, href=href)= name      +link('/foo', 'foo')(class="btn")

2.6、模板包含 (Includes)

你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。

index.jade

1

2

3

4

5

6

7

doctype html

html

  include includes/head

body

  h1 我的网站

  p 欢迎来到我的网站。

  include includes/foot

includes/head.jade

1

2

3

4

head

  title 我的网站

  script(src='/javascripts/jquery.js')

  script(src='/javascripts/app.js')

includes/foot.jade

1

2

#footer

  p Copyright (c) foobar

调用 index.jade 的结果：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!doctype html>

<html>

  <head>

    <title>我的网站</title>

    <scriptsrc='/javascripts/jquery.js'></script>

    <scriptsrc='/javascripts/app.js'></script>

  </head>

  <body>

    <h1>我的网站</h1>

    <p>欢迎来到我的网站。</p>

    <divid="footer">

      <p>Copyright (c) foobar</p>

    </div>

  </body>

</html>

2.7、模板引用 (Extends)

layout.jade

doctype htmlhtml  head    title 我的网站    meta(http-equiv="Content-Type",content="text/html; charset=utf-8")    link(type="text/css",rel="stylesheet",href="/css/style.css")    script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")  body    block content

index.jade

//- extends 拓展调用 layout.jadeextends ../layoutblock content  h1 文章列表  p 习近平忆贾大山 李克强:将启动新核电项目  p 朴槿惠:"岁月号"船长等人弃船行为等同于杀人  p 普京疑换肤：眼袋黑眼圈全无 领导人整容疑云  p 世界最大兔子重45斤长逾1米 1年吃2万元食物