Node 学习 -- jade-白红宇

jade(pug)

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

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

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

jade优点

可读性高

灵活的缩进

块展开

代码默认经过编码处理(转义),安全性高

运行时和编译时上下文错误报告

支持命令行编译

支持html5模式

在内存中缓存(可选)

原生支持 Express

合并动态和静态标签类

过滤器

关于Ejs或者其他模板引擎与jade比较,可以看看这篇文章

安装

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

npm install pug -gnpm install pug-cli -g复制代码

测试demo

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

// index.jadedoctype htmlhtml  head    title jade test  body    h2 jade study复制代码

粗暴的编译方法

pug index.jade// index.htmljade testjade study    
复制代码

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

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 
    
       specify the output file extension ## 指定输出文件扩展名    -s, --silent           do not output logs ## 不输出日志复制代码

// 重新编译pug -P index.jade      jade test        jade study    
  复制代码

自动编译

只是为了学习,这里只要设置-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     // 编译后  class写法1
  class写法2
  id写法
  id写法2 
复制代码

// 编译前- var classArr = ['small','medium','large']a(class= classArr)a.test(class = classArr class=['add'])// 编译后复制代码

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

//编译前- var active = 'select'a(class={
   active: active === 'select'} )// 编译后复制代码

其他属性
通过()来依次编写属性,多个用逗号隔开.

//编译前a(class='baidu' ,title='baidu' href='www.baidu.com') 百度//编译后百度复制代码

也支持所有正常的javascript表达式

// 编译前- var flag  = true   //注意这里使用变量要记得添加-符号.h2(class=flag ? 'flag': '')// 编译后
复制代码

多个属性的另外写法

其实就是换号缩进

// 编译前a(      title='baidu',      href='www.baidu.com',      class='links')// 编译后复制代码

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

// 编译前input(data-json=`      {        "very-long": "piece of ",        "data": 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()')// 编译后
    
    
复制代码

属性插值

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

//编译前- var url = 'www.baidu.com'a(href='/#{url}') links//编译后 已不再支持links复制代码

新的写法

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

如果你的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)`)// 编译后复制代码

未转义属性

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

// 编译前div(title="")div(title!="")// 编译后
      
      
复制代码

布尔属性

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

// 编译前input(type='radio' checked)input(type='radio' checked=true)input(type='radio' checked=false)// 编译后复制代码

style属性

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

// 编译前p(style={
   fontSize: '14px',color: 'red'})// 编译后
复制代码

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    // 编译后you has 4 friends    
复制代码

// 编译前- var friendsNum = 1    case friendsNum      when 0      when 1        p you has one friend      default        p you has #{friendsNum} friends// 编译后you has one friend
复制代码

当然也支持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// 编译后you has one friend
复制代码

Code

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

Unbuffered Code
不直接添加任何的输出

// 编译前- for(var i = 0; i < 3;i++)      li item// 编译后item
item
item
复制代码

// 编译前- var nameList = ['kobe','cpul','james']      each item in nameList        li=item// 编译后kobe
cpul
james
复制代码

Buffered Code

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

// 编译前p  = 'this is code template 'p= 'this is code template' + ''  // 编译后this is code template <code>
this is code template<code>
复制代码

Unescaped Buffered Code

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

// 编译前p  != 'this is code template 'p!= 'this is code template' + ''  // 编译后this is code template 
this is code template
复制代码

Comments注释

单行注释

// 编译前// 这是一个注释p 这是一个注释// 编译后

这是一个注释

复制代码

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

// 编译前//- 这是一个注释p 这是一个注释// 编译后

这是一个注释

复制代码

块级注释

// 编译前//-  注释不会出现在模板中  真的//  第一行注释  第二行注释// 编译后
    复制代码

条件注释

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

// 编译前
    // 编译后
    复制代码

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   // 编译后
      
     kobe
    
复制代码

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

// 编译前- var user = {name: 'kobe'}#user  unless !user.name  h2 #{user.name}// 编译后
      
     kobe
    
复制代码

doctype

// 编译前doctype html// 编译后复制代码

Filters过滤器

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

先全局安装这些插件

npm install --save jstransformer-coffee-scriptnpm 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');// 编译后MarkDown
this is markdown filter
link
    (function() {  console.log('this is coffee-script');}).call(this);复制代码

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

Includes包含

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

- /index.jade- /includes/  -/head.jade  -/footer.jade复制代码

// index.jadedoctype htmlhtml  include includes/header.jade  body    h1 这是主题内容    include includes/footer.jade复制代码

// header.jadeheader  title 通用的header  script(src='/jQuery.js')  link(href='reset.css')复制代码

// footer.jadefooter#footer  p Copyright (c) foobar复制代码

// 编译后  
        
     通用的header    
         
       
    
      这是主题内容
    
          
     Copyright (c) foobar
    
    
  复制代码

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

// 格式style  include style.cssscript  include script.js复制代码

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

// 引入article.mdinclude:markdown-it article.md复制代码

模板继承

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

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

// 基本使用// 编译前block desc p 这是block contextblock desc // 编译后

这是block context

复制代码

// index.jadedoctype htmlhtml  include includes/header.jade  body    block content    block foot    .footer  some footer content复制代码

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

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

// index.jadedoctype htmlhtml  block scripts    script(src='/jquery.js')  body    block content    block foot    .footer  some footer content复制代码

// page.jadeextends index.jadeblock 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 编译后          page.jade
    cat
    dog
    
    
      some footer content
    
  复制代码

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

block content  .sidebar    block sidebar      p nothing  .primary    block primary      p nothing复制代码

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

// pageTwo.jadeextend page.jadeappend scripts  script(src='/pageTwo.js')复制代码

// 编译后            page.jade
    cat
    dog
    
    
      some footer content
    
  复制代码

Interpolation插值

// 编译前- var author = 'xyz'- var date = '2017-4'h2  p writer was by #{author.toUpperCase()}  p date is #{date}// 编译后  writer was by XYZ
  date is 2017-4
复制代码

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

Iteration迭代

each

// 编译前- var arr = [1,2,3,4]each val,index in arr  li= index + ':' + val // 编译后0:1
1:2
2:3
3:4
复制代码

while

// 编译前- var arr = 4while arr > 0  li= arr--// 编译后4
3
2
1
复制代码

Mixins

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

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

this is a mixin block

复制代码

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

// 编译前mixin link(href,name)  a(href=href)= name+link('www.baidu.com','百度')  // 编译后百度复制代码

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// 编译后my name is kobe
not provided content
my name is cpul
block content
复制代码

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

// 编译前mixin lists(className,...items)  ul(class=className)    each item in items      li= item+lists('demo',1,2,3)// 编译后
      
     1
  
     2
  
     3
    
复制代码

Pug的缺点

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

可移植性差

对新手调试不方便

性能不是很好

jade(pug)

jade优点

安装

测试demo

粗暴的编译方法

jade study

jade study

自动编译

Express与Pug

API

标签属性

Case

Code

Comments注释

Conditionals条件语句

kobe

kobe

doctype

Filters过滤器

MarkDown

this is markdown filter

Includes包含

这是主题内容

模板继承

page.jade

page.jade

Interpolation插值

writer was by XYZ date is 2017-4

Iteration迭代

Mixins

Tags

Pug的缺点

writer was by XYZ

date is 2017-4