###Jade 模板引擎
最近在学习NodeJS相关的知识,因此接触了Jade模板,对其中的语法和思想总结如下。
从实际意义上来说,Jade是为了提高前端开发人员的效率而产生的。Jade中,空格、换行、缩进都是有意义的,由这些决定了标签和内容的嵌套关系。
典型地,在HTML中,开始标签+内容+结束标签的模式,被改造成开始标签+空格+内容的模式,如:
HTML
<span class="abc">span content</span>
Jade
span.abc span content
其中,.abc
和span
中间的空格不能省略,省略则无法进行解析。
嵌套关系则由缩进决定,如:
HTML
<div><p>content</p></div>
Jade
div
p
content
或
div
p content
类和ID则直接跟在标签后面,如:
div.aClass.bClass.#idOfDiv
注释支持单行//
进行注释。还有更多语法上的说明,可以在使用时参考此处。
作为模板语言,Jade支持文件的包含include
和扩展extends
的,分别说明:include
比较符合正常思维,什么地方缺某部分包含进来即可;extend
则使用先给出整体,再替换局部的模式。
include
的例子:
//- index.jade
doctype html
html
include ./layout/header.jade
body
h1 include demo
p content
include ./layout/footer.jade
extends
的例子
//- layout.jade
doctype html
html
head
block title
title Default Title
body
block content
//- index.jade
extends ./layout/layout.jade
//- 进行替换
block title
title New Title
block content
h1 extends demo
p content
个人觉得include
比较符合人的习惯,extends
则更适合进行模板化的开发。
最近在学很多东西,Git、NodeJS、express、gulp、Jade,陆续都要写一些文章进行记录,供自己日后进行查阅。
楼主搞grunt么?
赶脚grunt还是没办法绕过去的。。。
@kingapple grunt 看了一些,感觉gulp用起来比较简单
@szhousun 不准备学grunt了?
div div div div div
到时候你再看看jade
@kingapple 学还是要学的
@tulayang 这种情况不多吧,也不符合语义化标签,你是想说这个缩进恶心还是什么问题?没太理解
你没写过功能多的组件,就不会多,你去扒开苹果、谷歌、facebook看看这情况多不多
@tulayang 甩个链接看下?
这还要找链接么,这些网站随便点个页面进去,firebug看下html
@tulayang 那你甩个吧,而且你还没说这种情况有什么问题
@szhousun 知道grunt init么?怎么把所有模板一次都下载过来?
感觉和z-coding类似
@kingapple 第一眼看成楼主搞gay吗?罪过罪过