Jade笔记

最新推荐文章于 2017-12-12 23:15:27 发布
最新推荐文章于 2017-12-12 23:15:27 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： web前端 文章标签： html 模板引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fighting_no1/article/details/78704515
版权

这只是我的Jade笔记，完整的Jade教程请参考Jade 官方的英文文档和https://www.w3cplus.com/html/how-to-use-jade.html

简介

Jade是编写HTML模板的简洁语言，简称模板引擎，其实就是 HTML 预处理语言，非常类似 Sass 之于 CSS。其特点如下：

  • 生成HTML
  • 支持动态代码
  • 支持可重用性（DRY）
  • 采用对缩进敏感的语法形式，提高了可读性，省略了一些界定符号（大括号、尖括号……）

安装

通过npm：npm install jade -g

查看版本：jade -v

编译

通过gulp-jade编译：

var gulp= require('gulp');
var jade= require('gulp-jade');

gulp.task("jade",function(){
  gulp.src("./jade/*.jade")
    .pipe(jade({
      pretty:true
    }))
    .pipe(gulp.dest("html/"))
})

gulp.task("default",["watch"],function(){
  gulp.watch("jade/*.jade",["jade"]);
})

标签

标签是 HTML 的核心元素。默认情况下，文本在行的开头（或者仅在空格之后）代表一个html标记。缩进标签嵌套，创建像html结构的树。

一般用法

在 Jade 中创建一个列表：

ul
  li Item A
  li Item B
  li Item C

生成的 HTML：

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

就是这么简单，再也不用顾虑标签闭合了吗、shift 键在哪啊，全程无压力高速输出！唯一需要记住的就是用统一的缩进来嵌套标签。

提示：如果环境已经正确安装，那么大多数情况下的错误都是缩进惹的祸，一定一定要保持一致的缩进格式，建议统一将 tab 键输出为空格，并采用 4 个空格作为标准缩进。

内联语法

为了节省空间，jade提供嵌套标签的内联语法。

a: img
<a><img/></a>

自闭合标签

标签如img，meta，link等都是自动关闭（除非您使用XML文档类型）。jade能自动识别自闭合标签，input会编译成<input/>。您也可以通过简单地附加/字符来明确地自行关闭标签。只有在你知道你在做什么的时候才这样做。

foo/
foo(bar='baz')/
<foo/>
<foo bar="baz"/>

标签中有大段的块内容

方式一：在标签后面添加 .

比如一段js代码，注意是script后面有一个.

script.
    console.log('Welcome to join wandoujia-fe')
    console.log('We want you')
<script>
    console.log('Welcome to join wandoujia-fe')
    console.log('We want you')
</script>

方式二：每段前面添加|

script
    | console.log('Welcome to join wandoujia-fe')
    | console.log('We want you')

注释

Jade 支持两种注释：单行注释和多行注释。每种注释支持两种模式：输出到源文件和不输出到源文件。

在 Jade 中创建一个单行输出注释和单行不输出注释：

// 这个单行注释会输出到编译后的文件中
p 单行输出注释
//- 这个单行注释不会输出到编译后的文件中
p 单行不输出注释

<!-- 这个单行注释会输出到编译后的文件中-->
<p>单行输出注释</p>
<p>单行不输出注释</p>

由上可见，输出和不输出的差别就在于多了一个 -，谨记！

相比起单行注释，多行注释的内容要在注释符号的下一行，以相同的缩进来编写。多行注释的输出和不输出模式和单行注释相同，需要使用 - 标记：

//
    这个多行注释会输出到编译后的文件中
    这个多行注释会输出到编译后的文件中
p 多行输出注释
//-
    这个多行注释不会输出到编译后的文件中
    这个多行注释不会输出到编译后的文件中
p 多行不输出注释

<!--
这个多行注释会输出到编译后的文件中
这个多行注释会输出到编译后的文件中
-->
<p>多行输出注释</p>
<p>多行不输出注释</p>

Jade没有任何特别的条件注释语法。如果你的行以<开始，那么它被视为纯文本。所以只需使用普通的HTML syle条件注释：

