注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Mr.7

我将骄傲的活在这个大唐盛世

 
 
 

日志

 
 

一个最简单的jade在nodejs中应用的例子  

2013-10-16 14:59:23|  分类: 挨踢咋活 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1. Jade的设计思想

1.1 分清什么是静态的,什么是动态的

  • 静态的原封不动的表现在html中,动态的会转换表现
  • js代码会执行,js表达式会取值,标签会转换,文本直接输出
    • 标签后是文本,文本可以单行和多行
    • 文本中可嵌入jade表达式;使用#{},里面是后台js表达式
    • -开头的,随后是后台js代码
    • 几个特定的jade关键词,例如循环控制等,随后的都是后台表达式
    • html标签紧跟着=,后面的是js表达式

1.2 jade中,分清什么是标签、文本和代码

  • jade的任何一段文本,都要区分是标签、文本和代码
  • jade以-开头的,随后是后台js代码
  • jade的格式总体是标签+文本,有三种
    • 标签(缩进) :随后的缩进是文本
    • 标签=(缩进):随后的缩进是js表达式
    • 标签. : 随后的多行缩进都是文本,不必使用|
  • jade的多行文本每行以|开头
  • jade的多行文本,每行又可以交叉使用=或者-(有bug)

1.3 jade中,分清标签的特殊处理

  • 标签的id:#id
  • 标签的class:.class
  • 标签的属性:key(id=value)
  • 没有标签名的标签:div

2. Jade的例子

代码在:http://pan.baidu.com/s/1gjDr5

2.1 jade模板

doctype 5
html
head
title= pageTitle
script(type='text/javascript').
function showCityEx(city)
{
return city + " & " + city;
}

body
//--@test转义;以下几个字符有特殊意义;如果当做文本,必须使用|转义
//--@test转义1: - ,jade代码的开头
//--@test转义2: | ,jade多好文本的开头
//--@test转义3: / ,jade注释的开头
//--@test转义4: = ,jade代码表达式的开头
|- i begin at "-" (use |-prefix in jade)<br/>
||- i begin at "|"(use |-prefix in jade)<br/>
|//--i begin at "//"(use |-prefix in jade)<br/>
|=i begin at "="(use |-prefix in jade)

h1 #{h1}

#container.col
if name=='liuchuanchuan'
p You are owner!
else
p You are #{name},and you are not owner!

//--@test_后台js代码,特别注意缩进相当于括号,以 - 开头--
-var a=new Array()
-for(var i=0; i<citys.length; i++)
- a.push(citys[i])
- a[a.length-1] = a[a.length-1] + "_1"
p old:#{a.length},#{a}
-a.push('qingdao')
p new:#{a.length},#{a}
p
|I had ever goto lots of citys(more than #{a.length}).<br/>
-a.push('chengdu') //--这里的缩进影响是否会新添加一个<P>;这种语法有点扯淡
=(a.length+10) + " "
|is my dream!<br/>
|I had ever goto lots of citys(#{a}).
|I like to travel!
|do you?

p.
i had go to

p= "now length = " + a.length
|<br/>haha
ul
for city in citys
li= city
else
li sorry, no city!

//--@test_后台jade代码,特别注意循环的使用--
p this is an example of table.
table(border=1)
tr
th hello
th world,citys.count=#{cscores.length + 3}
th count
for city,index in citys
tr
td= index
td welcome to #{city}(#{city.substr(0,4)})
td= cscores[index]
div over!

2.2 nodejs调用

var jade = require('jade');

// Compile a function
var fn = jade.compile('hello world #name', {});

// Render the function
var html = fn({name:'liu'});
console.log(html);

// 渲染字符串
var rtn = jade.render('.csser.com hello,#{name}', { name: 'liuchuanchuan' });
console.log(rtn);

// 渲染文件
var city_names = [
'wuhan',
'tianjin',
'beijing',
'shanghai'
];

var city_scores = [
'60',
'62',
'80',
'70'
];

jade.renderFile('./testjade.jade', { citys: city_names, cscores: city_scores, name:'liuchuanchuan',h1:'who are you'}, function(err, html){
// 这里的options是可选的
// 回调函数可以作为第二个参数
console.log(html);
});

var http = require('http');
http.createServer(function (req, res) {

jade.renderFile('./testjade.jade', { citys: city_names, cscores: city_scores, name:'liuchuanchuan', h1:'who are you' }, function(err, html){
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);

});

}).listen(8080, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8080/');

2.3 输出例子

访问http://localhost:8080/,输出结果如下:

<!DOCTYPE html><html><head><title></title><script type="text/javascript">function showCityEx(city)
{
 return city + " & " + city;
}</script></head><body>- i begin at "-" (use |-prefix in jade)<br/>
|- i begin at "|"(use |-prefix in jade)<br/>
//--i begin at "//"(use |-prefix in jade)<br/>
=i begin at "="(use |-prefix in jade)<h1>who are you</h1><div id="container" class="col"><p>You are owner!</p></div><p>    old:4,wuhan_1,tianjin_1,beijing_1,shanghai_1</p><p>    new:5,wuhan_1,tianjin_1,beijing_1,shanghai_1,qingdao</p><p>I had ever goto lots of citys(more than 5).<br/>16 is my dream!<br/>
I had ever goto lots of citys(wuhan_1,tianjin_1,beijing_1,shanghai_1,qingdao,chengdu).
I like to travel!
do you?</p><p>i had go to
</p><p>now length = 6<br/>haha</p><ul><li>wuhan</li><li>tianjin</li><li>beijing</li><li>shanghai</li></ul><p>    this is an example of table.</p><table border="1"><tr><th>hello</th><th>world,citys.count=7</th><th>count</th></tr><tr><td>0</td><td>welcome to wuhan(wuha)</td><td>60</td></tr><tr><td>1</td><td>welcome to tianjin(tian)</td><td>62</td></tr><tr><td>2</td><td>welcome to beijing(beij)</td><td>80</td></tr><tr><td>3</td><td>welcome to shanghai(shan)</td><td>70</td></tr></table><div>    over!</div></body></html>

2.4 用到特性

  评论这张
 
阅读(17933)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018