将jQuery代码与HTML分离
[英]Separating jQuery code from HTML
问题描述
I'm trying to clean up my code so I'm putting all the stuff in my 
我正在尝试清理我的代码，所以我把所有东西都放在我的代码中
<style></style>
In a CSS file. 在CSS文件中。 And I'm trying to do the same for my jQuery. 我正在尝试为我的jQuery做同样的事情。 So I created a Custom.js file. 所以我创建了一个Custom.js文件。 But do things like: 但做的事情如下：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Stay in html file or can I move them the Custom.js file? 留在html文件中还是可以将它们移动到Custom.js文件中？ Also, I'm using a jQuery plugin called uscrollbar so I have this piece of code in my html file: 另外，我正在使用一个名为uscrollbar的jQuery插件，所以我在我的html文件中有这段代码：
<script>
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});
</script>
Can I also move that to Custom.js? 我还可以将它移到Custom.js吗？
5 个解决方案
解决方案1
2 已采纳 2012-10-01 02:50:53
A much better question. 一个更好的问题。
It's best to keep links to external scripts in your HTML, it's perfectly fine to have a few <script> tags. 最好保留HTML中外部脚本的链接，只需要一些<script>标签就可以了。 Especially ones using a CDN! 特别是使用CDN的人！
You can move your document.ready() function to external JS, where all of your other JS is kept. 您可以将document.ready()函数移动到外部JS，其中保存了所有其他JS。 But sometimes it's easier to include small snippets like that directly in pages where it concerns only that page. 但有时候直接在仅关注该页面的页面中直接包含这样的小片段会更容易。
When moving things to separate files, it's important to include them in the right order. 将内容移动到单独的文件时，按正确的顺序包含它们非常重要。
Usually something like Modernizr at the top ( <head> ), with jQuery near the bottom (just before </body> ), followed by your plugins, followed by your custom scripts. 通常顶部的Modernizr（ <head> ），jQuery靠近底部（就在</body>之前），然后是插件，然后是自定义脚本。
解决方案2
1 2012-10-01 02:52:42
查看RequireJS ，它为您提供了一种超级简单的方法来包含您需要的javascript文件，而不是填充大量<script>标签的页眉/页脚。
解决方案3
0 2012-10-01 02:51:58
Keep your references to Javascript files (local or remote) in your HTML code. 在HTML代码中保留对Javascript文件（本地或远程）的引用。 Place them at the bottom of the page before the closing body tag if they do not need to be ready until the DOM is ready. 如果在DOM准备好之前它们不需要准备好，请将它们放在关闭正文标记之前的页面底部。 For instance, your jQuery reference should almost always be in your 'head' section because any references to jQuery while the HTML loads need to be defined even though functions that aren't called until after document is ready do not need to be defined. 例如，你的jQuery引用应该几乎总是在你的“head”部分，因为在HTML加载时需要定义任何对jQuery的引用，即使在文档准备好之后才调用的函数也不需要定义。 Many other supporting files like 'jquery.easing' for instance, can go at the bottom which improves page load times. 许多其他支持文件，例如'jquery.easing'，可以放在底部，这样可以缩短页面加载时间。
You can move the uscrollbar() call to a .js file, but I would recommend putting all of your "ready" commands in one function, and then in your HTML simply call that function on ready. 您可以将uscrollbar（）调用移动到.js文件，但我建议将所有“准备好”命令放在一个函数中，然后在HTML中直接调用该函数。 IE: IE：
<script type="text/javascript">
jQuery(document).ready(function() {
fn_LoadFunctionName_Thats_InYour_Custom_js_files();
});
</script>
Don't forget to include type="text/javascript" in your script tags. 不要忘记在脚本标记中包含type =“text / javascript”。
解决方案4
0 2012-10-01 02:51:59
If you're using custom js that's more than just one little function call, I'd separate into a new js file and just call that in your <script> tag. 如果您使用的自定义js不仅仅是一个小函数调用，我将分成一个新的js文件，并在<script>标记中调用它。 Same with css. 与css相同。 If you're changing styles with your jquery, then usually I use addClass , removeClass , and toggleClass to modify my styles. 如果您使用jquery更改样式，那么通常我使用addClass ， removeClass和toggleClass来修改我的样式。 That way you don't lose track of your styling from css to js files. 这样你就不会忘记从css到js文件的样式。
解决方案5
0 2012-10-01 02:52:24
You can certainly move them to Custom.js file. 您当然可以将它们移动到Custom.js文件。 Just make sure you have included the file in your html file as you've included the jQuery library. 只需确保已将该文件包含在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>
Just make sure the path for Custom.js is correct. 只需确保Custom.js的路径是正确的。 Also, you don't put script tag in the js file. 另外，您不要将脚本标记放在js文件中。 So the Custom.js would be: 所以Custom.js将是：
$(document).ready(function(e) {
$('#scroll_form').uscrollbar();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.