<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

doctype

添加一个doctype只需要doctype，然后再跟一个可选的值，默认是html

doctype html

会转换为：

<!DOCTYPE html>

属性

一般用法

在 Jade 中填写属性，基本上和 HTML 保持了一致：

input(type='checkbox', checked)
input(
  type='checkbox'
  name='agreement'
  checked
)
<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>

注意：布尔属性没有值时默认为true。

但是，你见过可以根据条件设置属性的语法形式吗？这里就有：

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
<body class="authed"></body>
<a href="/">Home</a><a href="/about" class="active">

类名和ID名

对于频繁使用到的类名和 ID 名，Jade 提供了两种字面量：类名字面量和 ID 字面量——非常类似 Emmet 的用法。如果不在字面量前边指定标签名，则默认使用 div:

.link
a.link
#button
a#button
<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>

1个id和多个class，连着写即可：

a#download-btn.btn.blue-btn
<a id="download-btn" class="btn blue-btn"></a>

也可以通过一个类名称的数组来实现：

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- 也可以重复类属性来合并数组
a.bing(class=classes class=['bing'])
<a class="foo bar baz"></a>
<a class="bing foo bar baz bing"></a>

style

style 属性可以是一个字符串（像任何正常属性），但它也可以是一个对象。为了更方便地修改该属性，Jade 接收一个类似 JavaScript 对象类型的参数：

a(style={color: 'red', background: 'green'})
<a style="color:red;background:green"></a>

&attributes

为了更方便地添加其他自定义属性，jade 特意增加了一个语法格式 &attributes：

- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)
<div id="foo" data-bar="foo" data-foo="bar"></div>

注意：应用的属性&attributes不会自动转义。您必须确保对任何用户输入进行sanatize以避免 跨站点脚本。如果你的attributes是从一个mixin调用中传入的，这个就完成了。

非转义属性

默认情况下，所有属性都被转义（用转义序列替换特殊字符）以防止诸如跨站点脚本攻击。如果你需要使用特殊字符，你可以使用!=而不是=。

div （escaped = "<code>" ）
div （unescaped != "<code>" ）
<div  escaped = "&lt;code&gt;" > </ DIV>
<div  unescaped = "<code>" > </ div>

注意：未转换的缓冲代码可能是危险的。您必须确保对任何用户输入进行sanatize以避免 跨站点脚本

文本

Jade 支持三种文本输出方式：单行文本、管道文本和多行文本：

// 单行文本内容直接跟在标签名后面
p 这里是单行文本内容
// 管道文本使用管道符
p
    | 这是一行管道文本，行数无限制
    | 这是一行管道文本，行数无限制
    | 这是一行管道文本，行数无限制
    | ……
// 多行文本需要在标签名后添加点号
p.
    这是多行文本，注意缩进
    这是多行文本，注意缩进
    这是多行文本，注意缩进
<!-- 单行文本内容直接跟在标签名后面-->
<p>这里是单行文本内容</p>
<!-- 管道文本使用管道符-->
<p>
  这是一行管道文本，行数无限制
  这是一行管道文本，行数无限制
  这是一行管道文本，行数无限制
  ……
</p>
<!-- 多行文本需要在标签名后添加点号-->
<p>
  这是多行文本，注意缩进
  这是多行文本，注意缩进
  这是多行文本，注意缩进
</p>

代码嵌入

将 JavaScript 嵌入到 Jade 中，一共有三种方法。第一种方式是使用 -，代码中的特殊字符不会被转义：

- for (var x = 0; x < 3; x++)
  li <a></a>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>

第二种方法是使用 =，代码中的特殊字符将会被转义：

p
  = 'This code is <escaped>!'
<p>This code is &lt;escaped&gt;!</p>

第三种方法是使用 !=，代码中的特殊字符不会被转义：

p
  != 'This code is <escaped>!'
<p>This code is <escaped>!</p>

插值语法

使用插值语法，预先指定一个位置，方便以后插入一个新值，简称插值。

