有条件地加载 javascript 资源

Question

我正在创建一个网站，其中一些页面至少包含一个媒体播放器，并且由于页面大小限制，我想仅在具有媒体的页面中加载媒体播放器 javascript 文件。我将媒体信息存储在页面头部的 javascript 对象中，其他脚本文件在正文末尾加载。

我发现this solution（使用$.getScript）非常好，但我想要一个不依赖任何框架的解决方案。我在jQuery 网站上看到了一个有趣的实现，我把它改成了这样：

<script>typeof(player) != 'object' || document.write(unescape('%3Cscript src="/assets/js/player/mediaplayer/jwplayer.js"%3E%3C/script%3E'));</script>

它就像一个魅力，但由于我不是 javascript 专业人士，我想知道它是如何工作的？

• 如果我们没有对象类型的变量，是否不需要检查第二个条件？
• 其他浏览器如何处理此代码？
• 它们（甚至是较旧的 IE）是否都跳过了第二个条件，或者它们可能会检查所有条件？
• 有没有更好的跨浏览器行为解决方案？

Answer 1

使用更标准的加载方法：

jQuery

使用getScript

if (typeof player != "object") {
    $.getScript("/assets/js/player/mediaplayer/jwplayer.js");
};

原始 JavaScript

function loadScript(path) {
    var script = document.createElement("script");
    script.src = path;
    script.type = "text/javascript";
    // changed "target" to "head"
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
};

然后在你的代码中：

if (typeof player != 'object') {
    loadScript("/assets/js/player/mediaplayer/jwplayer.js");
};

Answer 2

你指的是短路。

您看到的代码使用||，即“或”运算符。因此，对于“或”运算符，只需其中一个操作数为真。这意味着只要其中一个操作数满足条件，其余的就不会被评估。例如：

if (returnTrue() || returnFalse()) {

（函数不言自明）returnFalse() 方法甚至不会因为短路而被调用。 returnTrue() 条件满足“或”运算符，因为 一个 操作数（第一个）的计算结果为真。

“与”运算符正好相反，所有操作数的计算结果都必须为 true 才能实现。

例如：

if (returnTrue() && returnFalse()) {

returnFalse() 将被调用，因为if 语句需要知道是否所有操作数的计算结果都为true。由于第一个为为真，它继续评估操作数。另一个例子：

if (returnTrue() && returnFalse() && returnTrue()) {

只有前两个调用会执行，但returnFalse() 会破坏比较，并且在到达最后一个returnTrue() 之前会短路

所有这些“规则”都适用于if 语句之外，这就是您的代码有效的原因。因此，对于您的代码，它的意思是“如果 player 是一个对象，请继续评估操作数。”您的代码与以下基本相同：

if (typeof(player) == 'object') {
    document.write("stuff");
}

我相信你知道。

参考：

• https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Logical_Operators