将jQuery代码与HTML分离
[英]Separating jQuery code from HTML
问题描述
我正在尝试清理我的代码，所以我把所有东西都放在我的代码中
<style></style>
在CSS文件中。 我正在尝试为我的jQuery做同样的事情。 所以我创建了一个Custom.js文件。 但做的事情如下：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
留在html文件中还是可以将它们移动到Custom.js文件中？ 另外，我正在使用一个名为uscrollbar的jQuery插件，所以我在我的html文件中有这段代码：
<script>
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});
</script>
我还可以将它移到Custom.js吗？
5 个解决方案
解决方案1
2 已采纳 2012-10-01 02:50:53
一个更好的问题。
最好保留HTML中外部脚本的链接，只需要一些<script>标签就可以了。 特别是使用CDN的人！
您可以将document.ready()函数移动到外部JS，其中保存了所有其他JS。 但有时候直接在仅关注该页面的页面中直接包含这样的小片段会更容易。
将内容移动到单独的文件时，按正确的顺序包含它们非常重要。
通常顶部的Modernizr（ <head> ），jQuery靠近底部（就在</body>之前），然后是插件，然后是自定义脚本。
解决方案2
1 2012-10-01 02:52:42
查看RequireJS ，它为您提供了一种超级简单的方法来包含您需要的javascript文件，而不是填充大量<script>标签的页眉/页脚。
解决方案3
0 2012-10-01 02:51:58
在HTML代码中保留对Javascript文件（本地或远程）的引用。 如果在DOM准备好之前它们不需要准备好，请将它们放在关闭正文标记之前的页面底部。 例如，你的jQuery引用应该几乎总是在你的“head”部分，因为在HTML加载时需要定义任何对jQuery的引用，即使在文档准备好之后才调用的函数也不需要定义。 许多其他支持文件，例如'jquery.easing'，可以放在底部，这样可以缩短页面加载时间。
您可以将uscrollbar（）调用移动到.js文件，但我建议将所有“准备好”命令放在一个函数中，然后在HTML中直接调用该函数。 IE：
<script type="text/javascript">
jQuery(document).ready(function() {
fn_LoadFunctionName_Thats_InYour_Custom_js_files();
});
</script>
不要忘记在脚本标记中包含type =“text / javascript”。
解决方案4
0 2012-10-01 02:51:59
如果您使用的自定义js不仅仅是一个小函数调用，我将分成一个新的js文件，并在<script>标记中调用它。 与css相同。 如果您使用jquery更改样式，那么通常我使用addClass ， removeClass和toggleClass来修改我的样式。 这样你就不会忘记从css到js文件的样式。
解决方案5
0 2012-10-01 02:52:24
您当然可以将它们移动到Custom.js文件。 只需确保已将该文件包含在html文件中，因为您已包含jQuery库。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="Custom.js"></script>
只需确保Custom.js的路径是正确的。 另外，您不要将脚本标记放在js文件中。 所以Custom.js将是：
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});
将HTML元素分成适当间距的列（JQuery和CSS）
[英]Separating HTML elements into columns with proper spacing (JQuery and CSS)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.