jQuery代碼放置建議

我知道這聽起來像一個愚蠢的問題，但正如我通過示例學習jQuery，我發現腳本和函數的位置從示例到示例有很大不同。例如，我讀過的一個地方是.onReady函數應該放在其他所有位置下面，以確保整個DOM實際上已準備就緒，並且具有這種性質。jQuery代碼放置建議

問題是，除了腳本標記之外，還有一個最佳實踐，那就是PHP文件jQuery應該在哪裏？那麼一次性內聯腳本呢？對不起，這種天真的性質，但我想要以「正確」的方式嘗試這些例子，因爲我弄清楚如何將它們結合在一起。

這個網站似乎有一些非常有見地的人貢獻，所以預先感謝任何指導！ :)

當然，它並不像我想的那樣愚蠢 - 謝謝大家的見解 - 我更清楚地瞭解我在大圖中想要理解的內容。

來源

2012-05-24 Al Knight

這是一個特別有趣的問題，因爲像ASP.Net MVC這樣的框架將頁面構建爲一系列組件（又名視圖）傾向於保持HTML片段和在同一視圖中作用於這些片段的腳本，導致導致JavaScript分散在最後一頁。如果這種方法存在問題，我以前想過。 –

我和你在一起......曾在我的職業生涯中使用過數十種不同的語言/框架，並且在不知道每個人的工作原理的裸露方面，我也在思考這個問題，當我晚上開車回家時，大聲笑。 – GDP

適用於軟語言的+1 – Rab

據我所知，沒有.onReady

也許你是指$(document).ready()？

.ready()的要點是等待元素準備就緒。在這種情況下，文件。因此，只有在文檔準備好之後，纔會執行任何操作。因此，你可以把它放在任何你想要的地方。

至於然而，當你鏈接到JS文件，你想這樣做，在文檔的底部由於性能原因：

http://developer.yahoo.com/performance/rules.html

來源

2012-05-24 17:00:53

也許它是說明顯而易見的，但萬一你需要把你的'$（ document）.ready（）''在你加載jQuery之後，所以'anywhere'並不嚴格對待。 – jeroen

DA，將接受你的答案，因爲它回答我最廣泛的關注，而不僅僅是解決.ready方面。非常感謝您的洞察力和聯繫。 –

只需清楚一點，'.ready（）'只能在'document'上調用，它不適用於普通元素，只會觸發一次。 –

在結束您的頁面的<body>標記之前，您應該包含您的<script type="text/javascript"></script>。這將確保您在上面的頁面的所有靜態部分將被加載。

來源

2012-05-24 17:00:23 Vishal

在有關框架如何構成組件頁面的問題中查看我的評論。你爲什麼說「應該」。如果你不這樣做會破壞什麼？ –

由於性能的原因，您應該將它放在那裏 - 但是對於jQuery，由於沒有等待dom的靜態部分加載，因此無需將其放在那裏。（換句話說，是的，把它放在關閉BODY標籤之前，但由於其他原因） –

而且，有選擇可以將代碼綁定到由瀏覽器觸發的某些事件，如.load，.ready等。 – Vishal

不知道PHP，但指令將每個onReady代碼放在底部 「以確保整個DOM實際上已準備好」是錯誤的！

準備好的事件的關鍵在於你可以將它放在任何你想要的地方，它仍然可以工作。

例子：

$('#foo').val() // undefined - the DOM isn't ready yet. 

$(document).ready(function(){ 
    $('#foo').val() // bla - the DOM is ready now. 
}); 
<input id="foo" value="bla" />

Live DEMO

注意$(callbackFunction)等於冗長的語法$(document).ready(callbackFunction);

你應該閱讀ready docs

來源

2012-05-24 17:01:08 gdoron

我不會說指令本身是錯誤的。推理是肯定的錯誤。 – kapa

@bažmegakapa。採取的點。我編輯了一下。 – gdoron

指令準備好讓你把你的javascript代碼everyw這裏。只有在文檔準備就緒時纔會執行。

的語法如下：

$(document).ready(function() { 
    // Put your code here. 
});

或這一個：

$(function() { 
// Put your code here. 
});

但要做出選擇，喜歡你的頁面的底部，剛剛閉幕< /身體前>出於性能原因。

來源

2012-05-24 17:04:49

jQuery代碼放置建議

回答

相關問題