javascript - 解释 requestAnimationFrame shim 层

Question

我正在查看 following code from Paul Irish on the requestAnimationFrame shim layer .我想用另一种语言生成这个 js，所以我想弄清楚到底发生了什么。 (你可以 see it being used in an animation here )。

window.requestAnimFrame = (function(){                //1
  return  window.requestAnimationFrame       ||       //2
          window.webkitRequestAnimationFrame ||       //3
          window.mozRequestAnimationFrame    ||       //4
          function( callback ){                       //5
            window.setTimeout(callback, 1000 / 60);   //6
          };                                          //7
})();                                                 //8
                                                      //9
(function animloop(){                                 //10
  requestAnimFrame(animloop);                         //11
  render();                                           //12
})();                                                 //13

我的问题是 - 第 2-4 行发生了什么？我们似乎正在获取函数句柄，在 OR 操作中将它们连接在一起 - 然后分配 OR 的结果 对第 1 行中的匿名函数的操作 - 然后将其分配给 var window.requestAnimFrame。

编辑:感谢所有有用的答案 - 我只是想确保我的回答是正确的 - 下面是对正在发生的事情的准确描述吗？ ( Here is the original ) ( Here is the version with the more explicit code .)

var myfunc = function() {
    if (typeof(window.requestAnimationFrame) != "undefined") {
        return window.requestAnimationFrame;
    } else if (typeof(window.webkitRequestAnimationFrame) != "undefined") {
        return window.webkitRequestAnimationFrame;
    } else if (typeof(window.mozRequestAnimationFrame) != "undefined") {
        return window.mozRequestAnimationFrame;
    } else {
        return function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    }
};
window.requestAnimFrame = myfunc;

Answer 1

JavaScript 逻辑或(这些不是二进制或)将使用“真实”值 - 考虑例如

window.foo = window.foo || function() {};

在这种情况下，因为 window.foo 不存在，我们将返回第二个操作数，如果它存在 - 那么 OR 表达式将计算为第一个操作数。 null 或未定义的值是“falsey”——尽管还有其他 falsey 值——谷歌以找出它们是什么。

你可以这样读:

将属性 requestAnimFrame 分配给调用自身的函数的输出。这是一个奇怪的概念，但由于 JavaScript 的作用域规则，它通常被使用，它可以防止该函数内的任何变量泄漏到全局作用域中。这里要注意的重要一点是在第 7 行末尾的 () 调用了从第 1 行开始的函数表达式。

该函数返回 window.requestAnimationFrame 或 window.webkitRequestAnimationFrame 或 window.mozRequestAnimationFrame 或最后，如果这些都不存在(因此是假的)返回实现请求动画帧的函数作为超时 - 这是垫片。

最后，您会得到指向一个函数的 requestAnimFrame，它要么是已经存在的具有标准名称的内置函数，要么是 vendor 前缀名称，或者是 shim 函数。

HTH.