如何避免大的“script.js”文件，组织js/jquery代码（requirejs）答案

【问题标题】：How to avoid large "script.js" file, organizing js/jquery code (requirejs)如何避免大的“script.js”文件，组织js/jquery代码（requirejs）
【发布时间】：2023-04-01 10:45:01
【问题描述】：

我的项目中总是以一个巨大的“script.js”或“main.js”文件结束，只有一个document.ready函数，总是对此感到难过，但不知道如何组织js/jquery 我自己的代码很好。我熟悉模块的概念，但又不知道该怎么做。

例如，我正在从事我拥有许多资源（例如组织、用户等）的项目。我将尽我所能展示我需要对每个资源执行的最少代码：

function deleteResource(url, $that) {
    $.ajax({
        url: url,
        type: "DELETE"
    }).done(function() {
        $that.closest('tr').remove();
    });
}

function emptyHelper(element) {
    if(typeof element === "undefined")
        return "/";

    return element;
}

function createHtml(data) {
    var $that = $('.organisations-table tbody');
    $that.find("tr").remove();

    for(var i=0; i<data.length; i++) {
        var element = "<tr>";
        element += "<td>" + emptyHelper(data[i].telephone) + "</td>";   
        element += "<td><a href='#' class='delete-organisation' data-id=" + data[i].organisationId + "></a></td>" 

        element += "</tr>";
        $that.append(element);
    }
}

$("tbody").on('click', 'a.delete-organisation', function() {
    deleteResource(/*some_url_for_deleting_resource */, $(this));
});

$('#organisation-search').submit(function(event) {
    event.preventDefault();

    $.ajax({
        url: $(this).attr("action"),
        type: "GET",
        data: $(this).serialize()
    }).done(function(data) {
        createHtml(data);
    });
});

现在想象一下，我需要用 10 个资源做类似的事情，并将该代码放在同一个脚本中，如何解决这个问题，如何在模块代码中很好地封装和组织这个示例？

编辑 1：在做了一些研究之后，我猜想我需要使用 requirejs（多页），例如：https://github.com/requirejs/example-multipage。所以基本上对于每个资源（组织、用户、blabla1、blabla2 等）我都需要 main.js 文件？ 有人可以提供代码的示例基本概念，如何使用 requirejs 做到这一点？

【问题讨论】：

标签： javascript requirejs

【解决方案1】：

如果没有 requirejs 或类似的东西，您就必须实现自己的模块系统。我在不使用 requirejs 时使用的是正确的命名空间，然后使用 Maven 插件以正确的顺序手动合并所有 JS。在不使用 requirejs 或竞争对手时，您或多或少必须这样做。

【讨论】：

您能否提供代码的示例基本概念，如何使用requirejs（使用我的示例）来做到这一点？

【解决方案2】：

分两步完成

您必须将大脚本拆分成更小的部分。
然后使用第三方或您的自定义实现将这些文件加载到您的 html 中。

require.js 很好，否则你可以使用普通的旧<script>，就可以了。

【讨论】：