jade模板引擎基础

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