初窥nodejs（五） ——模板引擎(Jade)

最新推荐文章于 2024-05-15 01:42:28 发布

帕尼尼0_0

最新推荐文章于 2024-05-15 01:42:28 发布

阅读量1.3k

点赞数

分类专栏： Nodejs基础文章标签： nodejs 模板引擎博客

本文链接：https://blog.csdn.net/Nate__River/article/details/78043478

版权

Nodejs基础专栏收录该内容

14 篇文章 3 订阅

订阅专栏

写在前面

    目前nodejs的模板引擎有很多，各自有各自的优缺点。在本篇博客中，我会初步介绍其中的两个主流模板引擎之一：Jade。
    EJS 和 Jade的争论一直存在，可以参考下面这篇知乎：

关于nodejs的模板引擎，如何选择 EJS 和 Jade？

jade简介

jade有两个特点：
简洁：它独特的缩进语法使得它特别的简洁，比一般的模板引擎文件大小要小得多。
破坏：如果你选择了jade，那么你就只能用jade了，它是侵入式的，没有ejs那么温和。

使用jade

引入jade

const jade=require('jade');

使用jade

//对字符串进行渲染
var str=jade.render('html'); 
//对文件进行渲染
var str=jade.renderFile('./views/8.jade', {pretty: true});
//pretty:true表示使用缩进

jade基础

html结构

    它是根据缩进来判断结构关系的，这样做单写一个html，head等，使得代码更加的简洁。

html                编译后           <html>
  head                                <head>
    style                               <style></style>
    script                              <script></script>
  body                                <body>
    div                                 <div>
      ul                                   <ul>
        li                                    <li></li>
        li                                    <li></li>
        li                                    <li></li>
    div                                    </ul>
                                        </div>
                                        <div></div>
                                      </body>
                                    </html>

<>内属性和值

它是根据()来处理的

script(src="a.js")
link(href="a.css",rel="stylesheet")
input(type="text",id="txt1",value="abc")

编译后

<script src="a.js"></script>
<link rel="stylesheet" href="a.css">
<input type="text" id="txt1" value="abc">

<><>间内容

a(href="http://www.baidu.com/") 百度
p(id="cs") 哈哈

编译后

<a href="http://www.baidu.com">百度</a>
<p id="cs">哈哈</p>

<><>嵌套

html
  head
    style
  body
    div aaa
      span bbb

编译后

<html>
  <head>
    <style></style>
  </head>
  <body>
    <div>aaa<span>bbb</span></div>
  </body>
</html>

style（json写法）

div(style="width:200px;height:200px;background:red")
div(style= {width: '200px', height: '200px', background: 'red'})

编译后

<div style="width:200px;height:200px;background:red"></div>
<div style="width:200px;height:200px;background:red"></div>

class（数组写法）

div(class="aaa left-warp active")
div(class= ['aaa', 'left-warp', 'active'])

编译后

<div class="aaa left-warp active"></div>
<div class="aaa left-warp active"></div>

id&class（简写）

div.box
div#div1

编译后

<div class="box"></div>
<div id="div1"></div>

&attributes

div&attributes({title: 'aaa', id: 'div1' class:'aa'})

编译后

<div id="div1" class="aa" title="aaa"></div>

jade进阶

|标记

在jade中，使用|表明其后一行的代码原样输出，不需要解析

html
  head
    script
      |window.onload=function (){
      | var oBtn=document.getElementById('btn1');
      | oBtn.onclick=function (){
      |   alert('aaaa');
      | };
      |};
  body
    |abc
    |ddd
    |213

编译后

<html>
  <head>
    <script>
      window.onload=function (){
      var oBtn=document.getElementById('btn1');
      oBtn.onclick=function (){
        alert('aaaa');
      };
      };
    </script>
  </head>
  <body>
    abc
    ddd
    213
  </body>
</html>

.标记

.是|的增强版，.表明其后的代码原样输出，不需要解析

html
  head
    script.
      window.onload=function (){
        var oBtn=document.getElementById('btn1');
        oBtn.onclick=function (){
          alert('aaaa');
        };
      };
  body
    |abc
    |ddd
    |213

编译后

<html>
  <head>
    <script>
      window.onload=function (){
      var oBtn=document.getElementById('btn1');
      oBtn.onclick=function (){
        alert('aaaa');
      };
      };
    </script>
  </head>
  <body>
    abc
    ddd
    213
  </body>
</html>

include

使用include可以引入外部js文件

html
  head
    script
      include a.js
  body
    |abc
    |ddd
    |213

编译后

<html>
  <head>
    <script>
      window.onload=function (){
      var oBtn=document.getElementById('btn1');
      oBtn.onclick=function (){
        alert('aaaa');
      };
      };
    </script>
  </head>
  <body>
    abc
    ddd
    213
  </body>
