jade学习02

模版继承 ; block,extends ;如果是原生html文件的话，后缀html

//layout.jade

doctype html
html
  head
    meat(charset='utf-8')
    title learn jade
    
  body
    block content

//inde.jade
extends layout   //这里注意路径

block content

－－－－－
<!DOCTYPE html>
<html>
  <head>
    <meat charset="utf-8"></meat>
    <title>learn jade</title>
  </head>
  <body>
  </body>
</html>

模版包含 ; include

//index.jade

extends layout

block content
  
  include style
 

//style.jade

style.
  h2{
    color: #555;
  }

//结果
  <body>
    <style>
      h2{
        color: #555;
      }
    </style>
  </body>

jade api

  • jade.compile(source, options)
var http = require('http');
var jade = require('jade');

http.createServer(function(req, res) {
  res.writeHead(200, {'Content-Type':'text/plain'})

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

  res.end(html);
}).listen(3000);
console.log('server Start');

//结果
<div>jade</div>
  • jade.compileFile(path, options)
  • jaed.compileClient(source, options)
  • jade.render(source, options)
  var html = jade.render('div #{course}', {course: 'jade render'});

//结果
<div>jade render</div>
  • jade.renderFile(filename, options)
var http = require('http');
var jade = require('jade');

http.createServer(function(req, res) {
  res.writeHead(200, {'Content-Type':'text/html'})
  var html = jade.renderFile('index.jade', {course: 'jade renderFile', pretty: true});
  res.end(html);
}).listen(3000);
console.log('server Start');

过滤器

**安装 npm install --save markdon less coffee-script **

**直接在jade中使用，无需在node文件中引用 **

:markdowm
  #title

style
  :less
    body{
      p{
        color:#ccc; 
      }
    }

script
  :coffee
    console.log 'hi'

利用html2jade反编译

  • 安装 npm install --save html2jade
  • 网址编译成jade html2jade http://www.example.com 地址 > example.jade
  • html文件编译成jade html2jade /example/html > example.jade
  • node.js中使用
var html2jade = require('html2jade');

html2jade.converDocument(document, {}, function(err, jade) {

))

jade

缺点

  • 可移植性差; (跨团队合作问题，可以用html2jade弥补)
  • 调试困难
  • 性能不是很出色（项目要求高的话不适合选择）

适用

  • 团队初期追求效率的情况下
posted @ 2015-03-24 17:14  JinksPeng  阅读(321)  评论(3)    收藏  举报