Question

请问我有几个html页面，我在身体后面包含了一些js脚本。我的脚本工作正常且成功。然而，随着项目的发展，将两者结合起来会变得混乱。然后我把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进行jQuery或ajax加载调用？当从服务器或加载请求各自的html / url时，如何触发每个文件？任何帮助将不胜感激

Answer 1

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

您可以将特定于页面的初始化代码和支持代码分解为单独的脚本文件，并仅将它们包含在需要它们的实际页面上的<script>标记中。
您可以使用在多个页面中加载的公共脚本文件，然后在页面初始化代码中，您可以检查加载了哪个页面，然后在代码中确定哪个代码适合运行。
您可以使用单个公共脚本文件，该文件包含需要唯一初始化的每个单独页面的单独函数，但没有调用这些函数的代码，然后向正文中的每个单独页面添加一个唯一的初始化函数调用的页面。这样可以最有效地对脚本文件进行浏览器缓存并加载更少的脚本文件（它可以让您组合并最小化大多数脚本）。

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

您可以检测已知标记上的类名（如正文标记）。
您可以在初始化代码可以测试的每个页面中设置唯一的JS变量。
您可以在页面中查找某些HTML标记的存在，这些标记唯一地指示它是哪种类型的页面。当您希望特定的初始化函数在一堆具有特定公共元素的页面上运行时，这种方法很有效。

以下是选项1的示例（检测正文标记上的类名）。

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

如何在每个html页面上单独执行jQuery / Ajax加载

1 个答案: