Question

我想在我的主要布局中加载大部分脚本（即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>

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

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的脚本引用不是最佳做法吗？

非常感谢任何帮助。我非常喜欢这一切。

欢呼声。

Answer 1

抱歉，我们错过了这个，大多数使用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>

Javascript的Mojolicious，布局和定位

1 个答案: