Node学习，jade笔记

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

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

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

jade优点
可读性高
灵活的缩进
块展开
代码默认经过编码处理(转义),安全性高
运行时和编译时上下文错误报告
支持命令行编译
支持html5模式
在内存中缓存(可选)
原生支持 Express
合并动态和静态标签类
过滤器
关于Ejs或者其他模板引擎与jade比较,可以看看这篇文章https://www.zhihu.com/question/20355486

安装
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

jade test

jade 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 =
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 =

user
unless !user.name

h2 #{user.name}
// 编译后

  kobe

doctype
// 编译前
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
: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.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

// 编译后



  
    通用的header
    
    
  
  
    这是主题内容
    
      Copyright (c) foobar
    
  

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
// 编译后
这是block context
// 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 编译后



  
  
  
    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.jade
extend page.jade
append 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 = 4
while 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
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

Tags
默认情况下，一行开头的文本（或仅在空格之后）代表一个html标签。 缩进的标签是嵌套的，创建了像html的树结构。
Pug可以判断出哪些元素是自闭,您还可以通过简单地附加'/'字符来明确地自己关闭标签：
为了节省空间，Pug提供嵌套标记的内联语法。
// 编译前

p: span 内联
// 编译后
内联
Pug的缺点
凡事不可能完美.Pug也有自己的弊端.
可移植性差

对新手调试不方便

性能不是很好

posted @ 2022-01-20 21:36 Ryuuio 阅读(141) 评论(0) 收藏举报

刷新页面返回顶部

Node学习，jade笔记

jade study

jade study

user

kobe

user

kobe

MarkDown

this is markdown filter

这是主题内容

page.jade

page.jade

writer was by XYZ date is 2017-4

公告

writer was by XYZ

date is 2017-4