Nodejs头部脚本的EJS partials

我正在使用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)确保部分需要时包含样式表或脚本,但是如果父视图已经包含了资源,则不能使用样式表或脚本?

       

网上收集的解决方案 "Nodejs头部脚本的EJS partials"

我发现这个问题的一个相当好的解决scheme,基本归结为使用一个EJSvariables来跟踪包含在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调用来请求相同的资源,并且他们不知道这是因为他们只知道父文档已经加载了什么希望是有道理的)