一個或多個$（document）.ready

Question

我有一堆js片段，每一個都在單獨的.js文件中。 gulp被設置爲將它們全部連接到一個all.js。建議採用以下哪種方法？

• 讓每個JS代碼片段在單獨$(document).ready：

  //all.js 
  
  $(document).ready(function(){ 
      foo... 
  }) 
  
      $(document).ready(function(){ 
      bar... 
  }) 
  

• 讓所有片斷在一個$(document).ready：

  //all.js 
  
      $(document).ready(function(){ 
      foo... 
      bar... 
  }) 
  

Answer 1

它實際上只是一個編碼便利或事項個人風格偏好。要麼工作得很好，而要一致地工作。與$(document).ready()註冊

回調函數被調用在他們註冊，以便連順序將是相同的任何一種方式的順序。

這兩種方法之間的性能差異可能非常小，您無法測量它與其他事情相比，因爲它只是使用兩個單獨的.ready()調用的幾個額外級別的函數調用。如果能夠衡量差異，我會感到驚訝，如果這種差異確實相關，我會感到更驚訝。更可能的是，您應該使用其他代碼結構原因來決定要走哪條路。

如果你想調用兩個功能都方便地在同一個文件，那麼這將導致更緊湊代碼：

$(document).ready(function(){ 
    foo(...) 
    bar(...) 
}); 

---

如果這兩個功能都單獨維護和/或在不同的文件，那麼這將更加方便地滿足您的代碼佈局，讓你保持相互獨立的模塊獨立：

// one place in your code 
$(document).ready(function(){ 
    foo(...) 
}); 

// somewhere else in your code 
$(document).ready(function(){ 
    bar(...) 
}); 

在特定情況下，你是指多個FIL es連接在一起。這意味着你可以使用任何一種格式。如果這些多個文件都是模塊，可能不會全部一起使用，那麼您可能希望每個文件「獨立存在」。如果是這種情況，那麼使用第二個模型，因爲這些文件彼此獨立，任何給定的文件都可以被自己使用。如果不存在這樣的依賴關係，則不會在兩個文件之間創建依賴關係。

另一方面，如果兩個文件已經相互依賴，並且兩個文件必須在任何項目中一起使用，那麼嘗試保持任何獨立性沒有任何優勢，因此您可以使用任何一種風格。

記住，最佳代碼重用或共享在今後的項目，測試的獨立性和最簡單的維護，這是有益的，使單獨的文件/模塊儘可能的獨立。

Answer 2

語義上這兩種方法是相同的。但是，有幾點需要注意。

• 使用多個回調函數時會添加一個較小的性能損失，但幾乎在所有情況下都應該忽略，除非增加了非常多的單獨回調函數。
• 雖然在當前實現中，順序是通過註冊順序來定義的，但回調執行的順序可能在將來會有所不同，因爲在大多數此類框架中，處理程序的執行通常沒有確定性地定義，因此它有點不安全依靠當前的實施。手動構建代碼以確保執行的順序是正確的總是更好。當然，當你所有的處理程序在功能上都是獨立的，那麼這根本就不是問題。