模板引擎pug几种编译渲染方法

选项

filename: string
  要编译的代码的文件名。用于异常信息以及(使用相对路径的)包含(include)和扩展(extends)操作。默认值是 'Pug'。
basedir: string
  模板里所有绝对定位的根目录。
filters: object
  存放自定义过滤器的哈希表。默认为 undefined。self: boolean
  是否使用一个叫做 self 的命名空间来存放局部变量。这可以加速编译的过程,但是,相对于原来书写比如 variable 来访问局部变量,您将需要改为 self.variable 来访问它们。默认为 false。
debug: boolean
  当设置为 true 时,编译产生的函数代码会被记录到标准输出。
compileDebug: boolean
  当设置为 true 时,源代码会被包含在编译出来的模板函数中,用于提供更详实的错误信息(这在开发时会有用)。它默认是启用的,除非是在 Express 的生产环境模式中。
globals: Array<string>
  该数组用于向模板中添加全局对象的名字,编译器将保证它们不被局部作用域影响。
cache: boolean
  当设置为 true 时,编译出来的函数会被缓存下来。此时必须填写 filename 选项作为缓存的索引字段。该选项仅用于 render 函数。默认为 false。
inlineRuntimeFunctions: boolean
  相对于使用 require 来获得公用的运行时函数,是否需要直接嵌入这些运行时函数。在 compileClient 函数里默认是 true,因此就不需要再手动包含那些函数(从而让其能在浏览器上运行)。在其他的 compile / render 系列函数中,默认是 false。
name: string
  模板函数的名称。仅用于 compileClient 函数。默认值是 'template'。

方法

Pug 的渲染操作一般来说是相当简单的。 pug.compile()会把 Pug 代码编译成一个 JavaScript 函数,并且这个函数有一个参数可用于传入数据(局部变量,locals),调用这个编译出来的函数,并且传入数据,这时返回的就是用您提供的数据渲染的 HTML 字符串了。
Pug 也提供了 pug.render() 系列的函数,它们把编译和渲染两个步骤合二为一。当然,在每次执行 render的时候,这样一个模板函数都需要被重新编译一遍,这会在一定程度上影响性能。但同时,可以在执行 render 的时候配合使用 cache选项,它将会把编译出来的函数自动存储到内部缓存中。

pug.compile(source, ?options)把一个 Pug 模板编译成一个可多次使用、可传入不同局部变量渲染的函数。
source: string 需要编译的 Pug 代码
options: ?options 存放选项的对象
returns: function 一个可以从包含局部变量的对象渲染生成出 HTML 的函数

var pug = require('pug');

// Compile a function
var fn = pug.compile('string of pug', options);

// Render the function
var html = fn(locals);
// => '<string>of pug</string>'

pug.compileFile(path, ?options)从文件中读取一个 Pug 模板,并编译成一个可多次使用、可传入不同局部变量渲染的函数。
path: string 需要编译的 Pug 代码文件的位置
options: ?options 存放选项的对象
returns: function 一个可以从包含局部变量的对象渲染生成出 HTML 的函数

var pug = require('pug');

// 编译出一个函数
var fn = pug.compileFile('到 Pug 代码文件的路径', options);

// 渲染它
var html = fn(locals);
// => '从 Pug 生成的 HTML 代码'

pug.compileClient(source, ?options)把一个 Pug 模板编译成一份 JavaScript 代码字符串,它可以直接用在浏览器上而不需要 Pug 的运行时库。
source: string 需要编译的 Pug 代码
options: ?options 存放选项的对象
returns: string 一份 JavaScript 代码字符串

var pug = require('pug');

// 编译出一个函数
var fn = pug.compileClient('string of pug', options);

// 渲染它
var html = fn(locals);
// => 'function template(locals) { return "从 Pug 生成的 HTML 代码"; }'

pug.compileClientWithDependenciesTracked(source, ?options)与 compileClient 相似,但这个函数返回的是这样一个结构:

{
  'body': 'function (locals) {...}',
  'dependencies': ['filename.pug']
}

您应该在需要 dependencies 来实现一些诸如“监视 Pug 文件变动”的功能的时候,才使用该函数。

pug.compileFileClient(path, ?options) 从文件中读取一个 Pug 模板并编译成一份 JavaScript 代码字符串,它可以直接用在浏览器上而不需要 Pug 的运行时库。
path: string 需要编译的 Pug 代码文件的位置
options: ?options 存放选项的对象
options.name: string 如果您传递了 .name 属性给选项对象,那么编译出来的函数名称就会被换成这个属性指定的名称。
returns: string一份 JavaScript 代码字符串
首先,写下我们的模板……

h1 这是一个 Pug 模板
h2 作者:#{author}

然后将 Pug 编译为函数代码字符串。

var fs = require('fs');
var pug = require('pug');

// 将模板编译为一个函数的代码字符串
var jsFunctionString = pug.compileFileClient('/path/to/pugFile.pug', {name: "fancyTemplateFun"});

// 或许您还想要把模板编译到一个叫做 templates.js 的文件里,让浏览器直接使用。
fs.writeFileSync("templates.js", jsFunctionString);

您获得的输出的结果可能类似下面的内容(即被写入 templates.js 中的代码):

function fancyTemplateFun(locals) {
  var buf = [];
  var pug_mixins = {};
  var pug_interp;

  var locals_for_with = (locals || {});

  (function (author) {
    buf.push("<h1>这是一个 Pug 模板</h1><h2>作者:"
      + (pug.escape((pug_interp = author) == null ? '' : pug_interp))
      + "</h2>");
  }.call(this, "author" in locals_for_with ?
    locals_for_with.author : typeof author !== "undefined" ?
      author : undefined)
  );

  return buf.join("");
}

请确保您已经把 Pug 的运行时库(node_modules/pug/runtime.js)传给了浏览器,从而让浏览器能够顺利执行您刚才编译出来的函数。

<!DOCTYPE html>
<html>
  <head>
    <script src="/runtime.js"></script>
    <script src="/templates.js"></script>
  </head>

  <body>
    <h1>这是一个神奇的模板。</h1>

    <script type="text/javascript">
      var html = window.fancyTemplateFun({author: "enlore"});
      var div = document.createElement("div");
      div.innerHTML = html;
      document.body.appendChild(div);
    </script>
  </body>
</html>

pug.render(source, ?options, ?callback)
source: string 需要渲染的 Pug 代码
options: ?options 存放选项的对象,同时也直接用作局部变量的对象
callback: ?function Node.js 风格的回调函数,用于接收渲染结果。注意:这个回调是同步执行的。
returns: string 渲染出来的 HTML 字符串

var pug = require('pug');

var html = pug.render('string of pug', options);
// => '<string>of pug</string>'

pug.renderFile(path, ?options, ?callback)
path: string 需要渲染的 Pug 代码文件的位置
options: ?options 存放选项的对象,同时也直接用作局部变量的对象
callback: ?function Node.js 风格的回调函数,用于接收渲染结果。注意:这个回调是同步执行的。
returns: string 渲染出来的 HTML 字符串

var pug = require('pug');

var html = pug.renderFile('path/to/file.pug', options);
// ...
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容