Jade模板引擎让你飞

大前端

2016-11-13

一.安装

npm install jade

二.基本使用

1.简单使用

p hello jade!

渲染后:

<p>hello jade!</p>

jade安装成功后,进入node命令使用。

2.jade.compile:编译字符窜

> var jade = require('jade')
undefined
> jade.compile('p hello jade!')()
'<p>hello jade!</p>'

3.jade.compileFile:编译jade文件

> var jade = require('jade')
undefined
> jade.compileFile('hello.jade')()
'<p>hello jade!</p>'
>

4.jade.render:渲染html

> jade.render('p hello jade!')
'<p>hello jade!</p>'

5.jade.renderFile:渲染jade文件

> jade.renderFile('hello.jade')
'<p>hello jade!</p>'
>

当jade全局安装后也可以直接使用jade命令。

6.jade filename

C:\Users\Administrator>jade hello.jade

  rendered hello.html


C:\Users\Administrator>

7.jade -P filename 使html文件变得可读

修改hello.jade文件为:

doctype html
html
    head
        title hello jade!
    body
        p hello jade

运行:

jade hello.jade

jade.html文件变成这样:

<!DOCTYPE html><html><head><title>hello jade!</title></head><body><p>hello jade</p></body></html>

这样的可读性太差了，不过没事我们有P(pretty)参数

运行:

jade -P hello.jade

hello.html文件变成这样:

<!DOCTYPE html>
<html>
  <head>
    <title>hello jade!</title>
  </head>
  <body>
    <p>hello jade</p>
  </body>
</html>

这样看起来顺眼多了。

8.jade -w filename 监控文件

执行：

C:\Users\Administrator>jade -w hello.jade

  watching hello.jade
  rendered hello.html

一旦我们修改jade文件，html文件会实时修改。此乃神技也，有点像supervisor。

三.常规用法

1.选择器的使用

p.bt.cn#dn

编译后

<p id="dn" class="bt cn"></p>

2.如果省略标签元素，默认是div

.bt.cn#dn

编译后

<div id="dn" class="bt cn"></div>

3.属性的使用

一般属性

div(color='red',font-size='1.5rem')

编译后

<div color="red" font-size="1.5rem"></div>

多个属性如果写一行觉得拥挤的话，可以分开写

div(color='red'
    font-size='1.5rem')

style属性

a(style={color:'red'})

编译后:

<a style="color:red;"></a>

4.字符转义

使用=赋值会进行转义

div(href="https://www.baidu.com/s?wd=jade&ws=jades")

编译后:

<div href="https://www.baidu.com/s?wd=jade&amp;ws=jades"></div>

& 发生了转义 &

　使用!=不会转义

div(href!="https://www.baidu.com/s?wd=jade&ws=jades")

编译后:

<div href="https://www.baidu.com/s?wd=jade&ws=jades"></div>

5.变量的使用

　单个变量

- var code = 1;
p.bt #{code}

编译后：

<p class="bt">1</p>

　对象

- var code = {z:1,q:2};
p.bt #{code.q}

编译后:

<p class="bt">2 </p>

字符串拼接

- var code = {z:1,q:2};
p(class='bt'+code.z) #{code.q}

编译后:

<p class="bt1">2</p>

6.流程控制语句

　Case

- var i=0;
case i
    when 0
        div 变量为#{i}
    when 1
        div 变量为1
    default
        div 没有匹配项

编译后:

<div>变量为0</div>

For

- for(var i=0;i<2;i++)
   div #{i} //注意缩进

编译后:

<div>0</div>
<div>1</div>

　If...else

- var ifv = true;
if(ifv)
    div  为真
else
    div 为假

编译后：

<div>为真</div>

7.注释

html可见注释

//html可见注释
div.bt

编译后:

<!--html可见注释-->
 <div class="bt"></div>

html不可见注释

//-html不可见注释
div.bt

编译后：

<div class="bt"></div>

多行注释(注意缩进)

//
  div.bt

编译后：

<!--div.bt-->

条件注释

<!--[if IE 8]>
<html lang="en" class="ie8">
<![endif]-->
<!--[if IE 8]><!-->
<html lang="en">
<!--<![endif]-->

编译后：

<html lang="en" class="ie8">
<![endif]-->
<!--[if IE 8]><!-->
<html lang="en">
<!--<![endif]-->

8.include

doctype html
html
  head
    style
      include style.css
  body
    script
      include script.js

编译后:（一定要有这两个文件，不然jade会报错）

<!DOCTYPE html>
<html>
  <head>
    <style>p{
    color:red;
    }
    </style>
  </head>
  <body>
    <script>console.log(1)</script>
  </body>
</html>

9.extends与block

layout.jade

doctype html
html
    head
        title hello jade!
    body　　　　 block content
        
        block foot

business.jade

extends ./layout.jade

block content
       h1 content主体部分 

block foot
    h1 foot脚注部分

编译后：

busuness.html

<!DOCTYPE html>
<html>
  <head>
    <title>hello jade!</title>
  </head>
  <body>
    <h1>content主体部分</h1>

    <h1>foot脚注部分</h1>
  </body>
</html>

10.jade中写行内js或css

doctype html
html
  head
    style.
    p{color:red}
  body
    script.
    console.log(OK)

编译后:

<!DOCTYPE html>
<html>
  <head>
    <style>p{
    color:red;
    }
    </style>
  </head>
  <body>
    <script>console.log(OK)</script>
  </body>
</html>

11.强大的Mixins

mixin templ_li(value)
    li #{value}
ul
    +templ_li('香蕉')
    +templ_li('橘子')

编译后:

<ul>
   <li>香蕉</li>
   <li>橘子</li>
</ul>

这个特性让我们能自定义一些模板函数。特别是当我们的html结构有相似的时候。

其实跟less中的公共类，react中的公共函数也都是共通的。

less中：

.temp_color(@color:red){
  color:@color;  
}

//使用
p{
 .temp_color(blank);
}

react中:

var temp_prop = {
  getDefaultProps:function(){
    return {name:'共有属性'};
  }  
}

//使用
var ComponentDib = React.createClass({
  mixins:p[temp_prop ],
  render:function(){
    return <h1>{this.props.name}</h1>
  }
})

jade