2

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

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

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

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

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

2 回答 2

2

使用更标准的加载方法：

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");
};
于 2013-05-11T19:10:12.190 回答
1

你说的叫短路。

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

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");
}

我相信你知道。

参考：

于 2013-05-11T19:51:21.973 回答