Javascript的Mojolicious，布局和定位 [英] Mojolicious, Layouts and Positioning of Javascript
问题描述
我想在我的主要布局中加载大部分脚本（即jquery）。根据我的理解，最好将脚本放在我的html页面的底部。
I want to load most of my scripts in my main layout ( i.e jquery). Now from my understanding it is best practice to position scripts at the bottom of my html page.
但是如果我们把脚本放在布局页面的底部就好了。
However if we put the script at the bottom of the layout page like so.
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。 / p>
And then use this layout in a page that has its own javascript that relies on jquery like so.
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的引用低于我的代码依赖于它。
You end up with a page like this. Notice that the reference to jquery is BELOW my code that relies on it.
<!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>
处理这种情况的最佳方法是什么？
What is the best way to deal with this situation?
将我的javascript引用放在我的布局顶部？我假设在使用此布局的每个页面中添加jquery的脚本引用不是最佳做法吗？
Put my javascript references at the top of my layouts? I assume it's not best practice to add the script reference for jquery in every page that uses this layout?
非常感谢任何帮助。我非常喜欢这一切。
Any help is much appreciated. I'm very much a new comer to all of this.
欢呼。
推荐答案
对不起，我们错过了这个，大多数使用Mojolicious的人都遵循Perl标签。
Sorry we missed this one, most of the people who use Mojolicious follow the Perl tag.
要回答你的问题，请使用 content_for 帮助者能够把东西放在你想要的地方。
请注意，这也允许您将导入放在依赖模板的顶部，如果您愿意，也可以放在底部！
我有一个例子如下。
我还建议为所有页面需要的标准JS导入单独模板，但这只是为了清晰起见。
To answer your question, use the content_for helper to be able to place things where you want them.
Note that this also lets you put the imports at the top of your dependent template, or the bottom if you prefer!
I have an example below.
I would also recommend a separate template for standard JS imports that all pages need, though this is just for clarity.
#!/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>
当您访问'/'路线时，会产生
When you visit the '/' route, this produces
<!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，布局和定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
