Javascript 如何分别在每个html页面上执行jQuery/Ajax加载

请我有几个html页面，我包括一些js脚本后的正文。我的剧本很好，很成功。然而，随着项目的发展，将两者结合在一起会变得一团糟。然后，我将js放入一个单独的文件中。问题是，现在我引用了所有文件，每个html页面都可以使用js代码

我有检查每个页面加载的事件，因为我想在页面加载时执行或启动文件。现在，此页面在每次加载页面时都会加载fire。下面的例子

(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加载调用？当服务器请求或加载每个文件各自的html/url时，如何使其激发？任何帮助都将不胜感激

在不同页面上执行不同页面初始化代码有两种常见方法

您可以将特定于页面的初始化代码和支持代码拆分为单独的脚本文件，并仅将它们包含在实际页面上需要它们的

标记中

您可以使用跨多个页面加载的公共脚本文件，然后在页面初始化代码中，您可以检查加载的页面，然后在代码中确定适合运行的代码

您可以使用一个通用脚本文件，该文件为每个需要唯一初始化的单独页面包含一个单独的函数，但没有调用这些函数的代码，然后向页面正文中的每个单独页面添加一个唯一的初始化函数调用。这允许对脚本文件进行最高效的浏览器缓存，并加载更少的脚本文件（它允许您组合并最小化大部分脚本）

对于第二个选项，您可以通过多种不同的方式检测Javascript中加载了哪个页面

可以在已知标记（如body标记）上检测类名

您可以在初始化代码可以测试的每个页面中设置唯一的JS变量

您可以在页面中查找是否存在某些HTML标记，这些标记唯一地指示页面的类型。当您希望某个特定的初始化函数在一组具有特定公共元素的页面上运行时，这种方法非常有效

下面是选项1（在body标记上检测类名）的示例

下面是选项2的示例（在每个页面中设置唯一的JS变量）：

---

谢谢你的回复。当前，我的jquery添加到我的页脚中，我的脚本在jquery之后立即引用。我想我可以根据你的解释，将jquery带到页眉，并在html末尾引用每个js文件，我认为应该这样做。还有一件事，我的代码具有上面的格式，有没有更好的方法可以重构我的加载事件和我的其余代码？我希望我的加载事件成为每个脚本的入口点。上面的代码示例可以更好地重构，还是最好的方法？

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;
    }
}

    <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();
 }