</html>

#{}标记

#{name}中name表示使用外部传入的值。

后台js代码

const jade=require('jade');
console.log(jade.renderFile('./cs.jade', {pretty: true, a: 12, b: 5}));

jade代码

html
  head
  body
    div 我的名字：#{a+b}

编译后

<html>
  <head></head>
  <body>
    <div>我的名字：17</div>
  </body>
</html>

style$class传值

后台js代码

const jade=require('jade');

console.log(jade.renderFile('./cs.jade', {pretty: true,
  json: {width: '200px', height: '200px', background: 'red'},
  arr: ['aaa', 'left-wrap']
}));

jade代码

html
  head
  body
    div(style=json)
    div(class=arr)
    div(class=arr class="active")

编译后

<html>
  <head></head>
  <body>
    <div style="width:200px;height:200px;background:red"></div>
    <div class="aaa left-wrap"></div>
    <div class="aaa left-wrap active"></div>
  </body>
</html>

-标记

-表明其后一行的代码作为script执行，不显示

html
  head
  body
    -var a=12;
    -var b=5;
    div 结果是：#{a+b}

编译后

<html>
  <head></head>
  <body>
    <div>结果是：17</div>
  </body>
</html>

=标志

=标志等价于#{}

html
  head
  body
    span #{a}
    span=a

编译后

<html>
  <head></head>
  <body><span>12</span><span>12</span></body>
</html>

jade高级

循环

使用循环可以动态建立节点，动态赋值

后台js代码

const jade=require('jade');
console.log(jade.renderFile('./cs.jade', {pretty: true,
  arr: ['张三', '李四', '王五', '赵六']
}));

jade代码

html
  head
  body
   ul
     -for(var i=0;i<arr.length;i++)
       li=arr[i]

编译后

<html>
  <head></head>
  <body>
    <ul>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
      <li>赵六</li>
    </ul>
  </body>
</html>

！标记

！标记作用是防止jade将<>解析为&lt;&gt;

后台js代码

console.log(jade.renderFile('./views/12.jade', {pretty: true,
  content: "<h2>你好啊</h2><p>对方水电费色弱威尔士地方</p>"
}));

jade代码

html
  head
  body
    div=content //会将<h2> 输出为&lt;h2&gt; 防止注入攻击
    div!=content//会将<h2> 原样输出

if else

使用判断语句可以动态建立节点，动态赋值

html
  head
  body
    -var a=19;
    if(a%2==0)
      div(style={background:'red'}) 偶数
    else
      div(style={background:'green'}) 奇数

编译后

<html>
  <head></head>
  <body>
    <div style="background:green">奇数</div>
  </body>
</html>

case

类似于js里的switch

html
  head
  body
    -var a=1;
    case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        |不靠谱

编译后

<html>
  <head></head>
  <body>
    <div>bbb</div>
  </body>
</html>

jade实战

功能：通过jade动态生成html页面

后台js代码

const jade=require('jade');
const fs=require('fs');

var str=jade.renderFile('./views/index.jade', {pretty: true});

fs.writeFile('./build/index.html', str, function (err){
  if(err)
    console.log('编译失败');
  else
    console.log('成功');
});

jade代码

doctype
html
  head
    meta(charset="utf-8")
    title jade测试页面
    style.
      div {width:100px;height:100px;background:#CCC;text-align:center;line-height:100px;float:left;margin:10px auto}
      div.last {clear:left}
  body
    -var a=0;
    while a<12
      if a%4==0 && a!=0
        div.last=a++
      else
        div=a++

生成的html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jade测试页面</title>
    <style>
      div {width:100px;height:100px;background:#CCC;text-align:center;line-height:100px;float:left;margin:10px auto}
      div.last {clear:left}
    </style>
  </head>
  <body>
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="last">4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div class="last">8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </body>
</html>

总结

至此，我就把jade的写法规则，常用语法全部讲完了。
jade很灵活，语法不难但是很繁杂，希望你能把所有的代码自己运行一遍。
那样，你对jade的理解和使用会有很大的提升的

帕尼尼0_0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初窥nodejs（五） ——模板引擎(Jade)

目前nodejs的模板引擎有很多，各自有各自的优缺点。在本篇博客中，我会初步介绍其中的两个主流模板引擎之一： Jade。
复制链接

扫一扫

专栏目录

初窥nodejs（五） ——模板引擎(Jade)

写在前面

jade简介

使用jade

jade基础

html结构

<>内属性和值

<><>间内容

<><>嵌套

style（json写法）

class（数组写法）

id&class（简写）

&attributes

jade进阶

|标记

.标记

include

#{}标记

style$class传值

-标记

=标志

jade高级

循环

！标记

if else

case

jade实战

总结

“相关推荐”对你有帮助么？