正確的方法來統一單獨的js文件與幾個jQuery（文檔）.ready（）事件

我有一個非常大的項目，有幾個外部JavaScript文件，我想統一在一個大的優化服務器負載。正確的方法來統一單獨的js文件與幾個jQuery（文檔）.ready（）事件

問題是，許多這些腳本擁有它們自己的（document）.ready（）事件，它們只針對只在該頁面上可用的元素。

統一一切都會在一個文件中放入很多（不同的）（document）.ready（），並且它們中的大多數都會針對不在頁面上的元素，這是一個問題嗎？

解決這個問題的正確方法是什麼？

編輯：澄清：我的意思是統一數百個JavaScript文件包含在他們自己的標記在一個單一的文件，所以我可以縮小它。

來源

2013-01-09 0plus1

儘管聽起來像我寬恕不關心其他人......但如果他們是外部文件，你優化了哪些服務器負載？ – Khez

@Khez - 我期望這是一個錯字 - 他的意思是頁面加載時間，或者它們在html外部，但仍然在同一個Web服務器上。 – Hogan

http://www.latentmotion.com/separating-jquery-functions-into-external-files-without-selectors/ –

這聽起來像你有一個不同的JavaScript文件包含在每個頁面，你想合併在一起。

如果這就是你想要做的，那麼最簡單的方法就是將所有的javascript連接成一個文件。在同一個文件中有多個準備好的呼叫是很好的。此外jQuery的應該不是錯誤，如果內容不存在網頁上，只要你使用jQuery的方法做事情（例如$('.element').show()將被罰款，但如果元素不存在該網頁上$('.element')[0].style.display = 'block';會出錯。

把他們一起可能會產生意想不到的後果，儘管如果你有東西只適用於特定頁面，處理這種情況的一種方法是在附加特定事件之前檢查你所在的頁面，你可以通過檢查特定元素像

// check if element is present and visible 
if ($('.element').is(':visible')) { 
    // now we are on this specific page so let's do everything 
    // specific to this page here 
}

或

01頁

或者您可以使用ID或其他方式來區分。

您現在可以在JavaScript的底部調用一個$(document).ready(init);調用，並且init函數可以決定需要爲該頁面初始化哪些內容。

希望這會有所幫助！

來源

2013-01-09 04:21:46 Craig

我對這個問題不太清楚（其中一些元素不在頁面上），但jQuery專門設計爲在頁面中有多個$(function() {})（快捷方式用於文檔準備）調用，並讓它們在正確的時間。

來源

2013-01-09 04:12:01 Hogan

我的意思是說，一些文檔就緒函數的目標是僅存在於頁面中的特定元素。這就是爲什麼首先被分開的原因。所以可能會有$（'＃element_that_do_not_exist'）。show（）; – 0plus1

你不需要有多個(document).ready()塊，你應該能夠將所有的代碼保存在一個單獨的(document).ready()塊中。該代碼將只針對與選擇器對應的項目，所以你應該沒問題。

在附註中，您需要確保不會有不同頁面中具有相同id，class或其他屬性的不同對象 - 如果一個JS文件對應所有這些頁面，並且存在多個不同頁面上的元素具有JS選擇器所匹配的屬性，那麼您將有不想要的（如果項目太複雜，難以識別）副作用。

來源

2013-01-09 04:24:16 Chaithanya

我傾向於在我開始使用它們之前添加一個檢查來查看我希望jQuery與之進行交互的元素是否存在。

話雖如此，許多標準的jQuery的東西只是靜靜地失敗，如果它的操作元素不存在，這通常是所需的行爲。有一些插件雖然輸出警告給控制檯，如果他們失敗。在現代瀏覽器中，這不是問題，但是在未安裝調試欄的IE上，會導致完全錯誤，這顯然不是所希望的。

來源

2013-01-09 10:38:54

正確的方法來統一單獨的js文件與幾個jQuery（文檔）.ready（）事件

回答

相關問題