首先是什么是jade呢,jade是node超高性能的前端模板,有着很强大的API和大量杰出的特性。特性:客户端的支持、代码高可读、灵活的缩进、块的展开、混合、属性改写、模板继承、模板嵌套等等
在jade中,要分清什么是标签,文本和代码。 jade的任何一段文本,都要区分是标签,文本,还是代码。jade以-开头的,都是js代码。jade的格式总体是标签 + 文本,有三种,标签(缩进):随后的缩进是文本,标签=(缩进):随后的缩进都是文本,不必使用。jade的多行文本,每行又可以交叉使用=或者-(有bug)。
在说说jade的优缺点吧,
优点,
1 开发效率方面。手写情况下效率一定比原生HTML更快,这一点不容置疑。
2 可读行方面,在同样缩进良好的情况下,并且开发者同样对HTML和jade语言足够熟悉的情况下,jade的可读行一定更高,因为同样屏幕大小jade可以一次显示两倍行数的代码。并且本身DOM是树状结构,看同时jade的标记方式也与CSS相统一,方便编写和查看。
3 可维护性,HTML的话改个元素需要改两行,三个元素需要删两行,增加一个中间元素还需要复制粘贴或者鼠标拖过来拖过去移动,而且可能搞着搞着缩进就乱了,这些jade从来都不用担心。
缺点:
1 可移植行差
2 调试困难
3 性能没有想象的那么出色
虽然它很强大,但是我们也要正视它的缺点,适合自己再去使用。比较适合一些创业型公司,人手比较少,要求开发速度。
说了这么久,说说怎么用吧
通过npm安装
npm install -g jade
要运行项目的话,用node的express框架(之前有了解过,还写过文章)。创建一个express框架,然后让他运行就OK啦。(默认应该是使用jade模板,如果不是的话手动改一下 app.js 里面的app.set('view engine', 'jade');)
在jade中可以定义js变量,以及不用标签嵌套,标签闭合等等(看上去好像很不符合W3C的标准,但是人家就是这么用的)
body
h2#aa.bb 一个h2标签id是aa,class是bb
#aa.bb 没有写标签的话默认是div
h2 转义 标签后面直接跟里面的内容
p #{js变量} 变量#{}去显示
ul(class='class') 属性的话使用()例如a标签的href
style. 如果有换行的话再标签后面加上.
body{color:#fff}
- var data = 'text' 使用-定义的都是js代码
p #{data}
- var obj = {a:'jade',b:'high'}
- for(var k in obj) 在模板中可以使用for循环
p #k
each item in obj 使用each循环
p= item
if data == 'text' 可以使用 if else
p data是text
else
p data不是text
- var name = 'jade'
case name 使用case关键字
when 'java'
when 'node'
p HI node
when 'jade'
p HI jade
default
p HI
定义模板关键字 mixin
mixin lesson
p he jade
调用使用+lesson
+lesson
模板还可以传参数
mixin study(name,courses)
p #{name}
ul.courses
each courses in courses
li= course
+study('name',['jade','node'])
模板和模板之间也是可以嵌套的
block 关键字定义模块
也可以引入别的文件的模板,通过extends引入别的文件,写入一个路径