Question

我总是在我的项目中使用一个 document.ready 函数以巨大的“script.js”或“main.js”文件结束，并且总是感觉不好，但不知道如何组织< 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（multipage），例如：https://github.com/requirejs/example-multipage。所以基本上对于每个资源（组织，用户，blabla1，blabla2等）我需要 main.js 文件？ 有人可以提供示例基本的代码概念，如何使用requirejs执行此操作？

Answer 1

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

Answer 2

这是分两步完成的

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

require.js是一个很好的，否则你可以使用普通的<script>，可以正常工作。

如何避免使用大型“script.js”文件，组织js / jquery代码（requirejs）

2 个答案: