javascript流行的模板引擎:Mustache,HandleBars,Juicer,Xtemolate,EJS,Jade
jade的安装npm install jade
jade现在已经更名为pug
安装改为 npm install pug
jade 文件编译>jade -P -w index.jade
可选参数:-P 友好格式输出 -w 监测更改,实时编译
sublime打开两栏方便查看
jade反编译:
安装html2jade模块 npm install html2jade -g
>html2jade http://www.baidu.com > baidu.jade
>html2jade title.html>title.jade
jade的缺点:
1.可移植性差;(可以通过反编译来解决)2.调试困难;3.性能不是非常出色
选择因素:
1.项目初始阶段,快速开发
jade的一些语法片段:
index.jade
extends layout
block content
h2 文档声明和头尾标签
h3 标签语法
section
div
ul
p
h3 元素属性
#id.class1(class='class2')
div#id.class1.class2
a(href='http://imooc.com', target='_blank') link
h3 元素的值,文本
p
a(href='http://imooc.com',title='imooc jade study', data-uid='1000') link
input(name='course', type='text', value='jade')
input(name='type', type='checkbox', checked)
h3 混排的大段文本
p.
1. aa
2. bb
<strong>333</strong>
3. c
4. dd
p
| 1. aa
strong 11
| 2. bb
| 3. c
h2 注释
h3 单行注释
// h3.title(id='title', class='title3') imooc
h3 非缓冲注释
//- #id.classname
h3 块注释
//-
p
a(href='http://imooc.com',title='imooc jade study', data-uid='1000') link
input(name='course', type='text', value='jade')
input(name='type', type='checkbox', checked)
h2 声明变量和替换数据
h3 转义
- var data = 'text'
- var htmlData = '<script>alert(1);</script><span>script</span>;'
p #{data}
p #{htmlData}
p= data
p= htmlData
h3 非转义
p!= htmlData
p !{htmlData}
h3 非解析变量符
p \#{htmlData}
p \!{htmlData}
h3 不输出 undefined
input(value='#{newData}')
input(value=newData)
h3 样式和脚本块语法
style.
body {color: #ff6600;}
script.
var imoocCourse = 'jade';
h2 流程逻辑
h3 if else
- var isImooc = true
- var lessons = ['jade', 'node']
if lessons
if lessons.length > 2
p more than 2: #{lessons.join(', ')}
else if lessons.length > 1
p more than 1: #{lessons.join(', ')}
else
p no lesson
else
p no lesson
h3 unless
unless !isImooc
p #{lessons.length}
h3 case
- var name = 'jade'
case name
when 'java'
when 'node'
p Hi node!
when 'jade': p Hi jade!
when 'express': p Hi exress
default
p Hi #{name}
h3 for
- var imooc = {course: 'jade', level: 'high'}
- for (var k in imooc)
p= imooc[k]
h3 each
- each value, key in imooc
p #{key}: #{value}
each value, key in imooc
p #{key}: #{value}
h3 遍历数组
- var courses = ['node', 'jade', 'express']
each item in courses
p= item
h3 嵌套循环
- var sections = [{id: 1, items: ['a', 'b']}, {id: 2, items: ['c', 'd']}]
dl
each section in sections
dt= section.id
each item in section.items
dd= item
h3 while
- var n = 0
ul
while n < 4
li= n++
h2 神奇的 mixins
mixin lesson
p imooc jade study
+lesson
mixin study(name, courses)
p #{name} study
ul.courses
each course in courses
li= course
h3 嵌套的 mixin
+study('tom', ['jade', 'node'])
mixin group(student)
h4 #{student.name}
+study(student.name, student.courses)
+group({name: 'tom', courses: ['jade', 'node']})
h3 mixin 的块包含
mixin team(slogon)
h4 #{slogon}
if block
block
else
p no team
+team('slogon')
p Good job!
h3 mixin 传递属性
mixin attr(name)
p(class!=attributes.class) #{name}
+attr('attr')(class='magic')
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs('attrs')(class='magic2', id='attrid')
h3 mixin 传递位置个数参数
mixin magic(name, ...items)
ul(class='#{name}')
each item in items
li= item
+magic('magic', 'node', 'jade', '..')
h2 模板包含和继承
h3 包含
include style
style.
h2 {
color: #000;
}
include title.html
block desc
p desc from index
h2 过滤器 filters
h2 安装其他的插件并使用比如markdown,less,coffee
h3 markdown
:markdown
Hi, this is **imooc** [link](http://imooc.com)
h3 less
style
:less
body {
p {
color: #ccc;
}
}
h3 coffee
script
:coffee
console.log 'This is coffee!'
h2 浏览器端使用 jade
#runtime
script(src='node_modules/jade/runtime.js')
script(src='runtime.js')
script.
var runtimeNode = document.getElementById('runtime');
var runtimeHtml = template({isRuntime: true});
runtimeNode.innerHTML = runtimeHtml;
span 12
layout.jade
doctype html
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
head
include head
body
block desc
p desc from layout
block content
</html>
server.js
var http = require('http')
var jade = require('jade')
// var html2jade = require('html2jade')
http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/html'
})
// html2jade.convertDocument(document, {}, function(err, jade) {
// })
// 1. jade.compile
// var fn = jade.compile('div #{course}', {})
// var html = fn({course: 'jade'})
// 2. jade.render
// var html = jade.render('div #{course}', {course: 'jade render'})
// 3. jade.renderFile
var html = jade.renderFile('index.jade', {course: 'jade renderFile', pretty: true})
res.end(html)
}).listen(1337, '127.0.0.1')
console.log('Server running at 1337')
代码片段来自imooc的Scott老师的jade课程,课程网址http://www.imooc.com/learn/259