Question

我正在尝试清理我的代码，所以我将所有内容都放在我的

中

<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吗？

Answer 1

一个更好的问题。

最好在HTML中保留指向外部脚本的链接，只需拥有一些<script>代码即可。特别是那些使用CDN的人！

您可以将document.ready()函数移动到外部JS，其中保存了所有其他JS。但有时候，直接在只涉及该页面的页面中直接包含这样的小片段会更容易。

将文件移动到单独的文件时，按正确的顺序包含它们非常重要通常在顶部（<head>）使用Modernizr，jQuery靠近底部（就在</body>之前），然后是插件，然后是自定义脚本。

Answer 2

查看RequireJS，它为您提供了一种非常简单的方式来包含您需要的javascript文件，而不是填充大量<script>标记的页眉/页脚。

Answer 3

在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”。

Answer 4

如果您使用的自定义js不仅仅是一个小函数调用，我将分成一个新的js文件，并在<script>标记中调用它。与css相同。如果您使用jquery更改样式，那么我通常会使用addClass，removeClass和toggleClass来修改我的样式。这样你就不会忘记从css到js文件的样式。

Answer 5

您当然可以将它们移动到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();
});

将jQuery代码与HTML分离

5 个答案: