Jade/Pug学习（一）之特性、安装

前言

流行的模板

• PHP:Smarty SimpleTemplate Xtemplate Savant

• Java:Velocity FreeMarker Jbyte

• C#:Dotiquid SharpDom Razor

• Javascript:Mustache Handlebars Juicer Xtemplate EJS Jade

Jade

jade是超高性能的nodejs模板引擎，有着非常强大的API和大量杰出的特性。它主要针对node的服务端。

jade-破坏式、侵入式、强依赖（和普通的html和css无法共存）文件以.jade结尾

特性

客户端支持、代码高可读、灵活的缩进、块展开、混合、静态包含、属性改写、安全，默认代码是转义的(代码经过编译处理，以增强安全性)、运行时和编译时上下文错误报告、命令行编译jade模板（命令行编译支持）、html 5 模式 (使用 !!! 5 文档类型)、在内存中缓存(可选)、合并动态和静态标签类、可以通过 filters（过滤器） 修改树、模板继承、原生支持 Express JS、通过 each 枚举对象、数组甚至是不能枚举的对象、块注释、没有前缀的标签、AST filters、Vim Syntax、TextMate Bundle、Screencasts、html2jade 转换器、过滤器

过滤器

• :sass 必须已经安装sass.js

• :less 必须已经安装less.js

• :markdown 必须已经安装markdown-js 或者node-discount

• :cdata

• :coffeescript 必须已经安装coffee-script

jade中，分清什么是静态的，什么是动态的？

静态的原封不动的表现在html中，动态的会转换表现。

js代码会执行，js表达式会取值，标签会转换，文本直接输出

标签后是文本，文本可以单行和多行，文本中可嵌入jade表达式；使用#{}，里面是后台js表达式，“-”开头的，随后是后台js代码，几个特定的jade关键词，例如循环控制等，随后的都是后台表达式

html标签紧跟着=，后面的是js表达式

安装jade

通过npm来安装

作为包依赖在node中使用安装在本地

npm install jade

作为工具执行命令使用安装在全局

npm install jade -g

缺点

• 可移植性差

• 调试困难

• 性能不是非常出色