如何在 Jade 模板引擎中正确输出变量？答案

【问题标题】：How to correctly output variables in Jade templating engine?如何在 Jade 模板引擎中正确输出变量？
【发布时间】：2014-04-01 05:34:05
【问题描述】：

我使用的是a(href="#{settings.url}") 之类的链接，但有人告诉我可以使用a(href=settings.url)，这是一个更好的解决方案（尽管我不明白其中的区别）。

但现在我对另一个用例有疑问。我应该使用哪一个，如果有的话？为什么？

link(rel="stylesheet", href="#{settings.url}/assets/css/main.css")
link(rel="stylesheet", href=settings.url + "/assets/css/main.css")

【问题讨论】：

我认为这是一个偏好问题。

标签： node.js variables pug template-engine

【解决方案1】：

我会说没有很重要的区别，但让我们来看看幕后：

第一个例子：

link(rel="stylesheet", href="#{locals.url}/assets/css/main.css")

有数据

{ url: 'www.example.com' }

生成此代码

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    buf.push('<link rel="stylesheet"' + jade.attr("href", "" + locals.url + "/assets/css/main.css", true, false) + "/>");
    return buf.join("");
}

还有这个 HTML

<link rel="stylesheet" href="www.example.com/assets/css/main.css"/>

其次：

link(rel="stylesheet", href=locals.url + "/assets/css/main.css")

将（使用与上述相同的数据）产生

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    buf.push('<link rel="stylesheet"' + jade.attr("href", locals.url + "/assets/css/main.css", true, false) + "/>");
    return buf.join("");
}

并生成 HTML（惊喜！）：

<link rel="stylesheet" href="www.example.com/assets/css/main.css"/>

经验教训：
您会看到两种“方法”的差异是微不足道的（请参阅第一个示例中的"" +）。因此，使用您最喜欢的任何东西。

【讨论】：

所以第二个更优化了，尽管这并不重要，因为差异几乎没有。感谢您的深入研究！