Jade 提供了字符串插值和标签插值。其中，字符串插值由于要考虑到安全性问题，所以又分成了转义和不转义两种情况：

// 转义字符串插值 `#{}`
- var theGreat = "<span>escape!</span>";
p This will be safe: #{theGreat}
// 不转义字符串插值 `!{}`
- var theGreat = "<span>escape!</span>";
p This will be safe: !{theGreat}
// 标签插值
p #[a(href="jade-lang.com") Jade]
<!-- 转义字符串插值 `#{}`-->
<p>This will be safe: &lt;span&gt;escape!&lt;/span&gt;</p>
<!-- 不转义字符串插值 `!{}`-->
<p>This will be safe: <span>escape!</span></p>
<!-- 标签插值-->
<p><a href="jade-lang.com">Jade</a></p>

如果要输出 #{},那就得使用/来转义

- var name = 'yaochun'
p my name is \#{name}
<p>my name is #{name}</p>

条件语句

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2 Description
    p.description= user.description
  else if authorised
    h2 Description
    p.description.
      User has no description,
      why not add one...
  else
    h1 Description
    p.description User has no description
<div id="user">
  <h2>Description</h2>
  <p class="description">foo bar baz</p>
</div>

除了if ... else if ... else这个经典的条件判断语句外，Jade 还提供了一个 unless 条件语句。如果说 if 可以通过判断给定条件是否符合要求来执行下一步，那么 unless 完全是相反的一件事，它会判断给定条件是否不符合要求，如果不符合，就执行下一步。

- var con = false
unless con
  p Hello, World
<p>Hello, World</p>

分支语句

当需要 if 判断的条件过多时，其他语言会提供类似 switch 的分支判断语句。在 Jade 中，也提供了类似的语法——case：

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends
<p>you have 10 friends</p>

在 Jade 中并没有提供类似 break 的语法，对于所有的条件默认只有一种输出结果，如果没有符合条件的就输出 defualt 中的内容。但是，有一个特例：

- var friends = 0
case friends
  when 0
  when 1
  default
    p you have #{friends} friends
<p>you have very 0 friends</p>

从上面的示例可以看出，当没有可输出内容时，就会执行向下查找可执行语句，一直查找到 default。

也可以使用块扩展：

- var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends
<p>you have a friend</p>

遍历语句

Jade 使用 each 对数组和对象遍历，用法与 JavaScript 大同小异。

// 遍历数组
ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val

// 遍历对象
ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val
<!-- 遍历数组-->
<ul>
  <li>0: zero</li>
  <li>1: one</li>
  <li>2: two</li>
</ul>
<!-- 遍历对象-->
<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>

循环语句

Jade 使用 while 实现循环，用法与 JavaScript 相似：

- var n = 0
ul
  while n < 4
    li= n++
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

mixins

在 Scss 和 Jade 中，混合宏（mixins）都是举足轻重的语法。混合宏具有复用、解耦、可读、可扩。可维护等等优势。创建混合宏需要使用 mixin 标识符，创建混合宏实例时，需要使用 + 标识符：

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list
+list
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

上面是最基本的混合宏，此时它还不具有诸多优势，除非我们给它传递参数，才能让它具有非凡活力：

mixin pet(name)
  li.pet= name
ul
  +pet('cat')
  +pet('dog')
  +pet('pig')
<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

此外，还可以使用 ... 标识符表示不定数量的参数：

mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item

+list('my-list', 1, 2, 3, 4)
<ul id="my-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

有时候，我们需要替换混合宏的某个部分，那么就可以使用 block 标识符来占位：

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

这种可替代语法，进一步提高了 Jade 的灵活性。

最后，我们谈谈有关属性的混合宏：

mixin link(href, name)
  a(href=href)&attributes(attributes)= name

+link('/foo', 'foo')(class="btn")
<a href="/foo" class="btn">foo</a>

上面混合宏中并没有声明 attributes，是因为 Jade 已经隐式为其引用了所有传递给 &attributes 的参数。

includes

