jade学习02

最新推荐文章于 2025-09-07 22:13:39 发布

转载最新推荐文章于 2025-09-07 22:13:39 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jinkspeng/p/4363408.html

文章标签：

#javascript #ViewUI

模版继承 ; `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弥补)
调试困难
性能不是很出色（项目要求高的话不适合选择）

适用

团队初期追求效率的情况下

转载于:https://www.cnblogs.com/jinkspeng/p/4363408.html