javascript - 包含的 Javascript 脚本的加载顺序

Question

我的 JS/HTML 应用程序正在加载一些我已设置为包含对象文字的 Controller :

例如:page1Controller.js

var page1 = {
  initialize() {
    $(".page").removeClass('on');
    $("#page1").addClass('on');
  },
  doThis: function() {
    // script here
  },
  doThat: function() {
    // Script here
  }
}

例如:navigation.js

var navigation = {
  bindEvents: function() {
    var page1Button = document.getElementById('page1Button');
    page1Button.addEventListener('click', this.loadPage1, false);
  },
  loadPage1: function() {
    page1.initialize();
  },
  loadPage2: function() {
    page2.initialize();
  }
}

注意:navigation.js.bindEvents() 在 pageLoad/deviceLoad 事件之后运行(它是一个phonegap应用程序)。

脚本包含在我的 HTML 页面底部，如下所示:

<script src="page1Controller.js"></script>
<script src="page2Controller.js"></script>
<script src="page3Controller.js"></script>
<script src="page4Controller.js"></script>
<script src="navigation.js"></script>

据我了解，默认情况下，脚本将同步加载 - 按照它们在 HTML 页面中出现的顺序一个接一个地加载。

但是，当我从 navigation.js 调用 page3.doThat() 时，doThat 函数未定义，尽管其他一些 Controller 中的函数可以正常工作。是否是这样，即使脚本按顺序加载，navigation.js 也可能在 page3Controller.js “注册”其功能完全之前加载？

Answer 1

答案是，如果脚本按顺序加载到一组 HTML 脚本标记中，则每个脚本都会在下一个脚本之前完整加载到内存中，从而使较早脚本中的函数可供稍后调用的脚本访问。感谢@T.J。克劳德在他的评论中指出了这一点。