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

Question

拜托，我有几个 html 页面，我在正文后面包含了一些 js 脚本。我的脚本运行良好且成功。然而，随着项目的发展，将两者放在一起会变得困惑。然后我将js放入一个单独的文件中。问题是，现在我引用了所有文件，并且每个 html 页面都可以使用 js 代码。

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

(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 时，如何使每个文件触发？任何帮助将不胜感激

Answer 1

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

1. 您可以将特定于页面的初始化代码和支持代码分解为单独的脚本文件，并仅将它们包含在 <script> 中。标记在实际需要的页面上。

2. 您可以使用跨多个页面加载的通用脚本文件，然后在页面初始化代码中，您可以检查加载了哪个页面，然后在代码中决定哪些代码适合运行。

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

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

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

这是选项 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();
 }