Node 学习 -- jade

NuoHui
7,019 阅读13分钟

jade(pug)

由于商标版权问题，Jade 已经改名为了 Pug,github地址github.com/pugjs/pug

Jade 是一个高性能的模板引擎，它是用 JavaScript 实现的，并且可以供 Node 使用,当然还支持其他语言。

文件后缀名为.pug(.jade)

jade优点

  • 可读性高
  • 灵活的缩进
  • 块展开
  • 代码默认经过编码处理(转义),安全性高
  • 运行时和编译时上下文错误报告
  • 支持命令行编译
  • 支持html5模式
  • 在内存中缓存(可选)
  • 原生支持 Express
  • 合并动态和静态标签类
  • 过滤器

关于Ejs或者其他模板引擎与jade比较,可以看看这篇文章www.zhihu.com/question/20…

安装

npm安装建议安装个nrm来进行源管理.

npm install pug -g
npm install pug-cli -g

测试demo

为了方便编写代码,最好把编译器的tab设置:2.

// index.jade

doctype html
html
  head
    title jade test
  body
    h2 jade study
粗暴的编译方法
pug index.jade

// index.html
<!DOCTYPE html><html><head><title>jade test</title></head><body><h2>jade study    </h2></body></html>

发现编译后的代码不具备可读性.

pug -- help
 Options:
     -P, --pretty           compile pretty HTML output ## 输出漂亮结构的HTML
    -D, --no-debug         compile without debugging (smaller functions) ## 不带调试的编译
    -w, --watch            watch files for changes and automatically re-render ## 对某个文件的变动保持监控
    -E, --extension <ext>  specify the output file extension ## 指定输出文件扩展名
    -s, --silent           do not output logs ## 不输出日志
// 重新编译
pug -P index.jade
<!DOCTYPE html>
<html>
  <head>
    <title>jade test</title>
  </head>
  <body>
    <h2>jade study    </h2>
  </body>
</html>
自动编译

只是为了学习,这里只要设置-w -P .开发中通过打包工具来进行自动编译.

// 命令行工具推荐使用Cmder

λ pug -P -w index.jade
  watching index.jade
  rendered index.html

Express与Pug

Pug完全集成了一个流行的Node.js Web框架Express，作为支持的视图引擎。 看看Express是如何将Pug与Express集成的完美指南。

在Express中，环境变量NODE_ENV旨在向Web应用程序通知执行环境：无论是在开发中还是在生产中。 Express和Pug自动修改生产环境中的几个选项的默认值，为用户提供更好的开箱即用体验。 具体来说，当process.env.NODE_ENV设置为“production”，Pug与Express一起使用时，compileDebug选项默认为false，而cache选项为true。

API

标签属性
  • id,class写法
// 编译前

  p.title class写法1
  p(class='title') class写法2
  p#tit id写法1
  p(id='tit2') id写法2     

// 编译后
  <p class="title">class写法1</p>
  <p class="title">class写法2</p>
  <p id="tit">id写法</p>
  <p id="tit2">id写法2 </p>
// 编译前
- var classArr = ['small','medium','large']
a(class= classArr)
a.test(class = classArr class=['add'])

// 编译后
<a class="small medium large"></a>
<a class="test small medium large add"></a>

它也可以是将类名映射到true或false值的对象.

//编译前
- var active = 'select'
a(class={active: active === 'select'} )

// 编译后
<a class="active"></a>
  • 其他属性
    通过()来依次编写属性,多个用逗号隔开.
//编译前
a(class='baidu' ,title='baidu' href='www.baidu.com') 百度

//编译后
<a class="baidu" title="baidu" href="www.baidu.com">百度</a>
  • 也支持所有正常的javascript表达式
// 编译前
- var flag  = true   //注意这里使用变量要记得添加-符号.
h2(class=flag ? 'flag': '')

// 编译后
<h2 class="flag"></h2>
  • 多个属性的另外写法

其实就是换号缩进

// 编译前
a(
      title='baidu',
      href='www.baidu.com',
      class='links'
)
// 编译后
<a class="links" title="baidu" href="www.baidu.com"></a>

如果您有一个非常长的属性，并且您的JavaScript运行时支持ES2015模板字符串，则可以使用该语法的属性：

// 编译前
input(data-json=`
      {
        "very-long": "piece of ",
        "data": true
      }
`)
// 编译后
<input data-json="
      {
        &quot;very-long&quot;: &quot;piece of &quot;,
        &quot;data&quot;: true
      }
">
  • 引用属性

如果你的属性名称包含了与JavaScript语法冲突的字符，请使用""或''引用，或使用逗号分隔不同的属性。

官网举了个Angular 2的例子.

//(click)='play()',这里(click)会被当作一个函数调用而不是一个属性名字来解析.

// 编译前
div(class='div-class' (click)='play()')

// 编译后报错
div(class='div-class' (click)='play()')
---------------------^

正确写法

// 编译前
div(class='div-class' '(click)'='play()')
div(class='div-class', (click) = 'play()')

// 编译后
<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>
  • 属性插值

以前版本的Pug / Jade支持如下插值语法(不再支持):

//编译前
- var url = 'www.baidu.com'
a(href='/#{url}') links

//编译后 已不再支持
<a href="/#{url}">links</a>

新的写法

// 编译前
- var url = 'demo.com'
a(href='/' + url) links
- var url2 = 'www.baidu.com'
a(href = url2 ) 百度  

// 编译后
<a href="/demo.com">links</a>
<a href="www.baidu.com">百度  </a>

如果你的javascript运行环境支持ES 2015.那么Pug支持模板字符串语法

// 编译前
- var size1 = 'small'
- var size2 = 'medium'
- var size3 = 'large'
button(
  type='button',
  class='btn btn-' + size1 + ' ' +  'btn-' + size2 + ' ' + 'btn-' + size3
)
button(
  type='button',
  class=`btn btn-$(size1) btn-$(size2) btn(size3)`
)
// 编译后
<button class="btn btn-small btn-medium btn-large" type="button"></button>
<button class="btn btn-small btn-medium btn-large" type="button"></button>
  • 未转义属性

默认情况下，会转义所有属性（用转义序列代替特殊字符），以防止诸如跨站点脚本之类的攻击。 如果必须需要使用特殊字符，可以使用！=而不是=。

// 编译前
div(title="<code>")
div(title!="<code>")

// 编译后
<div title="&lt;code&gt;"></div>
<div title="<code>"></div>
  • 布尔属性

布尔属性由Pug镜像，并接受布尔值（true和false）。 当没有指定值时，默认为true。

// 编译前
input(type='radio' checked)
input(type='radio' checked=true)
input(type='radio' checked=false)

// 编译后
<input type="radio" checked>
<input type="radio" checked>
<input type="radio">
  • style属性

style属性可以是一个字符串（像任何普通属性），但它也可以是一个对象

// 编译前
p(style={fontSize: '14px',color: 'red'})

// 编译后
<p style="fontSize:14px;color:red;"></p>
Case

case语句是JavaScript Switch语句的缩写，并采用以下形式：

// 编译前
- var friendsNum = 4
    case friendsNum
      when 0
        p you have not friend
      when 1
        p you has one friend
      default
        p you has #{friendsNum} friends    

// 编译后
<p>you has 4 friends    </p>
// 编译前
- var friendsNum = 1
    case friendsNum
      when 0
      when 1
        p you has one friend
      default
        p you has #{friendsNum} friends

// 编译后
<p>you has one friend</p>

当然也支持break;

// 编译前

- var friendsNum = 0
    case friendsNum
      when 0
        - break
      when 1
        p you has one friend
      default
        p you has #{friendsNum} friends

// 编译后
无内容

也可以使用块扩展语法

// 编译前
  - var friendsNum = 1
    case friendsNum
      when 0
      when 1: p you has one friend
      default: p you has #{friendsNum} friends

// 编译后
<p>you has one friend</p>
Code

Pug可以在你的模板中编写内置的JavaScript代码。 有三种类型的代码。

  • Unbuffered Code
    不直接添加任何的输出
// 编译前
- for(var i = 0; i < 3;i++)
      li item

// 编译后
<li>item</li>
<li>item</li>
<li>item</li>
// 编译前

- var nameList = ['kobe','cpul','james']
      each item in nameList
        li=item

// 编译后

<li>kobe</li>
<li>cpul</li>
<li>james</li>
  • Buffered Code

以=开头，并输出评估模板中JavaScript表达式的结果。 为了安全起见，首先HTML被转义：

// 编译前

p
  = 'this is code template <code>'
p= 'this is code template' + '<code>'  

// 编译后

<p>this is code template &lt;code&gt;
</p>
<p>this is code template&lt;code&gt;</p>
  • Unescaped Buffered Code

未转义的代码以！=开头，并输出评估模板中JavaScript表达式的结果。 这不会进行任何转义，所以对用户输入是不安全的：

// 编译前
p
  != 'this is code template <code>'
p!= 'this is code template' + '<code>'  

// 编译后
<p>this is code template <code>
</p>
<p>this is code template<code></p>
Comments注释
  • 单行注释
// 编译前

// 这是一个注释
p 这是一个注释

// 编译后

<!-- 这是一个注释-->
<p>这是一个注释</p>

Pug还有种注释写法,只需添加连字符'-'即可。这些仅用于对Pug代码本身进行注释，编译后不会出现在HTML中。

// 编译前

//- 这是一个注释
p 这是一个注释

// 编译后
<p>这是一个注释</p>
  • 块级注释
// 编译前

//-
  注释不会出现在模板中
  真的
//
  第一行注释
  第二行注释

// 编译后

<!--
    第一行注释
    第二行注释
-->
  • 条件注释

对于条件注释，Pug没有任何特殊的语法，下面例子这是为旧版本的Internet Explorer添加后备标记的特殊方法，但是由于以<开头的所有行被视为纯文本，普通的HTML样式条件注释将会很好。

// 编译前
<!--[if IE 8]>
<p class="lt-ie9">
<![endif]-->

// 编译后

<!--[if IE 8]>
<p class="lt-ie9">
<![endif]-->
Conditionals条件语句
// 编译前
- var user = {name: 'kobe'}
- var flag = true
#user
  if user.name
    h3.user-title #{user.name}
  else if flag
    p flag is #{flag}
  else
    p default   

// 编译后
<div id="user">
  <h3 class="user-title">kobe</h3>
</div>

Pug也支持另外一个关键字 unless

// 编译前
- var user = {name: 'kobe'}
#user
  unless !user.name
  h2 #{user.name}


// 编译后
<div id="user">
  <h2>kobe</h2>
</div>
doctype
// 编译前

doctype html

// 编译后

<!DOCTYPE html>
Filters过滤器

过滤器可让你在Pug模板中使用其他语言。也就是支持插件的使用,通过插件对模板内容进行过滤,处理,输出.如scss,less,markdown,coffee-script....

先全局安装这些插件

npm install --save jstransformer-coffee-script
npm install --save jstransformer-markdown-it
// 编译前

