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

Java大拿 2018-04-12 14:08:51 ⋅ 197 阅读


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-jsnode-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实战联盟”公众号并留言(源码名称+邮箱),小萌看到后会联系作者发送到邮箱,也可以加入交流群和作者互撩哦~~~!




全部评论: 0

    我有话说:

    Node实战Express-session解析(八)

    Session和HTTP协议属于不同层面的事物,HTTP属于ISO模型的最高层应用层,前者Session不属于后者,前者HTTP是具体的动态页面技术来实现的,但同时它又是基于后者的。

    Node实战Express路由(三)

    Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。

    Node实战Express中间件与request(四)

    Express 是一个路由和中间件 Web 框架,其自身只具有最低程度的功能:Express 应用程序基本上是一系列中间件函数调用。

    Node实战Express 中间件-body-parser(五)

    body-parser是什么?body-parser是一个HTTP请求体解析中间件,使用这个模块可以解析JS

    Node实战:使用joi来验证数据模型 (十)

    Joi 是 hapijs 自带的数据校验模块,他已经高度封装常用的校验功能,本文就是介绍如何优雅地使用 joi 对数据进行校验......

    Node实战:阶段项目(九)

    项目整体预览 项目的github地址 界面逼格还行-_- 主要功能: 登陆; 退出; 所用的主要模块: express, 路由.静态文件.模块分工等; express-session, 采用

    Node模块之Events模块(五)

    Node模块之Events模块(五)

    Node实战Express 中间件 cookie-parser(六)

    cookieParser()实际上是对http传入的cookie进行解析后赋值给req.cookies,使得中间件可用

    Node.js 实战--微信支付系列(二)

    接上一首先我们看一下整体上微信小程序的开发流程图

    Node模块之fs模块(六)

    屏幕快照 2017-08-08 上午10.53.21.png 第一部分 概述 Node.js 提供一组类似UNIX(POSIX)标准的文件操作API,Node.js中操作文件的模块是fs(File

    Node 模块之 util URL queryString path(八)

    第一部分 util util是一个Node.js核心模块,util模块设计的主要目的是为了满足Node内部API的需求。其中包括:格式化字符串、对象的序列化、实现对象继承等常用方法。要使用util

    Node模块(四)

    模块化分工、各司其职

    Node实战Nodejs 链接 Mariadb 实例

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL

    Beetl 3.2.4.RELEASE,Java 模板引擎 Beetl

    Beetl是一款全功能,高性能优秀的国产模板引擎,可以广泛用于动态页面生成,静态页面生成,代码生成,文本转换,脚本语言和规则引擎等,从2011年来,一直维护,并得到国内公司用户的肯定。 Beetl

    Node.js 实战--微信支付系列(一)

    真正的无知不是知识的贫乏, 而是拒绝获取知识!——波普尔 (哲学家 思想家)鉴于微信支付文档内容详实

    NodeJS 10.5.0 中的线程:实用介绍

    几天前,Node.js版本10.5.0发布,其中包含的主要功能之一是添加了线程支持。

    架构实战(四):Spring Boot整合 Thymeleaf

    Thymeleaf 是一种模板语言。那模板语言或模板引擎是什么?

    Nodejs视频服务器 切片ffmpeg

    Node 视频服务器 切片ffmpeg