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 に答える