big*_*kap 5 html resources partials ejs node.js
我正在使用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)来确保在部分需要时包含样式表或脚本,但是如果父视图已经包含了资源则不会？
我找到了一个相当好的解决方案来解决这个问题，基本上可以归结为使用 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 调用加载的页面的任何两个部分都可能请求相同的资源，并且它们无法知道这一点，因为它们只知道父文档已加载的内容（希望这是有道理的）