实现高度复用的另一种方式就是将代码片段保存到不同文件中，然后在需要的地方导入这些片段，为此，Jade 提供了 include 指令，下面是一个 index 页面：

//- index.jade
doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

head 代码片段：

//- includes/head.jade
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

footer 代码片段：

//- includes/foot.jade
#footer
  p Copyright (c) foobar

生成的 HTML：

<!doctype html>
<html>
  <head>
    <title>My Site</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

继承

Jade 中使用 extends 来继承代码片段，与 include 本本分分地引用代码段不同，继承可以修改代码片段。

首先，在 layout 页面使用 block 标识符，设置一个可修改的代码片段，紧跟 block 标识符之后的是该代码片段的名字：

//- layout.jade
doctype html
html
  head
    block title
      title Default title
  body
    block content

然后，在 index 页面继承 layout，并可以根据代码片段的名字修改相关代码：

//- index.jade
extends ./layout.jade

block title
  title Article Title

block content
  h1 My Article

生成的 HTML：

<!doctype html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article</h1>
  </body>
</html>

上述这种继承方式，会抹除原来代码片段的部分，如果想要追加代码片段，可以使用 append 和 prepend 指令。append 用于在原有代码片段之后追加，prepend 用于在原有代码片段之前追加。一个初始页面：

//- layout.jade
html
  head
    title Layout
  body
    block content
      p Hello

使用 append ：

extend layout

block append content
    p World

生成的 HTML：

<html>
  <head>
    <script src="/vendor/jquery.js"></script>
    <script src="/vendor/caustic.js"></script>
  </head>
  <body>
    <p>Hello</p>
    <p>World</p>
  </body>
</html>

使用 prepend：

extend layout

block prepend content
    p World

生成的 HTML：

<html>
  <head>
    <script src="/vendor/jquery.js"></script>
    <script src="/vendor/caustic.js"></script>
  </head>
  <body>
    <p>World</p>
    <p>Hello</p>
  </body>
</html>
Fighting_No1
关注
专栏目录
JADE学习笔记1：JADE简介与配置
Sep_Jade的博客
10-13 1万+
JADE学习笔记1：JADE简介与配置## JADE（Java Agent Development Framework）是一套软件开发框架，目的在于开发多Agent 系统以及遵循FIPA 标准的智能agent 应用程序。 Agent本质上时一类特殊的软件构件，这种构件是自主的，它提供与任意系统的接口，类似人类行为，按照自己的规划为一些客户端提供应用服务。
jade 学习笔记
Johnson的专栏
08-12 3145
特别注意: 缩进要么用空格,要么用tab,不能同时用两种 子元素和父元素要有缩进 标签和文本之间要有空格doctype html html head title this is title bodysection div p ul strong hr br加classh1.className1.className2h1#idNameh1.classN
JADE学习笔记
Try
04-28 294
最近用JADE去模拟一个基于gossip的分布式系统，为了实验师兄设计的p2p管理协议。规模大概在1000个Agent左右，其实每台server跑个2000个也不成问题，但花了不少开销在同步和中心管理上，最终每台server只跑了500个。 用了之后，感觉JADE确实比较强大，我只用了其中很少一部分东西。 下面是我的一些理解和应用: 1、每个JADE平台可以容纳不同的容器(我用的...
JADE学习笔记(1)
Try
11-11 253
由于XX的课题是关于分布式的成员关系管理协议的实现，老大让调研JADE，在这个平台上实现。 JADE (Java Agent Development Framework)是一个完全由Java语言开发的一个软件框架，并且符合FIPA规范。是一个中间件，其主要作用是 It simplifies the implementation of multi-agent systems through ...
Jade学习笔记
09-10 141
　　初学nodejs，折腾过用handlebars做模板，后来隔了一段重新学习，用了jade，真心简洁……记录一些学习笔记，以备复习。 　　jade是基于缩进的，所以tab与space不能混用； 　　属性的设置：link(rel='stylesheet', href='/stylesheets/style.css'); 　　变量的定义：- var users = ["Sally",...
java jade 笔记
03-31
JADE是多agent开发框架，遵循fipa规范，他提供了基本的命名服务，黄业服务，通讯机制等，可以有效地与其它java开发平台和技术集成。 JADE架构适应性很强，不仅可以在受限资源环境中运行，而且与其他复杂架构集成到...
JADE 笔记！！！！
08-14
JADE（Java Agent Development Framework）是一个开源的多代理系统（MAS）开发框架，它遵循FIPA（Foundation for Intelligent Physical Agents）标准，旨在简化创建和部署智能代理应用程序的过程。JADE提供了一个...
模板引擎——Jade学习笔记
highboys的博客
12-12 1336
目录 一、Jade基础语法知识 1、文档声明和头尾标签 2、实现命令行实时编译 3、标签语法 4、属性文本和值 5、混合的成段文本和标签 6、注释与条件注释 7、变量声明和数据传递 8、安全转义与非转义 9、流程代码之遍历—— for in、each、while 10、流程代码之条件判断—— if else、unless、case when 11、神奇的mixins 二、
JADE中文教程及笔记
01-07
JADE(Java Agent Development Framework)是基于Java 语言的Agent开发框架， 是由TILAB 开发的开放源代码的自由软件。 它包括一个Agent 赖以生存的运行环境，开发Agent应用的类库和用来调试和配置的一套图形化的工具...
JADE中文教程及笔记 ，详细介绍了JADE的安装配置，重要类的用法，并包含具体例子代码
09-12
JADE 学习笔记 ，详细介绍了JADE的安装配置，重要类的用法，并包含具体例子代码
JADE教程大全
01-24
软件，jadeXRD分析，Jade5.0都是自动安装的，这不成问题。要把PDF卡片引入，先将ICDD的光盘插入，然后pdf/setup/select all/,其它按提示进行。
jade初学者教程分析
08-18
jade软件的入门文件，从这个ppt中可以快速上手jade软件
jade软件 下载
07-12
JADE，XRD， 非常好用，传上来供大家下载 ，具体安装步骤都有
jade学习笔记一
sand200031的专栏
03-13 1300
 jade的资料很少，网上几乎找不到，希望用jade的同志跟我联系，共同学习。qq：18166115导师布置的第一个任务：jade安装，跑实例。（一周时间）         jade（Java Agent DEvelopment framework）是基于java语言的开发agent的工作框架。也可以说是用java开发的一个开发agent的软件；或者说是用于开发符合FIPA规范的多agen
JADE学习笔记之三：行为
不见神僧的专栏
08-26 2334
 一个agent的行为表示它能够执行的任务，通过继承jade.core.behaviours.Behaviour来实现。然后在agent类中通过addBehaviour（）方法将行为加入进来。当一个agent启动（通过setup（）方法）后，行为可以在任何时间加入进来。要定义Behaviour必须实现其action（）方法，它定义了agent的执行时的实际动作，而done（）方法指名了一个
Jade模板
胡桃夹子
05-03 438
Express框架里内嵌了Jade模板引擎。正好项目里也要用到，本篇整理了下Jade的相关用法。1.安装与执行 2.标签和属性 3.多行文本 4.变量 5.语句 6.Mixin 7.模板 8.注释 9.过滤器安装与执行安装很简单： npm install jade –global 安装后本地随便新建一个sample.jade文件，执行： jade sample.jade
jade 入门教程
weixin_30398227的博客
11-18 1600
基于JADE平台的Agent开发 由于课程的需要，最近要搞一个基于代理的程序设计例子。其实这中设计方法早就提出，但是网上提供的框架很少，主要是：jade（Java Agent DEvelopment framework）是基于java语言的开发agent的工作框架。还有一个葡萄城做的一个GrapeCity.AgentFramework，它主要的开发语言是C#，但是这个框架的文档不全（可能我自己找...
JADE多agent开发框架详解及Windows环境下配置指南
"JADE中文教程及笔记" JADE（Java Agent Development Framework）是一个开源的多agent系统（MAS）开发框架，它遵循国际多agent系统标准化组织FIPA（Foundation for Intelligent Physical Agents）制定的一系列规范...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值