將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.