Jade 前端模板学习总结

作者: 读书的鱼 | 来源:发表于2019-06-06 23:51 被阅读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>&lt;script&gt;alert(1)&lt;/script&gt;&lt;span&gt;大家好！&lt;/span&gt; </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')