如何将JavaScript函数添加到Pug模板中

Question

在Pug模板中添加JavaScript会遇到许多问题，包括：

• PugJS对许多JavaScript函数抛出异常，而这些函数实际上是完全有效的。
• 当你的JavaScript函数存在语法错误时，Pug不会为你识别出来。
• 你不能在Pug模板中的JavaScript函数中设置断点。
• 你不能使用TypeScript来提高鲁棒性。

那么，在Pug中使用JavaScript函数的首选/推荐方式是什么？

- bikeman868

Answer 1

在意识到更好的解决方案之前，我曾经为这些问题苦苦挣扎。我建议将JavaScript函数传递给Pug渲染函数，而不是将它们构建到模板中。

以前我做的是这样的JavaScript：

const render = pug.compileFile(path.join(__dirname, '../templates/sandbox.pug'));
const html = render({});

还有这个 Pug 模板

- var testFunc = function(){
-     return "Test func";
-   }

div #{testFunc()} worked!

更好的实现相同功能的方法是使用以下JavaScript代码。

const render = pug.compileFile(path.join(__dirname, '../templates/sandbox.pug'));
const html = render({
  testFunc: function(){
    return "Test func";
  }
});

还有这个 Pug 模板

div #{testFunc()} worked!

这样可以让你设置断点，使用TypeScript以及所有其他酷炫的东西，避免了与解析JavaScript相关的所有Pug漏洞。

- bikeman868

---

我理解的是，原始的JavaScript代码将在客户端上运行，而“更好的方式”的代码将在服务器上运行。如果代码需要操作DOM，则不太好。 - vicmortelmans

在我的情况下，我是在服务器端运行 Pug 的，但如果您想要的话，您也可以在客户端使用 Pug。 - bikeman868