Nodejs的EJS部分在头部带有脚本



我正在使用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调用加载的页面的任何两个部分都可能请求相同的资源,而且他们无法知道这一点,因为他们只知道父文档加载了什么(希望这有意义)

最新更新