JavaScript 加载顺序答案

【问题标题】：JavaScript Load OrderJavaScript 加载顺序
【发布时间】：2010-09-06 08:24:46
【问题描述】：

我正在使用 amq.js (ActiveMQ) 和 Google Maps。我按此顺序加载脚本

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>AMQ & Maps Demo</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="style.css"></link>

    <!-- Google APIs -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key=abcdefg"></script>

    <!-- Active MQ -->
    <script type="text/javascript" src="amq/amq.js"></script>
    <script type="text/javascript">amq.uri='amq';</script>

    <!-- Application -->
    <script type="text/javascript" src="application.js"></script>
</head>

但是在我的 application.js 中，它可以很好地加载地图，但是在尝试使用 AMQ 订阅主题时出现错误。 AMQ 依赖于 Firefox 中的错误控制台说对象未定义的原型。我认为在脚本完成加载之前使用 amq 对象有问题。 有没有办法确保在我的 application.js 中使用这两个脚本之前都加载它们？

Google 有一个很好的函数调用google.setOnLoadCallback(initialize);，效果很好。我不确定 amq.js 有这样的东西。

【问题讨论】：

标签： javascript google-maps activemq

【解决方案1】：

有没有办法确保在我使用它们之前加载这两个脚本？

是的。

将您要最后加载的代码（您的application.js 内容）放入原型的document.observe。这应该确保代码只有在原型 + 其他东西完成并准备好后才会加载。（如果你熟悉jQuery，这个功能类似于jQuery的$(document).ready）

【讨论】：

【解决方案2】：

您还可以使用内置的 SharePoint javascript 方法来控制脚本的执行；

_spBodyOnLoadFunctionNames.push("yourFunction");

【讨论】：

【解决方案3】：

跨域脚本在站点本身的脚本之后加载，这就是你得到错误的原因。有趣的是，这里没有人知道这一点。

【讨论】：

感谢您的评论。将我的脚本移动到同一个域后，没有更多问题。
这里是否有错误 (stackoverflow.com/questions/1307929/…) 在“考虑好的答案”：“Javascript 保证按照它在 HTML 中出现的顺序运行，所以只要确保你的函数在之前定义您尝试将其附加到事件中。”？
这似乎是不可能的，因为从 Google 的 CDN 加载 jQuery，然后拥有自己的需要 jQuery 的本地脚本是相当普遍的做法
刚刚在 Chrome 和 Firefox 的最新版本中对此进行了测试，但两者都不是这样。它也与 MDN 相矛盾（参见 developer.mozilla.org/en/docs/Web/HTML/Element/script）。 -1;你没有为你的主张提供任何证据，我不相信这是真的。

【解决方案4】：

我遇到了与此类似的问题，只有一个脚本。我想出的解决方案是将addEventListener("load",fn,false) 用于使用document.createElement('script') 创建的script 对象这是加载任何标准JS 文件并允许您添加“后加载”脚本的最终函数。

function addJavaScript( js, onload ) {
   var head, ref;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = js;
   script.addEventListener( "load", onload, false );
   head.appendChild(script);
}

我希望这对将来的人有所帮助。

【讨论】：

【解决方案5】：

你的意思是 AMQ 依赖于原型库？我看不到在代码中导入该库你已经提供了。

是的，ActiveMQ 的 javascript (amq.js) 确实依赖于 Prototype。在 amq.js 中，它加载了 3 个脚本，_amq.js、behaviour.js 和 prototype.js。

感谢您对 wrumsby 的 JavaScript 加载顺序的帮助。这告诉我我的虫子在另一个城堡里:(

我想我有一个不同的问题。我还检查了从 ActiveMQ 5.0 到 5.1 的 js 文件，发现它们也是一样的。在 5.0 到 5.1 中发生了一些变化，需要刷新主题才能订阅。我会继续寻找，但感谢您消除了这个可能的原因。

【讨论】：

【解决方案6】：

有没有办法确保在我的 application.js 中使用这两个脚本之前都加载它们？

JavaScript 文件应按顺序加载并阻塞，因此除非您所依赖的脚本执行异常操作，否则您需要做的就是在其他文件之后加载 application.js。

Non-blocking JavaScript Downloads 提供了一些关于脚本如何加载的信息（并讨论了一些破坏阻塞的技术）。

【讨论】：

还值得关注Asynchronous Module Definition API 和其他在并行加载 JavaScript 文件和其他资源方面执行相同操作的 API。

【解决方案7】：

AMQ 依赖于 FireFox 中的错误控制台显示对象未定义的原型。

你的意思是AMQ依赖Prototype library吗？在您提供的代码中，我看不到该库的导入。

【讨论】：

【解决方案8】：

在 jquery 中你可以使用：

$(document).ready(function(){/*do stuff here*/});

这可以确保 javascript 已加载并且 dom 在执行您的操作之前已准备好。

在原型中看起来这可能有效

document.observe("dom:loaded", function() {/*do stuff here*/});

如果我正确理解您的问题..我认为这可能会有所帮助..

如果您不想依赖库来执行此操作...我认为这可能有效：

<script>
   function doIt() {/*do stuff here*/}
</script>
<body onLoad="doIt();"></body>

【讨论】：

它是否确保加载了 javascript 和 dom，或者只是 dom？