Nodejs EJS partials со скриптами в голове - PullRequest
Новая
       12

Nodejs EJS partials со скриптами в голове

5 голосов
/ 11 января 2012

Я работаю с EJS для рендеринга и сервера HTML-страниц с сервера Nodejs.У некоторых из включенных мною частей есть скрипты и таблицы стилей, на которые есть ссылки в заголовке, но это заставляет клиента делать несколько запросов на один и тот же файл (например, если родительское представление также включает этот файл)

Например: 

<!-- 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), чтобы убедиться, что таблица стилей или скрипт включены, когда частичное требование этого требует, но не если родительское представление уже включило ресурс?

1 Ответ

2 голосов
/ 18 января 2012

Я нашел довольно хорошее решение этой проблемы, которое в основном сводится к использованию переменной 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, могут запрашивать один и тот же ресурс, и у них нет возможности узнать это, поскольку они знают только о том, что имеет родительский документ. загружен (надеюсь, что это имеет смысл)

...