使用 Jade 代替 HTML

Jade 与 HTML

SCSS 作为一个 CSS 高效的工具存在,Jade 的角色也是如此,但它是针对 HTML 的。
例如 <div> hello </div> 这段 HTML 代码中,div 首尾出现了两次,一定程度上是冗余的。
Jade 很像 Python (一种编程语言),使用缩进语法来表达结构层次。HTML、Javascript、CSS 这些虽然实际编程中也会保持缩进,但不缩进也工作正常,而 Python 和 Jade 则必须遵循严格的缩进,因为它们代表的结构层次,有实质的意义。

代码示例

FirstWeb.app 中『 Jade 与 SCSS』 index.jade,重写自『开始 HTML』 index.html

HTML 原始内容:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>我是标题, 可以修改</title>
    <link href="/style_in_scss.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div class="cover">
        <div class="container">
            <h1 id="caption">你好,世界 <span class="alt">alt-one</span></h1>
            <h2>我是一个描述 <span class="alt">alt-two</span></h2>
            <div class=links>
                    <a href="/about">关于我</a>  <a href="/blog">博客</a>
            </div>
        </div>
      </div>
</body>
</html>

Jade 重写后的内容 (逻辑会更加清晰,同时,代码量实际上减少了):

html
    head
        title 我是标题, 可以修改
        link(href='/style_in_scss.css', type='text/css', rel='stylesheet')
    body
        .cover: .container
            h1#caption
                span 你好,世界
                span.alt alt-one
            h2
                span 我是一个描述
                span.alt alt-two
            .links
                a(href='/about') 关于我
                a(href='/blog') 博客

Jade 基本语法

Jade 使用缩进(Tab 或 4 个空格)保持结构,还有些其它基本语法,来实现最终的 HTML 结果。

HTML标签、id、class

.class_name this is content
// 默认会创建div标签,最终结果为<div class="class_name">this is content</div>

tag_name.class_1.class_2
// 结果为<tag_name class="class_1 class_2"></tag_name>,也可仅一个 class_1

a.a_class(href="#", title="a link")
// 多属性用`,`隔开,最终结果<a class="a_class" href="#" title="a link"></a>

span#dom_id.class_name_1.class_name_2 my content
// 结果为<span id="dom_id" class="class_name_1 class_name_2">my content</span>

注:

  1. HTML 中一个 DOM 元素的多个属性之间是 空格 分开,而 Jade 是 , 来分隔,这点更像脚本语言 Python 的写法,类似于一个函数的调用。
  2. 文中出现的 HTML标签 也就是 TagName

变量与HTML标签

本段的内容,在后续涉及到动态页面时非常有用,而静态页面(纯 HTML)是没有『变量』可言的。

node post.content  
//等同于<node>post.content</node>

var = post.content
// 等同于 {%set var = post.content %}, 是一个变量的赋值

node= post.content 
// =号左前无空格,则是将变量转为HTML标签,等同于<node>{{ post.content }}</node>

node= "post.content"
// 等同于<node>post.content</node>

为什么会引入 『变量』 的概念?
因为 Jade 是 『模板引擎』,它更倾向于为动态页面服务的,而非纯静态的 HTML。在上文示例代码中,=前后是一个空格还是两个空格、以及还是没有=号,分别代表了不同的意思,通过这些约定,实现不同场景下语法的混合;这些设计的糅合,倒也算得上精巧。

关于 Jade

Jade 是有些年头的项目,后来项目名改为 Pug,且基本上是面向 NodeJS 的。
在 FirstWeb 中,我们特别定制了 Jade 转 HTML 引擎,一般情况下,并不需要特别去翻阅 Jade 原生的文档,就上文提及的一些简单语法掌握即可。

本质上,我们将 Jade 作为一个替代 HTML 的工具,但最终,它转化 (编译) 的结果仍然是 HTML。所以,Jade 只是一个中间态,至于转化的过程倒不那么重要,我们直接拿来用就可以了。

需要注意的问题

1,没有被编译为 HTML 的 Jade 文件,浏览器是不支持的。

2,Jade 的写法,能节省很多时间,特别后续我们涉及到动态页面时,你会发现,Jade 中调用一些变量,也特别简单和高效。

3, FirstWeb 的 Jade 语法是特别定制的,比如:

.cover: .container
    p hello world

按照常见的 Jade 语法,应该要写成:

.cover
    .container
        p hello world

但后者又会产生太多 缩进 的副作用,在 FirstWeb 中,故有 : (英文状态下的) 作为分割符的用法,以减少不必要 (其实就是指看起来很啰嗦) 的换行缩进。