Question

我刚刚浏览了modenizer的代码，因为我需要在我的小型在线应用程序中实现一些小功能检测。所以我需要的检查是cssTransform3d I.E检查3dTranforms，如果它在浏览器中可用。

tests['csstransforms3d'] = function() {

    var ret = !!testPropsAll('perspective');

                  if ( ret && 'webkitPerspective' in docElement.style ) {

                  injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){
                                              #modernizr{left:9px;position:absolute;height:3px;}
                                              }',
                  function( node, rule ) {
                      ret = node.offsetLeft === 9 && node.offsetHeight === 3;
                  });
    }
    return ret;
};

现在检查injectElementWithStyles中的回调函数，传递了两个参数，node和rule，谁传递这些参数？我在全局变量声明中看不到声明了这些变量。

injectElementWithStles函数如下::

injectElementWithStyles = function( rule, callback, nodes, testnames ) {

  var style, ret, node, docOverflow,
      div = document.createElement('div'),
            body = document.body,
            fakeBody = body || document.createElement('body');

  if ( parseInt(nodes, 10) ) {
          while ( nodes-- ) {
          node = document.createElement('div');
          node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
          div.appendChild(node);
      }
  }

            style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
  div.id = mod;
      (body ? div : fakeBody).innerHTML += style;
  fakeBody.appendChild(div);
  if ( !body ) {
            fakeBody.style.background = '';
            fakeBody.style.overflow = 'hidden';
      docOverflow = docElement.style.overflow;
      docElement.style.overflow = 'hidden';
      docElement.appendChild(fakeBody);
  }

  ret = callback(div, rule);
    if ( !body ) {
      fakeBody.parentNode.removeChild(fakeBody);
      docElement.style.overflow = docOverflow;
  } else {
      div.parentNode.removeChild(div);
  }

  return !!ret;

},

现在我对js相对较新，但我已经尝试了解这两个函数，据我所知，变量或参数需要在传递之前进行初始化/声明，但是我没有看到node或rule被宣布，有人可以解释发生了什么以及这些变量采取了什么价值？

谢谢。

亚历-Z

Answer 1

所以，让我试着解释一下。

injectElementWithStyles的

签名为rule, callback, nodes, testnames，这意味着这些是他们期望的参数。

调用该函数时，它只传递rule和callback：

injectElementWithStyles(
'@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) {
 ret = node.offsetLeft === 9 && node.offsetHeight === 3;
});

因此，请记住该函数是injectElementWithStyles函数的第二个参数。请注意，正在传递的函数（让您感到困惑的函数）尚未被调用，它将作为参数传递给injectElementWithStyles。

在该函数中，回调的调用如下：

ret = callback(div, rule);

如您所见，匹配传递的回调的签名：即div为node而rule为......嗯...... rule 。

在那一刻，执行流程进入令人不安的功能，而node将具有div的值（在该函数中声明），rule将保持值{ {1}}（也在该函数中声明）

希望这澄清！

现在，您可能希望查看rule接受规则名称和要评估的必须返回true或false的函数。因此，在您的应用中，我们假设您要测试是否已投入生产：

Modernizr.addTest

如果Modernizr.addTest('production', function () { return window.isProduction; });为production而window.isProduction为true，则会将该类no-production添加到HTML元素中。

理解3d变换检测代码modenizer

1 个答案: