如何在每個HTML頁面上分別執行jQuery / Ajax加載

Question

請在主體后面添加一些html腳本的HTML頁面。 我的腳本運行正常且成功。 但是，隨着項目的發展，將兩者放在一起會很麻煩。 然后，我將js放入單個文件中。 問題是，現在我引用了所有文件，並且js代碼可用於每個html頁面。

我有檢查每個頁面加載的事件，因為我想在頁面加載時執行或啟動文件。 現在，此頁面在每次加載頁面時都會觸發。 下面的例子

(function() {

    $(this).on('load', function(){
        console.log("the init is");
        var g = true;

        if(g    === false)
            window.location = '/';

        init();
    });


    var init = function(){
        $('#btnAdd').on('click',function(e){
            e.preventDefault();
            e.stopPropagation();
            alert("Butoon click");
        });
    };

})();

在我在上面嵌入類似的代碼之前，它會在我的頁面執行並且我的負載成為我想要的入口點時觸發。 但是現在我將它們移到單獨的html文件中，並引用它們中大多數具有相同或相似功能的文件。 現在，當我訪問非常html的頁面時，無論，都會觸發onload方法，因為它們都是參考，可用於每個頁面。

請以任何方式我可以重構代碼以將每個js文件分離為單獨的html頁面/ URL。 如何參考URL進行jQuery或Ajax加載調用？ 從服務器請求或加載文件時，如何使每個文件觸發？ 任何幫助，將不勝感激

Answer 1

有兩種常見的方法可以在不同的頁面上執行不同的頁面初始化代碼。

1. 您可以將特定於頁面的初始化代碼和支持代碼分解為單獨的腳本文件，並將它們僅包含在需要它們的實際頁面上的<script>標記中。

2. 您可以使用跨多個頁面加載的通用腳本文件，然后在頁面初始化代碼中，可以檢查加載了哪個頁面，然后在代碼中確定適合運行的代碼。

3. 您可以使用一個公共腳本文件，該文件為需要單獨初始化的每個單獨頁面包含一個單獨的函數，但是沒有代碼調用這些函數，然后向該頁面主體中的每個單獨頁面添加一個唯一的初始化函數調用。 這允許瀏覽器對腳本文件進行最有效的緩存，並加載更少的腳本文件（它使您可以組合和最小化大多數腳本）。

對於第二個選項，您可以通過多種不同的方法來檢測Javascript中加載了哪個頁面。

1. 您可以在已知標簽（如body標簽）上檢測類名。
2. 您可以在初始化代碼可以測試的每個頁面中設置唯一的JS變量。
3. 您可以在頁面中查找某些HTML標記的存在，以唯一地指示它是哪種頁面類型。 當您希望特定的初始化函數在所有具有特定公共元素的頁面上運行時，此方法很好用。

這是選項1的示例（在body標簽上檢測類名）。

var m = document.body.className.match(/pageType_([^\s]+)/);
if (m) {
    switch(m[1]) {
        case "home":
            // code here
            break;
        case "category":
            // code here
            break;
        case "product":
            // code here
            break;
        default:
            // code here
            break;
    }
}

這是選項2的示例（在每個頁面中設置唯一的JS變量）：

    <script>
    // somewhere in each unique page
    var pageType = "home";
    </script>

    <script>
    // common script file
    switch(pageType) {
        case "home":
            // code here
            break;
        case "category":
            // code here
            break;
        case "product":
            // code here
            break;
        default:
            // code here
            break;
    }
    </script>

這是一種檢測存在哪個唯一標記並調用適當的初始化函數的方案：

 if (document.getElementById("home")) {
      initHome();
 } else if (document.getElementById("category") {
      initCategory();
 }