頁面加載完成后加載並運行js代碼（非干擾性）

Question

我想將我的JS代碼與HTML盡可能分開，我可以看到幾種模式。

1）我可以使用

$(document).ready(function() {...}) 

在關閉身體標簽之前

2）我可以像這樣放js代碼

new FormValidationHandler() 

在關閉正文標簽之前的腳本標簽中

3）我可以在腳本標簽中指向包含$（document）ready或new FormValidationHandler之類的初始化的外部js文件

4）還有一種使用自調用功能的方法，但不知道它是否映射到此問題

我的問題是首選哪種方式？

第二個是我可以在兩個地方將外部腳本放入網頁中：

• 在頭標簽中
• 在正文標簽中（通常在末尾）

head應該只包含不必在頁面加載時運行的代碼嗎？ 那么該代碼應該放在正文中嗎？

Answer 1

有我喜歡做的事。 它可能並不完美，但我喜歡這種方式：

HTML文檔中的腳本位置：

每個腳本都在HTML文檔的末尾，即關閉主體之前加載。

有一個例外：處理FOUC的腳本（例如， modernizr ）。 該腳本必須在頭部。 我沒有看到其他合理的例外。

腳本組織：

在我看來，這是兩種情況：如果您使用超文本文檔或Web應用程序（也許這需要更多說明，但可能會很長：p）。 我很少為Web應用程序工作，所以我還沒有一個經過驗證的組織。 但是我認為在Web應用程序中，您可能可以使用一些腳本加載庫，例如requirejs ，它可能比簡單的網頁有用。

對於超文本文檔（大多數網頁），我喜歡區分兩種腳本：庫和我用法語“ script d'interfaçage”（“鏈接腳本”可能是個不錯的翻譯……）。

顧名思義，庫是在javascript環境中加載庫但不執行任何操作的腳本。

鏈接腳本用於將這些庫鏈接到特定的HTML文檔。

對我來說，在一個理想的世界中，應該有與您一樣多的庫腳本，但是每個HTML文檔只有一個鏈接腳本。 在此腳本中，如果您使用的是jQuery，則會找到$（document）.ready調用，並且此腳本的所有內容都應該非常非常簡單。 理想情況下，在文檔准備功能中，應該僅包含以下指令：

$('my selector').MyPlugin({
    option1:'value',
    option2: 'value'
});

這種類型的說明實際上是HTML文檔和JS庫之間的簡單鏈接，並且閱讀和理解非常簡單。

在這個組織之上，您可以進行任何形式的包裝來減少要加載的js文件的數量。 這種包裝必須針對客戶端緩存和限制HTTP請求等進行優化。

外部文件還是內聯腳本？

就個人而言，我更喜歡對所有腳本使用外部文件，但是通常我使用一個內聯腳本標簽來聲明某些庫所需的一些變量（您的廣告服務鍵等）。

加載外部庫

最后一種特定情況：當您必須從另一台主機加載腳本時。 通常，您無法確定該腳本是否可以加載，因為您無法確定另一個服務器是否已啟動，或者它運行的速度是慢還是快...您無法確切知道此腳本是什么會做，所以它可能會破壞您的頁面...

從其他主機加載腳本確實會造成問題，這就是為什么我建議您在頁面完全加載后以盡可能多的控件異步加載它們。

為此，我親自開發了一個專門用於加載庫的庫（也許有一天，有一天我會在gitHub上發布它）。 例如，我使用此腳本來加載Facebook google + ou twitter API或任何其他外部庫，例如統計計數器或廣告服務。