javascript - 如何避免在加载外部 JS 文件之前丢失对它的调用

Question

我的问题是多个网站将包含我的 JS 文件，并且当调用如下内容时:

<script src="..."></script>

hello.say("yay");

将会出现种族问题，因此有时可能会出现这种情况，有时则不会。我知道我可以通过将每个函数放入 window.onload 中轻松解决这个问题，但这并不干净，因为我已经看到其他网站神奇地解决了这个问题，例如谷歌分析:

.. Calling google analytics JS..

<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");     <-- this an object !
pageTracker._trackPageview();
} catch(err) {}
</script>

如何做到这一点？

Answer 1

Google Analytics 使用的技巧是只能用鸭子类型语言完成的完美示例。如果 GA 脚本尚未加载，则主对象是一个数组，但如果加载了，它的行为就会改变。让我们看看我能否解释一下。

我从 stackoverflow 的源代码中提取了这篇文章:

var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-5620270-1']);
_gaq.push(['_trackPageview']);

它看起来像一个数组，其中有一些值被推送到其中。事实上，如果 _gaq 是 falsy当此代码运行时(就像尚未运行其他分析 JavaScript 一样)，它作为一个数组。然后，当主分析脚本(包含在页面上任何位置的脚本标签中)加载时，它会检查此数组并根据数组的内容执行某些任务。

因此，如果这种情况以相反的顺序发生(首先加载主脚本，然后加载上面的代码片段)，则主脚本将 _gaq 设置为具有推送方法的对象，该对象可以执行 google 想要的任何操作它要做。稍后，当上面的代码运行时，_gaq.push 不只是将值添加到数组中；而是将值添加到数组中。它实际上执行任意代码(并且根本不推送到数组)。

因此，无论哪个脚本先运行，当两个脚本都完成时，最终结果将是相同的。