jade介绍、安装

jade是前后端都可以使用的模板引擎7

1、安装:

    sudo npm i -g jade


2、介绍

    元素标签不需要写<>

    子元素与父元素需要换行并tab缩进

    标签与文本需要使用空格来隔开


3、jade的缺点

    1）可移植性差

    2）调试困难

    3）性能一般

4、初始阶段开发效率，稳定性成和协作的成本

jade 头尾标签

<!DOCTYPE>
html
    head
        title ${title}

    body
        h1 标题内容

命令行编译jade文件

# jade index.jade         // 会将jade文件编译成同级目录的index.html文件，并且是没有代码格式的只有一行

# jade -P index.jade     // 有缩进，可读的格式

# jade -P -w index.jade // 侦听jade文件有变化执行转换的命令

小技巧: 在sublime中打开 index.jade 和 index.html文件, 选择view菜单 -> layout/ columns2 变成两列，将index.html放到另一列中，这样每次保存就可以看到html代码

属性文本和值

1、class和id

    div.row

    div#row

    div#row.column-samil    // id="row" class="column-samil"

    div.rowA.main        // class="rowA main"


2、属性

    a标签的href属性值，和自定义属性和值
    a(href="http://haha.com",
        title="jade",
            data-uid="siguang")

    input(name="course" type="check" checked)

混合的文本和标签

1、如果字符里有点进行处理

    // 不会把.aa解析成 class="aa" 并且换行,也能写html标签
    div.row
        p.
            1.aa <strong>这里字体加粗</string>
            2.bb
            3.cc 
            4.dd

    或者
    div.row
        p
            | 1.aa 
            | 2.bb
            | 3.cc 
            | 4.dd

注释和条件注释

1、单行注释 //

2、不可见的注释 //-

3、块注释        //- 在当前节点的开头

4、条件注释

    <!--[if IE 8]>
        <html class='ie8'>
    <![endif]>


    </html>        // 需要html



div.row
    // a(href="http://haha.com", title="siguang", data-index="1") 去主站

    //- input(name="course" type="check" checked)

div.row
//-
    p.
        1.aa <strong>这里字体加粗</string>
        2.bb
        3.cc 
        4.dd

变量声明

声明: - var course = 'jade'

获取: #{jade}

1、命令行下传值
    jade index.jade -P -w --obj '{"name":"siguang", age: 30}'

    div.row
        div.column-12
            姓名: #{name}

        div.column-12
            年龄: #{age}

2、通过json传值

    jade index.jade -P -O test.json

    test.json
    {
        'name': 'siguang',
        'age': 30
    }

转义

1、将html转成字符串输出

    - var data = '<script>alert(123)</script>'

    p #{data}


2、非转义

    - var data = '<script>alert(123)</script>'

    p !{data}

流程

1、if...else...

    - var isData = true
    if isData
        div 对象存在
    else
        对象不存在


2、case

    - var name = 'jade'
    case name
        when 'java'
            div java

        when 'jade'
            p hello jad



3、for 或 each 循环

    - var data = {'name': 'siguang', 'nage': 30}
    div.row
        - for(var key in data)
            div= key +'='+data[key]

    each()

mixin

相同结构的内容可以放到mixin中，相同一个函数

1、无参
    mixin 函数名        // 声明 
        p 这里是函数的块内容
        p 这里是函数的块内容
        p 这里是函数的块内容

    +函数名            // 调用

2、有参

    mixin 函数名(参数)
        each key in data
            li= data[key]

    +函数名({username: 'siguang', age: 30});

模板继承

代码复用

定义一个html的基本结构，内容只写到body中

public.jade

    DOCTYPE html
    html
        head

        body
            block desc
                p 内容继承
            block content    // 这里接收内容


main.jade

    // 通过extends继承到哪个 jade文件
    extends public

    block content        // 这里写到哪里
        div.row
            p aaaa
            p aaaa
            p aaaa

        div.row-b
            p bbb
            p bbb
            p bbb

include 引用

引用一个jade文件

DOCTYPE html
html
    head
        include head

    body
        include login

jade api

http的原声写法

1、jade.compile(source, 传值): 返回一个函数来生成html

2、jade.compileFile(path, 传值)

3、jade.compileClient(source, 传值)

4、jade.render(source, 传值):

5、jade.renderFile(jade文件, 传值):


compile()示例
    var http = require('http');
    var jade = require('jade');

    var server = http.createServer(function(req, res){
        res.writeHead(200, {'ContentType': 'text/html'});

        var fn = jade.compile('div #{course}', {});
        var html = fn({course: 'jade'});

        res.end(html);
    })

    server.listen('8081', 'localhost')


render()示例

    var http = require('http');
    var jade = require('jade');

    var server = http.createServer(function(req, res){
        res.writeHead(200, {'ContentType': 'text/html'});
        var html = jade.render('div #{course} #{name}', {course: 'jade', name: 'siguang'});
        res.end(html);
    })

    server.listen('8081', 'localhost')


{pretty:true} 如果不加此属性html会是压缩模式，加上格式化的代码

将html编译成jade文件

安装: sudo npm install html2jade -g

生成命令: html2jade ./public/index.html > index.jade

在node中转换

var html2jade = require('html2jade');

html2jade.convertDocument(document, {}, function(err, jade){
    console.log('反编译后的jade文件')
})


在线转换: http://html2jade.vida.io/

| 参考资料
| http://www.cnblogs.com/fullhouse/archive/2011/07/18/2109945.html
|
|