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

Question

在我的项目中，我总是以巨大的"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

Answer 1

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

Answer 2

这分两步完成

• 你必须把你的大脚本分成更小的部分。

• 然后使用第三方或自定义实现将这些文件加载到html中。

require.js是一个很好的方法，否则你可以使用普通的旧<script>，也可以。