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。

“和”运算符相反，所有操作数必须计算为true才能完成。

例如：

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

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

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

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

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

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

我相信你知道。

参考：

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

有条件地加载javascript资源

2 个答案: