在另一个之前加载一个JS文件

Question

好的，我有一个大约有10k行代码的.js文件。此代码可以在

中拆分

1. 子对象定义
2. 容器对象定义
3. 初始化代码（在定义了对象之后）
4. 计划功能

我想将这一个文件拆分为4个单独的文件，因为它提供了更好的监督。我怎么做这个，因为他们绝对必须按顺序宣布？我应该在$(document).ready()中包含哪些内容？

如果我只是将文件分开并以正确的顺序将它们链接到html，我会得到未定义的对象错误。我也想到这样的事情;但我不知道这有什么好处......

第二 JS文件

function initializeContainers() {
    var containerObj1 = {
      bla: 'bla',
      bla2: 'bla2'
    },
    var containerObj2 = {
      bla: 'bla',
      bla2: 'bla2'
    };
};

首先 JS文件

$(document).ready(function() {
  function initializeSubObjects(callback) {
   var subObj1 = {
     somekey: 'somevalue',
     someke2: 'someothervalue'
   };
  callback();
  };
  initializeSubObjects(initializeContainers);
});

我不知道这是否是正确的方法呢？ PS：我也知道你可以动态添加脚本标签;但这是好的做法吗？

Answer 1

在您的示例中，您应该交换第一个和第二个文件的内容。只有在确定文件已加载时才应调用initializeContainers方法。

最简单的思考方法是首先加载所有带有定义的文件（帮助程序，函数，类......）。加载所有这些后，将其余部分放在最后一个文件中，然后仅在最后一个文件中开始执行代码

旁注：如果将其部署到生产环境中，则应考虑捆绑这些文件。下载4个文件会影响您的加载时间，因此最好将它们捆绑在一起并将它们作为单个文件发送。当你在它的时候，你可能也想缩小它。