限制

Question

我正在使用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）以确保在部分需要时包含样式表或脚本，但如果父视图已包含资源则不会？

Answer 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部分

1 个答案:

限制