Nodejs头部带脚本的EJS partials [英] Nodejs EJS partials with scripts in the head
问题描述
我正在使用EJS来从Nodejs服务器呈现和服务器HTML页面。我所包含的一些部分在头部引用了脚本和样式表，但是这会导致客户端对同一个文件发出多个请求（例如，如果父视图也包含该文件）
例如：
<！ - file：parent.ejs - >
< html>
< head>
< link rel =stylesheethref =public / mystylesheet.css>
< script src =public / myscript.js>
< / head>
< body>
<％ - partial（partial.ejs）％>
< / body>
< / html>
而在部分：
<！ - file：partial.ejs - >
< html>
< head>
< link rel =stylesheethref =public / mystylesheet.css>
< script src =public / myscript.js>
< / head>
< body>
这是EJS的一部分！
< / body>
< / html>
在这种情况下，mystylesheet.css被客户端加载两次（不必要），所以是myscript.js
是否有一种简单的方法（最好使用EJS）确保在部分需要时包含样式表或脚本，但如果不包含父视图已经包含了资源？
我发现这个问题的一个相当好的解决方案，基本上归结为使用一个EJS变量用于跟踪呈现EJS文档时包含的资源。下面是一个简短的例子，它只适用于脚本标记（但可以很容易地扩展到样式表或其他任何东西）。
一个有助于包含资源的部分：
// file：include.ejs
<％for（var i in scripts）{％> （可能）包含
<％if（！resources [scripts [i]]）{％>
< script src =<％= scripts [i]％>>< / script>
<％资源[scripts [i]] = true％>
<％}％>
<％}％> <！ - 结束 - >
使用此部分的文件包含脚本
//文件：somepartial.ejs
< html>
< head>
<％ - partial（include.ejs，{
scripts：[lib / jquery.js，lib / bootstrap-tabs.js]
}）％> ;
< / head>
< body>
<！ - 我的EJS部分！ - >
< / body>
< / html>
当呈现部分时：
response.render（'somepartial.ejs'，{
resources：{}，
/ *一些其他变量* /
}）;
通过这种方式，您可以确定一个脚本包含在一个部分中，但除非它是已经包含在呈现的HTML页面中的某处
一个限制
我碰到一个限制：If你用一个AJAX请求加载页面的一部分，比如
$（＃someDiv）。load（/ another / part /of/the/page.html）;
然后，包含在页面的AJAX加载部分的资源将不会意识到脚本已加载（除非您在REST参数中传递此信息，例如我在做）：
$（＃someDiv ）.load（ ？/另一个/部分/所述/ page.html中的/资源= {...}）;
当然，使用这个小修补程序，页面的任何两部分都可以通过AJAX调用可能会请求相同的资源，并且他们无法知道，因为他们只知道父文档已加载的内容（希望有意义）。
I'm working with EJS to render and server HTML pages from a Nodejs server. Some of the partials I include have scripts and stylesheets referenced in the head, but this causes the client to make multiple requests for the same file (for example if the parent view also includes that file)
For example:
<!-- file: parent.ejs -->
<html>
<head>
<link rel="stylesheet" href="public/mystylesheet.css">
<script src="public/myscript.js">
</head>
<body>
<%- partial("partial.ejs") %>
</body>
</html>
And in the partial:
<!-- 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>
In this case, "mystylesheet.css" is loaded by the client twice (unnecessarily), and so is "myscript.js"
Is there an easy way (preferably using EJS) to make sure that a stylesheet or script is included when a partial requires it, but not if the parent view already has included the resource?
I found a fairly good solution to this problem, which basically boils down to using an EJS variable to keep track of resources included as the EJS document is rendered. Here's a shortened example below, that only works for script tags (but can easily be extended to stylesheets or anything else)
A partial that helps with the inclusion of resources:
//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 -->
And a file that uses this partial to include scripts
//file: "somepartial.ejs"
<html>
<head>
<%- partial("include.ejs", {
scripts: ["lib/jquery.js", "lib/bootstrap-tabs.js"]
}) %>
</head>
<body>
<!-- MY EJS PARTIAL! -->
</body>
</html>
And when rendering the partial:
response.render('somepartial.ejs', {
resources: {},
/* some other variables */
});
This way, you can be sure that a script is included by a partial, but not unless it was already included somewhere in the rendered HTML page
A limitation
There is one limitation that I came across: If you load part of your page with an AJAX request like
$("#someDiv").load("/another/part/of/the/page.html");
Then the resources included with the AJAX-loaded portion of the page won't be aware of the scripts already loaded (unless you pass that information in a REST argument, like I'm doing):
$("#someDiv").load("/another/part/of/the/page.html?resources={...}");
Of course, with this little fix, any two parts of the page that are loaded with an AJAX call may request the same resource, and there's no way for them to know that since they are only aware of what the parent document has had loaded (hope that makes sense)
这篇关于Nodejs头部带脚本的EJS partials的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
