2

我想在我的主要布局（即jquery）中加载我的大部分脚本。现在根据我的理解，将脚本放置在我的 html 页面底部是最佳实践。

但是，如果我们像这样将脚本放在布局页面的底部。

layout/default.html.ep

<!doctype html>

<html>
<head><title><%= title %></title></head>
<body><%=content %></body>
</html>
<script src="js/jquery.min.js" type="text/javascript"></script>

然后在一个页面中使用这个布局，该页面有自己的依赖于 jquery 的 javascript，就像这样。

testscript.html.ep
%layout 'default';
%title 'Script Test';

<p>Main Page</p>

<script type="text/javascript">
$(document).ready(function(){
alert('fails if jquery is not loaded');  
});
</script>

您最终会得到这样的页面。请注意，对 jquery 的引用低于我依赖它的代码。

<!doctype html>

<html>
<head><title>Script Test</title></head>
<body>
<p>Main Page</p>

<script type="text/javascript">
$(document).ready(function(){
alert('fails if jquery is not loaded');
});
</script>
<script src="js/jquery.min.js" type="text/javascript"></script>
</body>
</html>

处理这种情况的最佳方法是什么？

将我的 javascript 引用放在布局的顶部？我认为在使用此布局的每个页面中添加 jquery 的脚本引用不是最佳做法？

任何帮助深表感谢。我对这一切都非常陌生。

干杯。

4

1 回答 1

5

抱歉，我们错过了这个，大多数使用 Mojolicious 的人都遵循 Perl 标签。

要回答您的问题，请使用content_for帮助程序将物品放置在您想要的位置。请注意，这也允许您将导入放在依赖模板的顶部，或者如果您愿意，也可以放在底部！我有一个下面的例子。我还建议为所有页面需要的标准 JS 导入使用单独的模板，但这只是为了清楚起见。

#!/usr/bin/env perl

use Mojolicious::Lite;

any '/' => 'testscript';

app->start;

__DATA__

@@ layouts/default.html.ep

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    %= content
    %= include 'common_js'
    %= content_for 'js_imports'
  </body>
</html>

@@ common_js.html.ep
<script src="js/jquery.min.js" type="text/javascript"></script>

@@ testscript.html.ep
%layout 'default';
%title 'Script Test';

% content_for 'js_imports' => begin
  %= javascript begin
    $(document).ready(function(){
      alert('fails if jquery is not loaded');  
    });
  % end
% end

<p>Main Page</p>

当您访问 '/' 路线时，这会产生

<!DOCTYPE html>
<html>
  <head>
    <title>Script Test</title>
  </head>
  <body>


<p>Main Page</p>

    <script src="js/jquery.min.js" type="text/javascript"></script>

      <script>//<![CDATA[

    $(document).ready(function(){
      alert('fails if jquery is not loaded');  
    });

//]]></script>
  </body>
</html>
于 2013-03-27T20:41:37.917 回答