NodeJS 如何将外部.js文件包含到ejs节点模板页面

nc1teljy  于 2022-12-29  发布在  Node.js
关注(0)|答案(4)|浏览(266)

我找不到将外部.js文件包含到Node ejs模板的方法。我想将逻辑和数据放入外部.js文件中的对象,将该文件包含到索引.ejs模板中并从中提取数据。
我试着用标准的方式插入<script src="sample.js"></script>,但是不起作用
然后我尝试了ejs特定的关键字<% include partials/sample.js %>,这只适用于添加partials(ejs代码片段)。
我将.js文件插入到可执行文件server.js中定义的静态目录中,再次没有结果。
但是有趣的是,例如,将css文件包含到ejs模板中的经典方法工作得很好

<link href="/assets/styles.css" rel="stylesheet" type="text/css" />

解决方案是包含外部ejs文件,我可以在其中将逻辑和数据放入〈% %〉标记中,但这显然是一个补丁,而不是一个可行的解决方案,因为ejs不是js文件,而且它不工作。
我在网上找不到任何解决办法.有什么提示吗?
谢啦,谢啦

jvidinwx

jvidinwx1#

"你不能"
注意:您只能将数据从. ejs文件传递到. js文件,而不能以其他方式传递。这不会起作用,因为. ejs在服务器端呈现,而. js在客户端运行。我假设您在服务器端使用EJS
1)可以将ejs变量值传递给Javascript变量

<% var test = 101; %> // variable created by ejs
    <script>
       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers
       console.log(getTest);  // successfully prints 101 on browser
    </script>

2)不能将js变量值传递给ejs变量
是的,您不能:* * 如果它在服务器上。**
原因:
EJS模板将在js开始执行之前呈现在服务器上(它将在浏览器上启动),因此无法返回到服务器并要求对已经发送到浏览器的页面进行一些先前的更改。

p4tfgftt

p4tfgftt2#

Express的解决方法:
myScripts.js

module.export = {
    foo() {},
    bar() {}
}

然后在app.js中

var myScripts = require('/path/to/myScripts');

res.render('template', {
    utils: myScripts
}); // you forgot a ')' here

然后在模板.ejs中

// utils will act in global scope for this file
<%
  utils.foo();
  utils.bar();
%>
hjzp0vay

hjzp0vay3#

我相信你使用它的目的是相反的。在一个控制器中,你可以定义外部脚本和样式,你想包括这样

res.render('page-one', {
        title: 'Page One',
        data: pageData,
        libs: ['page-one', 'utils'],
        styles: ['page-one']
      });

在应用程序的静态资产中,有一个js文件夹和一个css文件夹

|- static/
               |- css/
               |- fonts/
               |- img/
               |- js/
               favicon.ico
            |- templates/

在js文件夹中放置文件page-one.js和utils.js在css文件夹中放置文件page-one.css
在ejs模板中html的head部分

<!-- styles included on all pages -->
    <link rel="stylesheet" href="/css/bootstrap.css">
    <!-- styles specific to individual pages -->
    <% if (typeof styles !== 'undefined') { %>
        <% if (styles.length > 0) { %>
            <% for (let style of styles) { %>
                <link rel="stylesheet" href="/css/<%= style %>.css">
            <% } %>
        <% } %>
    <% } %>

通常,最佳实践是在结束body标记处包含脚本,这样它们就不会在ejs文件中的结束body标记之前阻止页面呈现

<!-- scripts included on all pages -->
<script src='/js/libs/jquery.min.js' type='text/javascript'></script>

<!-- page specific scripts -->
<% if (typeof libs !== 'undefined') { %>
    <% for (let lib of libs) { %>
        <script src='/js/<%= lib %>.js' type='text/javascript'></script>
    <% } %>
<% } %>
</body>

当你的页面呈现时,它会自动呈现脚本和CSS include if块是在你没有在控制器中定义任何include的情况下使用的,在你的Express应用程序中,你定义你的静态和外部脚本include如下所示。

// Define static assets
app.use(express.static('static'));
// included on all pages
app.use('/js/libs', express.static(path.join(process.cwd(), 'node_modules/jquery/dist'), { maxAge: 31557600000 }));

最后,如果您一定要在模板中包含JavaScript(如呈现JSON数据等),请使用特殊的ejs标记〈%- %〉

<% if (jsonData) { %>
<script id="jsonData">var jsonData=<%- JSON.stringify(jsonData) %>;</script>
<% } %>
i1icjdpr

i1icjdpr4#

我能够做到这一点:
1.在节点应用入口文件中提供Js文件夹/文件,如下所示:

app.use(express.static(path.join(__dirname, 'views/js')));

1.在views/js文件夹中的index.js文件中添加了DOM函数。
1.在index.ejs文件的结束body标记之前添加了链接到index.js文件的脚本标记,如下所示:

<script scr="index.js" type="text/javascript"></script>

注意script标签中的src没有"./js/index.js",我真的不知道为什么它会这样工作(外部css样式表也一样)。

相关问题