编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

Node实战篇:Express--jade模板引擎(七)

wxchong 2024-10-22 17:55:18 开源技术 12 ℃ 0 评论

Jade(Pug) — Node Template Engine，一个高性能的模板引擎，为 Node 而做，用 JavaScript 实现。

Node.js 的 Express.js 框架默认用的就是 Jade(更名为Pug)。

第一部分 背景

随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。

为了使用户界面与业务数据分离，就产生了『模板引擎』这个概念。模板引擎有很多, 比较有名的有jade（express默认）、ejs、hbs（ghost默认）、doT、swig等等。『模板引擎』:

1. 模板是什么？模板就是一个模子。供你套数据，并且依据不同数据去走不同的逻辑。
2. 引擎是什么？引擎就是个处理器（编译、运行），最后输出个结果（HTML代码）的东西。

第二部分 安装配置

2.1 安装:

npm install pug-cli -g
jade --helpUsage: jade [options] [dir|file ...]
 Options:
 -h, --help output usage information / 输出使用信息
 -V, --version output the version number / 输出版本号信息
 -O, --obj <str> javascript options object / 传输到 jade 文件中的数据对象
 -o, --out <dir> output the compiled html to <dir> / 输出编译后的 HTML 到 <dir>
 -p, --path <path> filename used to resolve includes / 在处理 stdio 时，查找包含文件时的查找路径
 -P, --pretty compile pretty html output / 格式化编译 html 文件
 -c, --client compile function for client-side runtime.js / 编译浏览器端可用的 runtime.js
 -n, --name <str> The name of the compiled template (requires --client) / 编译模板的名字
 -D, --no-debug compile without debugging (smaller functions) / 关闭编译的调试选项(函数会更小)
 -w, --watch watch files for changes and automatically re-render / 监听文件改变并自动刷新编译结果
 --name-after-file Name the template after the last section of the file path (requires --client and overriden by --name)
 --doctype <str> Specify the doctype on the command line (useful if it is not specified by the template) / 在命令行中指定文档类型(如果在模板中没有被指定)
 Examples: # 编译整个目录
 $ jade templates # 生成 {foo,bar}.html
 $ jade {foo,bar}.jade # 在标准IO下使用jade
 $ jade < my.jade > my.html # 在标准IO下使用jade
 $ echo 'h1 Jade!' | jade # foo, bar 目录渲染到 /tmp
 $ jade foo bar --out /tmp

2.2 实例 编写与运行

第一步: 打开sublime 创建studyJade.jade 保存到桌面上

doctype html
html
 head
 title jade
 body
 p studyjade
 div hello jade

第二步: 打开终端执行 $ jade studyJade.jade -P(大写P: 格式化编译 html 文件), 然后桌面上会出现对应的 studyJade.html文件;

<!DOCTYPE html><html>
 <head>
 <title>jade</title>
 </head>
 <body>
 <p>studyjade</p>
 <div>hello jade</div>
 </body></html>

如此反复即可达到预期效果, 但是, 如果有热跟新该多好, 面包和牛奶都会有的 !热更新

第一步: 同上第一步;

第二步: 终端$ jade index.jade -P -w, 终端会显示

$ jade /Users/51testing/Desktop/studyJade.jade -P -w
 watching /Users/51testing/Desktop/studyJade.jade
 rendered /Users/51testing/Desktop/studyJade.html

第三步: 将桌面上的两个文件(.html/.jade)拖进sublime, 使用快捷键option+command+2双屏幕展示,一侧更改并<common+s保存>,另一侧就可看到及时效果, 因为jade语法对于空格非常敏感.

第三部分 语法及使用

3.1 语法

（1）标签、属性、注释

（2）读取数据的值（转义、非转义）

3.2 逻辑

（1）条件语句（if、unless、case）

（2）循环（each、for）

(3) 过滤器

 :sass 需要安装 sass.js
 :less 需要安装 less.js
 :markdown 需要安装 markdown-js 或 node-discount
 :cdata
 :coffeescript 需要安装 coffee-script

3.3 继承和包含

（1）模板继承

（2）包含

在父模板中，用关键字“block”定义可在子模板中替换的块，每个“block”有一个名字，在子模板中，同样用关键字“block”跟上该名字定义需在该“block”中填充的内容。

Jade支持多重继承，即子模板也可以是其它模板的父模板。

3.4 jade 官网给的实例

API

var jade = require('jade'); 
// compile 编译var fn = jade.compile('string of jade', options);var html = fn(locals); 
// render 渲染var html = jade.render('string of jade', merge(options, locals)); 
// renderFile 渲染文件
var html = jade.renderFile('filename.jade', merge(options, locals));

关注我们

如果需要源码可以关注“IT实战联盟”并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~！

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2