Jade 前端模板学习总结
2019-06-06 本文已影响0人
读书的鱼
第一章 Jade模板引擎课程简介
1-1模板引擎：
将动静部分糅合的一种机制或者技术
效果图
1-2流行的模板
- PHP:Smarty SimpleTemplate Xtemplate Savant
- Java:Velocity FreeMarker Jbyte
- C#:Dotiquid SharpDom Razor
- Javascript:Mustache Handlebars Juicer Xtemplate EJS Jade
1-3课程须知
针对用户群：
使用过一些模板库：mustache/jquery.tmpl
有一定的命令基础
了解或者使用过nodejs
1-4Jade环境配置
Mac:
-升级mac系统到最新
-升级xcode及xcode command line tools到最新
-安装homebrew
-通过安装homebrew 安装git/node（也可以去nodejs官网安装包来安装node）
-通过npm安装jade:
sudo npm install jade -g //全局安装
Windows:
-安装node可执行文件
-安装cygwin，及可能的openssl g++ -gcc python git 等
-通过npm安装jade:
sudo npm install jade -g //全局安装
1-5Jade特点
特点
第二章 Jade-文档声明和头尾标签
2-1初体验第一个jade文件的创建
//index.jade
doctype html
html
head
title hello jade
body
h1 hello jade
因为我们在第一章已经讲了全局安装jade了，所以我们就可以使用jade 命令了
jade index.jade
运行结果就会生成一个压缩代码后的index.html
如果我们不想生成的index.html文件进行压缩
那么我们可以执行:
jade -P index.jade
如果我们想实时看到我们的编译效果，那么我们应该如何操作呢？
jade -P -w index.jade
2-2 Jade-标签语法
在1-1中像：html、head、body、h1、strong、ul、li....等等都是Jade的标签。
这些标签不会像html标签成对出现 他是去掉左右箭头的单标签，标签空格后面接文本内容。
2-3 Jade-属性文本和值
如果是单标签文件，那么class id等等其他属性应该怎么写呢？
- class: div.title
//解析出来就是：
<div class="title"></div>
- id: div#title
//解析出来就是：
<div id="title"></div>
- 叠加写法:div#title.title
//解析出来就是：
<div id="title" class="title"></div>
- 括号添加属性就是：
div(id="title" class="title" style="color:#ccc" data-ui="hello")
//解析出来就是：
<div id="title" style="color:#ccc" data-ui="hello" class="title"></div>
效果图
2-4 Jade-混合的成段文本和标签
那么一个段落有多行文本我们又是如何来展示的呢？
//|+空格
p this is paragraph
| hello everyone
span 12122
b 大家好
//标签+.
p.
this is paragraph
hello everyone
span 12122
b 大家好
p
| this is paragraph
| hello everyone<span>12122</span>
b 大家好
效果
2-5 Jade-注释和条件注释
//h3 单行注释
//- h4 缓冲注释 不会解析到浏览器代码中
//-
p 多行注释
2-6 Jade-声明变量和数据传递
第一种页面上声明变量 传递数据
- var b = "hello"
p #{b} world
//解析后：
<p>hello world</p>
第二种编译过程中:
jade -P -w index.jade --obj '{"b":"hello1"}'
此时我们注释掉页面上的
// - var b = "hello"
//解析后：
<p>hello1 world</p>
第三种是引入外部的json文件来传递变量值
//a.json
{"b":"hello2"}
//运行
jade -P -w index.jade -O a.json
//解析后：
<p>hello2 world</p>
最后我们在说一点
除了可以定义变量的传递 我们还可以对变量进行一些js的操作比如，把字母转换为大写等等的操作：
- var b = "hello"
p #{b.toUpperCase()} world
//编译的结果
<p>HELLO world</p>
ps:这三种的优先级呢，内部变量声明，数据的传递优先级最高
2-7Jade-安全转义与非转义
- var a = "text"
- var htmlData = '<script>alert(1)</script><span>大家好！</span>'
p #{a}
//解析结果：
<p>text</p>
//就行了转义
p #{htmlData}
//解析结果：
<p><script>alert(1)</script><span>大家好！</span> </p>
//没有进行转义
p !{htmlData}
//解析结果：
<p><script>alert(1)</script><span>大家好！</span> </p>
//上面三种写法还可以通过=来写 （等价于=）
p=a
p=htmlData
p!=htmlData
//解析结果：同上面三种解析结果一样
//那如果我就想页面显示#{htmlData} 或者 #{a}
p \#{a}
p \!{htmlData}
//解析结果：
<p>#{a}</p>
<p>!{htmlData}</p>
//在我们给页面标签赋值的时候，有时候并没有这个变量，又不想页面解析成为undefined
input(value='#{c}')
input(value=c)
//解析结果：
<input value="undefined">
<input>
2-8 流程代码-for-each-while
h4 for
- var newObj = {course:'jade',leave:'high'}
- for (var k in newObj)
p= newObj[k]
h4 each
- each value,key in newObj
p #{key}:#{value}
each value,key in newObj
p #{key}:#{value}
h4 遍历数组
- var course = ['javascript','react','vue']
each item in course
p= item
h4 嵌套循环
- var sections = [{id:0,items:['a','b']},{id:1,items:['c','d']}]
dl
each section in sections
dt= section.id
each items in section.items
dd= items
h4 while
- var n = 0
ul
while n < 4
li= n++
效果
2-9 流程代码 if-else-unless-case
h4 if else
- var isTrue = true
- var lessons = ['jade','js']
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 no1 lessons
else
p no2 lessons
unless !isTrue
p #{lessons.length}
h4 case
- var name = 'jade'
case name
when 'java'
when 'node'
p Hi node
when 'jade': p Hi jade
when 'express': p Hi express
default
p Hi #{name}
效果
2-10 神奇的mixins
doctype html
html
head
title hello jade
body
h3 mixin
mixin lesson
p hello mixin
+lesson
h3 mixin function(函数方法、入参)
mixin study(name,courses)
p #{name}
ul.course
each course in courses
li=course
+study('sunnyFan',['Javascript','React','Vue'])
h3 mixin object nesting(对象与嵌套)
mixin group(student)
+study(student.name,student.courses)
+group({name:'sunnyFan',courses:['Javascript','React','Vue']})
h3 mixin slogon
mixin team(slogon)
p #{slogon}
if block
block
else
p no team
+team('slogon')
p Good Job!
h3 mixin attr(传递属性)
mixin attr(name)
p(class!=attributes.class) #{name}
+attr('attr')(class='mgic')
mixin attrs(name)
p&attributes(attributes) #{name}
+attrs('attrs')(class='mginc2',id='mginc2')
h3 mixin 当我们要传递很多不确定的值时候
mixin mgic(name,...items)
ul(class='#{name}')
each item in items
li=item
+mgic('sunnyFan','18','man','..')
编译后的html:
<!DOCTYPE html>
<html>
<head>
<title>hello jade</title>
</head>
<body>
<h3>mixin</h3>
<p>hello mixin</p>
<h3>mixin function(函数方法、入参)</h3>
<p>sunnyFan</p>
<ul class="course">
<li>Javascript</li>
<li>React</li>
<li>Vue</li>
</ul>
<h3>mixin object nesting(对象与嵌套)</h3>
<p>sunnyFan</p>
<ul class="course">
<li>Javascript</li>
<li>React</li>
<li>Vue</li>
</ul>
<h3>mixin slogon</h3>
<p>slogon</p>
<p>Good Job!</p>
<h3>mixin attr(传递属性)</h3>
<p class="mgic">attr</p>
<p id="mginc2" class="mginc2">attrs</p>
<h3>mixin 当我们要传递很多不确定的值时候</h3>
<ul class="sunnyFan">
<li>18</li>
<li>man</li>
<li>..</li>
</ul>
</body>
</html>
效果图
第三章 Jade进阶
3-1Jade-模板的继承
我们在开发过程中经常会遇到重复的代码块或者文本，比如
重复代码块（extends）：公共的头部，底部；
重复的文本（block）:相同的一段文本内容
//layout.jade
doctype html
head
title common file
body
block content //这个地方是引入代码块
</html>
//index.jade
extends layout //将公共文件引入进来
block content //公共文件下面的代码块
h3 这篇文章讲述的是jade的继承（extends block）
ul
block descLi
li hello everyone
li hello world
li hello sunnyFan
block descLi
block descLi
编译后的html：
<!DOCTYPE html>
<head>
<title>common file</title>
</head>
<body>
<h3>这篇文章讲述的是jade的继承（extends block）</h3>
<ul>
<li>hello everyone</li>
<li>hello world</li>
<li>hello sunnyFan</li>
<li>hello everyone</li>
<li>hello everyone</li>
</ul>
</body></html>
3-2 Jade-模板的包含
包含（include）:可以将html、style、head部分、script等等当成一个整个文件引入到页面中
//head.jade
meta(charset="utf-8")
title common file
//layout.jade
doctype html
head
include head //这个地方引入head.jade
body
block content
</html>
//style.jade
style.
h3 {
color: red
}
//index-content.html
<div>
this paragraph from index-content.html
</div>
//index.jade
extends layout
block content
include style //这个地方引入style样式
h3 这篇文章讲述的是jade的继承（extends block）
include index-content.html //这个地方引入html代码块
ul
block descLi
li hello everyone
li hello world
li hello sunnyFan
block descLi
block descLi
编译后的结果是：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>common file</title>
</head>
<body>
<style>
h3 {
color: red
}
</style>
<h3>这篇文章讲述的是jade的继承（extends block）</h3><div>
this paragraph from index-content.html
</div>
<ul>
<li>hello everyone</li>
<li>hello world</li>
<li>hello sunnyFan</li>
<li>hello everyone</li>
<li>hello everyone</li>
</ul>
</body></html>
效果图
3-3render及renderFile方法
Jade Api
1.初始化一个package.json文件
npm init
2.安装jade相关api依赖包 jade(pug)
npm install jade --save
因为我npm版本可能比较高，还有就是pug是jade的升级版，所以在安装的过程提示我建议我安装
pug
npm install pug --save
3.jade(pug) api的一些相关操作
var http = require('http')
var pug = require('pug')//jade or pug
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/html'
})
//1.pug.compile
// var fn = pug.compile('div #{course}',{})
// var html = fn({course:'pug'})
//2.pug.render
// var html = pug.render('div #{course}',{course:'pug render'})
//3.pug.renderFile
var html = pug.renderFile('index.jade', { course: 'pug renderFile', pretty: true })
res.end(html)
}).listen(3030, '127.0.0.1')
console.log('server running at 127.0.0.1:3030')
