捆綁腳本中的$（document）.ready（）

Question

我最近在網絡優化方面做了很多工作，我遇到了一個有趣的問題。 我想知道是否有人可能知道現有的解決方案。

假設您有多個特定於頁面的外部.js文件，每個文件都有自己的頁面特定的$(document).ready()函數。 假設第1頁的文檔就緒功能將樣式應用於正文中的每個<li> ，而第2頁中准備好的文檔僅為<input type="button" /> s樣式。 只是一個簡單的例子。

現在假設您將這兩個腳本以及所有庫腳本捆綁在一起，以減少頁面加載時的http請求數。 現在，兩個文件准備就緒了，第2頁的li將使用僅適用於第1頁的代碼進行格式化。

我的問題是 - 有沒有辦法通過jQuery或第三方庫將特定文檔分配到特定頁面但仍然將它們全部捆綁到一個.js文件中？

Answer 1

我認為你可以使用jQuery（document）.ready（） - Wait Until Exists

Answer 2

您應該根據您的頁面捆綁腳本。

讓我們說你的主頁需要jquery和一些自定義腳本。 將它們捆綁在一起並引用此捆綁包。

對於其他頁面（如配置文件頁面），您可以捆綁所需的腳本並引用它

Answer 3

我認為你要實現的目標存在相互沖突的目標：其中一些是常見的，有些是針對單個頁面的。 如果是后者，為什么它在共同模塊中？

話雖如此，我們成功使用的一種方法是將所有常用函數移動到主.js文件中，以及站點范圍內的$(document).ready()內容。

單個頁面可能有localready()函數， $(document).ready()的最后一步是運行它（如果存在）：

/* === common.js === */
$(document).ready(function(){
    // snip
    if (typeof(localready) != 'undefined') {
        localready();
    }
});

在附近的文件中：

</body>
<script>
    function localready() {
        foo();
        bar();
    }
</script>
</html>

因此，如果正在呈現的頁面具有localready（）函數，則會調用它並執行它必須執行的任何操作。 如果沒有，則執行標准ready（），就是這樣。

希望有所幫助。

Answer 4

從體系結構的角度來看，如果代碼塊僅在一個頁面上有意義，為什么不將它與該頁面捆綁在一起？ 我知道將所有HTML放在一個地方並將您的javascript放在另一個地方可能看起來更“井井有條”，但是它真的可以節省您的服務器或加快您的用戶體驗嗎？

當我們減少連接數時會出現捆綁問題，但會增加服務器上的負載，因為我們在組合文件中填充了大量未使用的垃圾。 哪個更好地服務1,000個1k文件或100個100k文件。 如果你有100個頁面，每個頁面都有一個獨特的document.ready那么你只為用戶訪問一個頁面時添加了大量數據。 如果用戶很可能使用某些捆綁內容，那么這種捆綁的好處實際上才有用。 例如Google.com，它們會預先緩存結果頁面中所需的實體，因為您在AT google.com的事實意味着您可以非常高度確定地進行搜索。 它不預先緩存的Gmail，或雖然Google文檔。

Answer 5

您始終可以從“應用程序角度”處理頁面加載。

例如，創建一個“導航器對象”，在用戶想要導航到頁面時設置常量：

const navigateTo = (page) => {
    let pageName = '?';
    switch (page) {
        case 'login.html':
            pageName = 'Login';
            break;
        case 'index.html':
            pageName = 'Home';
            break;
        default:
            console.log("Unknown page: " + page);
    }
    location.href = page;
    return pageName;
}

將“document.ready”腳本轉換為函數，例如Login page ready函數：

$(function() {
   console.log( "Login page ready!" );
});

變為：

const loginReady = () {
    console.log( "Login page ready!" );
}

然后，每當用戶更改頁面時，通過單擊鏈接或導航欄項，運行如下函數：

const runReadyScripts = (page) => {
   switch (page) {
      case 'Login':
        loginReady();
        break;
      case 'Home':
        homeReady();
        break;
      default:
        console.log("Unknown page: " + page);
   }
};

Answer 6

我猜一個簡單的if可以解決這個問題：

$(document).ready(function(){
    if(location.href == page1) {
        ...
    }
});

$(document).ready(function(){
    if(location.href == page2) {
        ...
    }
});

---

編輯

如果您不想觸摸代碼，您希望不包括每頁上的.js文件。 這甚至更好，因為您不會在他不會使用的代碼上浪費客戶端資源。

實現這一點的一個例子是創建某種服務器代碼將所有文件粘合在一起，而不是手動完成。 一個PHP示例：

<script type="text/javascript" src="<?php echo Glue::javascript($array_of_files); ?>"></script>

您可以根據需要將其擴展為“粘合”css或其他類型的文件。 此外，您甚至可以包含代碼來縮小它們。 當然，該函數會緩存這些文件，因此不必每次都“粘合”它。

Answer 7

通過“捆綁”你的意思是縫合 ？

我自己看到並部分實現的一個策略是，應用程序在構造視圖時通知視圖構建器所有必需的CSS / JS; 在您的示例中，正在構建第一頁時，它將讓視圖構建器知道它需要特定的JS文件。

當頁面准備好提供時，頭部只引用一個JS和一個CSS文件，它們是縫合文件。

我已經看到它只是動態完成，例如<link rel="stylesheet" href="/style.css?pageOne&specialFooter&member" />或使用緩存引擎，例如<link rel="stylesheet" href="995093293da7f03f9b631e8d3ec4efc7.css" /> （這實際上是第一次請求樣式表組合時生成的文件，現在是直接的CSS [不再動態]）