html - 在没有 Express 模板引擎的情况下向 HTML 添加值？

Question

我接管了一个站点的开发，该站点使用 Express 在 Node 上运行。我应该注意到，这是我第一次使用 Node 或 Express。出于某种原因，原始开发人员一定不喜欢模板引擎，因为他已经完全删除了它们。我们基本上在前端使用 Angular 和 Firebase 来处理所有事情，所以我理解为什么我们不会经常向服务器端的页面注入(inject)数据。不过，能够这样做仍然很好。

原来从来没有安装过模板引擎。相反，他指示 Node 将 views 文件夹视为静态目录。然后，他将这些文件呈现为纯静态文件。例如:

摘自 App.js 文件:

app.use(express.static(path.join(__dirname, 'views')));

路线文件摘录:

router.get("/", function(request, response) {
    response.render("index.html");
});

此时我真的不想添加模板引擎并弄乱路由。尽管我严重怀疑我是否需要经常从服务器端注入(inject)数据，但如果有的话，我想知道我将如何做到这一点。

我唯一能想到的就是这样......

router.get("/", function(request, response) {
    var data = request.query.someVariable;
    var fileContents = fs.readFileSync('../views/index.html', 'utf8')
    fileContents = fileContents.replace("$SomeDelim", data);
    response.send(fileContents);
});

那真的不是那么漂亮。有没有更好的方法可以在不使用模板引擎的情况下做到这一点？

Answer 1

我认为您的问题没有正确答案，但作为 Express/Node(和 Angular)的重度用户，让我谈谈我的看法。

您似乎不想使用模板引擎，因为您的模板几乎是静态的，但又不完全是静态的。后者在 Angular 项目中极为常见，因为 99.9% 的 View 逻辑发生在前端。我同意您有时需要在 Angular 主引导页面或电子邮件模板中引入变量。

您对文件内容进行替换的建议不一定是坏的，但是 fs.readFileSync是。这将阻止您的功能并阻止脚本的执行，等待文件系统。我会用 fs.readFile相反，使用回调函数。这样，当文件系统打开文件时，Node 的事件循环可以继续做其他事情。

我还想指出，对整个文件进行替换会导致 Node 将整个文件加载到内存中(由于替换可能会加载两次)，对于较大的文件应该避免这种情况。然后你会想要逐行进行。我认为这不是您现在真正关心的问题。

我的建议是添加一个简单的模板引擎。为什么？因为它运行良好，因为它有文档记录，因为程序员知道如何使用它，因为它易于实现，因为一些较小的模板引擎完全按照您的建议进行操作。

我个人会推荐 Hogan.js ，这是一个简单的模板引擎，被来自不同语言的程序员所熟知，主要做一些简单的替换，就像你想要的那样。 Hogan 基本上像这样替换变量:<div>{{variable}}</div> .它有一个非常简单的切换“if/else”的方法和一些简单的循环。基本上就这些了。<​​/p>

您可以更改您的 Express 应用以包含以下内容(并且您将删除现有的静态“ View ”声明):

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

使用 Hogan，您的 View 文件将获得 .hjs 文件扩展名。

views/index.hjs

<section>
    <div>{{variable}}</div>
</section>

routes/index.js

route.get(function (req, res) {
    res.render('index', {
        variable: 'example',
    });
});

与您自己的解决方案类型相比，添加此模板引擎没有任何问题，并且不会影响您的性能。

如果您关心性能，请在您的 Node 应用程序前面放置一个像 nginx 这样的反向代理/网络服务器，并让它为所有静态文件提供服务。此外，在主模板路由中设置正确的 http 缓存 header 以避免在 Node 上受到过多攻击。