5

NodejsサーバーからHTMLページをレンダリングおよびサーバーするためにEJSを使用しています。私が含めた一部のパーシャルには、head で参照されているスクリプトとスタイルシートがありますが、これにより、クライアントは同じファイルに対して複数の要求を行うことになります (たとえば、親ビューにもそのファイルが含まれている場合)。

例えば：

<!-- 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」はクライアントによって (不必要に) 2 回読み込まれ、「myscript.js」も読み込まれます。

親ビューにすでにリソースが含まれている場合ではなく、部分的に必要なときにスタイルシートまたはスクリプトが含まれていることを確認する簡単な方法 (できれば EJS を使用) はありますか?

4

1 に答える 1

2

この問題に対するかなり良い解決策を見つけました。基本的には、EJS 変数を使用して、EJS ドキュメントがレンダリングされるときに含まれるリソースを追跡することです。以下は、script タグでのみ機能する短縮された例です (ただし、スタイルシートなどに簡単に拡張できます)。

リソースを含めるのに役立つパーシャル:

//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 ページのどこかに既に含まれていない限り、そうではありません。

制限

私が遭遇した制限が 1 つあります。ページの一部を次のような AJAX リクエストでロードすると、

$("#someDiv").load("/another/part/of/the/page.html");

次に、ページの AJAX が読み込まれた部分に含まれるリソースは、既に読み込まれているスクリプトを認識しません (私が行っているように、REST 引数でその情報を渡さない限り)。

$("#someDiv").load("/another/part/of/the/page.html?resources={...}");

もちろん、この小さな修正により、AJAX 呼び出しでロードされたページの 2 つの部分が同じリソースを要求する可能性がありますが、親ドキュメントがロードしたものしか認識していないため (意味があることを願っています）

于 2012-01-18T05:52:49.137 に答える