如何在每个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();
 }