头部带有脚本的 Nodejs EJS 部分
Posted
技术标签:
【中文标题】头部带有脚本的 Nodejs EJS 部分【英文标题】：Nodejs EJS partials with scripts in the head 【发布时间】：2012-02-08 04:40:08 【问题描述】：我正在使用 EJS 从 Nodejs 服务器呈现和提供 html 页面。我包含的一些部分在头部引用了脚本和样式表，但这会导致客户端对同一个文件发出多个请求（例如，如果父视图也包含该文件）
例如：
<!-- file: parent.ejs -->
<html>
<head>
<link rel="stylesheet" href="public/mystylesheet.css">
<script src="public/myscript.js">
</head>
<body>
<%- partial("partial.ejs") %>
</body>
</html>
而在局部：
<!-- file: partial.ejs -->
<html>
<head>
<link rel="stylesheet" href="public/mystylesheet.css">
<script src="public/myscript.js">
</head>
<body>
This is an EJS partial!
</body>
</html>
在这种情况下，“mystylesheet.css”被客户端加载了两次（不必要地），“myscript.js”也是如此
是否有一种简单的方法（最好使用 EJS）来确保在部分需要时包含样式表或脚本，但如果父视图已经包含资源则不包含？
【问题讨论】：
作为替代建议，您可以使用 javascript 来检测它，就像 html5 样板文件的人所做的那样（例如）...<script>window.myscript.object || document.write('<script src="public/myscript.js"><\/script>')</script>（假设 myscript.js 写了一个 namespaced object of myscript 到带有object的参数/属性的窗口@
这对脚本来说是个好主意，但是对于样式表来说问题仍然存在（除非你能想到一个可行的扩展方案）
好吧，如果您在同一个页面中多次需要它，它应该保持缓存......但实际上我没有一个好的解决方案，我加星标希望看到好的信息。
【参考方案1】：
我找到了一个很好的解决这个问题的方法，基本上可以归结为使用 EJS 变量来跟踪在呈现 EJS 文档时包含的资源。下面是一个简短的示例，仅适用于脚本标签（但可以轻松扩展到样式表或其他任何内容）
有助于包含资源的部分：
//file: "include.ejs"
<% for (var i in scripts) %> //scripts an arr of js files to (maybe) include
<% if (!resources[scripts[i]]) %>
<script src="<%= scripts[i] %>"></script>
<% resources[scripts[i]] = true %>
<% %>
<% %> <!-- end for -->
还有一个使用这个部分来包含脚本的文件
//file: "somepartial.ejs"
<html>
<head>
<%- partial("include.ejs",
scripts: ["lib/jquery.js", "lib/bootstrap-tabs.js"]
) %>
</head>
<body>
<!-- MY EJS PARTIAL! -->
</body>
</html>
并且在渲染局部时：
response.render('somepartial.ejs',
resources: ,
/* some other variables */
);
这样，您可以确保脚本被部分包含，但除非它已经包含在呈现的 HTML 页面中的某个位置
限制
我遇到了一个限制：如果您使用 AJAX 请求加载页面的一部分，例如
$("#someDiv").load("/another/part/of/the/page.html");
然后，页面的 AJAX 加载部分包含的资源将不会知道已经加载的脚本（除非您在 REST 参数中传递该信息，就像我正在做的那样）：
$("#someDiv").load("/another/part/of/the/page.html?resources=...");
当然，通过这个小修复，加载了 AJAX 调用的页面的任何两个部分都可能请求相同的资源，而且他们无法知道这一点，因为他们只知道父文档有什么已加载（希望有意义）
【讨论】：
以上是关于头部带有脚本的 Nodejs EJS 部分的主要内容，如果未能解决你的问题，请参考以下文章