javascript - 耦合/链接多个异步加载的JS脚本(JavaScript)

Question

问题描述：

我正在一个项目中，以采用现有的JavaScript脚本并对其进行修改以支持异步加载。如果您不了解异步或延迟加载脚本，但想了解更多信息read this。

main.js脚本要做的第一件事之一就是调用我们的网络服务器（客户端的第三方）以获取一些动态数据。之所以会出现问题，是因为该数据是通过动态添加的JS文件（data.js）返回的，该文件包含main.js其他部分所需的变量。该问题类似于《 Even Faster web sites》第5章中描述的问题。其中涉及将内联脚本与异步脚本耦合。无论如何...问题是main.js不知道data.js完成加载的时间...

当前main.loadDataJs（）使用“ Document.write Script Tag”技术动态加载我们的JS文件，但这不适用于异步脚本（对于尚未尝试使用该脚本的人：加载后会导致空白页）。因此，我们必须使用“脚本Dom元素”技术来动态加载data.js。这里的问题是弄清楚浏览器何时下载并执行了添加的脚本节点。因此，我正在寻找一种将data.js与异步脚本main.js耦合的方法。

我的首要任务是构建在PC浏览器和移动浏览器上都可靠的东西。它必须具有非常小且重量轻的封装，因为data.js返回的数据量非常小（大约5-10个键/值对）。它必须支持第三方通信。

 

我正在研究的解决方案：


根据我自己的研究，我倾向于修改提供data.js的服务器代码以支持JSONP。也就是说：当我们设置脚本对象的src属性时，该调用将具有一个回调参数src="data.js?callback=fooCallback"，该参数导致数据包装在函数调用中，例如fooCallback( { geoC : "US" } );。从我的实验来看，这似乎是最可靠的解决方案，因为它与浏览器无关。部署服务器端代码意味着极大地增加了项目的范围，但是请耐心等待。


我也尝试过：


使用轮询计时器。哪个检查数据是否存在，如果是，则调用“回调”函数，否则再次调用setTimeout。这个解决方案的我的问题是，它不是事件驱动的，因此不会像我所希望的那样快速响应，并且会导致浏览器的忙碌指示器激活。因此，如果data.js需要很长时间才能下载或失败，则它可能看起来“很忙”很长时间。
使用脚本块的onload和onreadystatechange处理程序。除了我遇到的两个问题，这本来是一个完美的解决方案。
A）在使用IE8的快速计算机上，我能够获取onreadstatechange来触发s.readyState === "loaded"事件，然后再执行data.js，我假设它已下载但仍在执行：-/。我可以通过在onreadystatechange处理程序内添加setTimeout(fooCallBack, 1);调用来解决此问题。但是我对这种解决方案并不满意。
B）我已阅读（但尚未测试）该技术不适用于IE6减号。任何意见？


我研究了其他非动态JavaScript解决方案，但这些解决方案似乎比我所需要的要重。就像Facebook等人使用的iframe或Flash技术一样。



我的问题：

对于将异步脚本耦合在一起的人，我很好奇您选择了什么解决方案，以及找到它们的可靠性如何？

有没有我没有谈论过的替代解决方案？

对我所谈论的内容有任何一般性评论吗？



定义：

“技术”的定义是从Steve Souders的书Even Faster web sites中借用的。一本好书顺便说一句！

脚本dom元素–一种通过创建脚本元素并将其src属性设置为脚本的URL来添加动态脚本的方法。

document.write脚本标记–一种通过使用document.write将HTML写入页面来添加动态脚本的方法。

Answer 1

如果您需要在脚本加载后调用一个事件，请尝试以下操作：在main.js中创建一个函数main.loadDataJS.onload = function(evt) { }并让每个加载的脚本（假设您也是这些脚本的创建者）可以调用该函数（传递< cc>）。

当然，如果您无权访问脚本（例如，说您正在加载Scott Schiller的soundManager2.js），那么很可能是库/脚本有自己的onload事件，您可以使用该事件来调用自己的装载机。 （按照上面的示例代码，您只需将evt放在main.js中。）

至于加载脚本，您列出的任何方法都应该可以正常工作。我个人建议jQuery's getScript method。