h2 MarkDown
  :markdown-it
    #### this is markdown filter
    [link](http://www.baidu.com)

  :coffee-script
    console.log('this is coffee-script');

// 编译后

<h2>MarkDown</h2><h4>this is markdown filter</h4>
<p><a href="http://www.baidu.com">link</a></p>
    (function() {
  console.log('this is coffee-script');

}).call(this);

缺点:不能支持动态内容或选项。

Includes包含

Pug允许你静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, HTML 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹：

- /index.jade
- /includes/
  -/head.jade
  -/footer.jade
// index.jade
doctype html
html
  include includes/header.jade
  body
    h1 这是主题内容
    include includes/footer.jade
// header.jade
header
  title 通用的header
  script(src='/jQuery.js')
  link(href='reset.css')
// footer.jade
footer#footer
  p Copyright (c) foobar
// 编译后
<!DOCTYPE html>
<html>
  <header>
    <title>通用的header</title>
    <script src="/jQuery.js"></script>
    <link href="reset.css">
  </header>
  <body>
    <h1>这是主题内容</h1>
    <footer id="footer">
      <p>Copyright (c) foobar</p>
    </footer>
  </body>
</html>

include 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后，Jade 不会把这个文件当作一个 Jade 源代码，并且会把它当作一个普通文本包含进来：

// 格式

style
  include style.css
script
  include script.js

甚至可以通过include结合过滤器使用

// 引入article.md
include:markdown-it article.md
模板继承

Jade 支持通过 block 和 extends 关键字来实现模板继承。 一个块就是一个 Jade 的 block ，它将在子模板中实现，同时是支持递归的。

如果需要，Pug block 可以提供默认内容，但是可以通过block scripts, block content, 和 block foot来显示如下所示的可选项。

// 基本使用

// 编译前
block desc
  p 这是block context
block desc  

// 编译后
<p>这是block context</p>
// index.jade

doctype html
html
  include includes/header.jade
  body
    block content
    block foot
    .footer  some footer content

现在要继承上面那个index.jade，只需创建一个新文件，并使用extend指令，如下所示，给出路径。 您现在可以定义一个或多个block将覆盖父块内容的块.

在Pug v1中，如果没有给定文件扩展名，那么.pug会自动附加到路径上，但是在Pug v2中，这个行为已被弃用。

// index.jade

doctype html
html
  block scripts
    script(src='/jquery.js')
  body
    block content
    block foot
    .footer  some footer content
// page.jade

extends index.jade

block scripts
  script(src='/jquery.js')
  script(src='/page.js')

block content
  h2 page.jade
  - var pets = ['cat', 'dog']
  each petName in pets
    li=petName
// page.jade 编译后

<!DOCTYPE html>
<html>
  <script src="/jquery.js"></script>
  <script src="/page.js"></script>
  <body>
    <h2>page.jade</h2>
    <li>cat</li>
    <li>dog</li>
    <div class="footer"> some footer content</div>
  </body>
</html>

同样可以在一个子块里继续添加块，就像下面实现的块 content 里又定义了两个可以被实现的块 sidebar 和 primary，或者子模板直接实现 content。

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

Pug允许你 替换 （默认）、 前置 和 追加 blocks. 使用 block append 或 block prepend 时 block 是可选的:

// pageTwo.jade

extend page.jade

append scripts
  script(src='/pageTwo.js')
// 编译后

<!DOCTYPE html>
<html>
  <script src="/jquery.js"></script>
  <script src="/page.js"></script>
  <script src="/pageTwo.js"></script>
  <body>
    <h2>page.jade</h2>
    <li>cat</li>
    <li>dog</li>
    <div class="footer"> some footer content</div>
  </body>
</html>
Interpolation插值
// 编译前
- var author = 'xyz'
- var date = '2017-4'
h2
  p writer was by #{author.toUpperCase()}
  p date is #{date}

// 编译后

<h2>
  <p>writer was by XYZ</p>
  <p>date is 2017-4</p>
</h2>

如果你想保持#{}插值符号,可以使用#{或者'\'.

Iteration迭代
  • each
// 编译前
- var arr = [1,2,3,4]
each val,index in arr
  li= index + ':' + val 

// 编译后

<li>0:1</li>
<li>1:2</li>
<li>2:3</li>
<li>3:4</li>
  • while
// 编译前
- var arr = 4
while arr > 0
  li= arr--


// 编译后

<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
Mixins

Mixins允许您创建可重用的Pug block。

// 编译前
mixin lists
 p this is a mixin block
+lists
+lists  

// 编译后

<p>this is a mixin block</p>
<p>this is a mixin block</p>

mixins可以为一个带参数的函数

// 编译前
mixin link(href,name)
  a(href=href)= name

+link('www.baidu.com','百度')  

// 编译后

<a href="www.baidu.com">百度</a>

mixins也可以使用一个block来作为内容

// 编译前
mixin lists(names)
 p= 'my name is ' + names
 if block
   block
 else
   p not provided content
+lists('kobe')
+lists('cpul')
  p block content

// 编译后

<p>my name is kobe</p>
<p>not provided content</p>
<p>my name is cpul</p>
<p>block content</p>

未知数量参数(...)的mixins.

// 编译前
mixin lists(className,...items)
  ul(class=className)
    each item in items
      li= item

+lists('demo',1,2,3)
// 编译后

<ul class="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
Tags

默认情况下，一行开头的文本（或仅在空格之后）代表一个html标签。 缩进的标签是嵌套的，创建了像html的树结构。

Pug可以判断出哪些元素是自闭,您还可以通过简单地附加'/'字符来明确地自己关闭标签：

为了节省空间，Pug提供嵌套标记的内联语法。

// 编译前
p: span 内联

// 编译后
<p><span>内联</span></p>

Pug的缺点

凡事不可能完美.Pug也有自己的弊端.

  • 可移植性差
  • 对新手调试不方便
  • 性能不是很好
avatar
文章
阅读
粉丝