javascript - 如何避免大的 "script.js"文件，组织 js/jquery 代码(requirejs)

Question

在我的项目中，我总是以巨大的“script.js”或“main.js”文件结束，并带有一个document.ready 函数，对此我总是感觉很糟糕，但不知道如何组织< em>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 做到这一点？

Answer 1

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