在 jQuery 中使用 * 选择器将 CSS3PIE 与 Modernizr 一起应用

Question

这篇博文的标题读作 webdev-hipster 就像一场野猫比赛中的紧身法兰绒围巾。对不起。

我不擅长脚本运行时优化，所以我想知道下面的函数调用在计算上会有多糟糕。我知道这对于大型网站来说并不实用，但是在我想使用它的地方，jQuery 调用将返回不超过六个对象，所以音量并不高。

 Modernizr.load({
    test: Modernizr.borderradius && Modernizr.boxshadow,
    nope: "_/js/polyfills/pie.js",
    complete: function(){
        if(window.PIE){
            $('*').css('box-shadow').each(function(){ PIE.attach(this); });
            $('*').css('border-radius').each(function(){ PIE.attach(this); });
        }
    }
 });

谢谢大家。

Answer 1

试试这个。

 Modernizr.load({
    test: Modernizr.borderradius && Modernizr.boxshadow,
    nope: "_/js/polyfills/pie.js",
    complete: function(){
        if(window.PIE){
            $('*').each(function(){
                var $this = $(this);
                //check if box-shadow or border-radius is applied
                if($this.css('box-shadow') || $this.css('border-radius')){
                    PIE.attach(this);
                }
            });
        }
    }
 });

Answer 2

...jQuery 调用将返回不超过六个对象...

所以半打是六。其中四个将是html、head、script 和body。 :-) 页面上只有另外两个元素？

说真的，如果数量非常少，也没关系。不过，您希望将 $() 调用限制为仅对真正需要它的元素进行调用，而不是 $("*")，后者是一把大锤子。

如果你真的需要遍历整个文档，使用一个简单的递归下降函数：

function applyPie(element) {
    var node;
    for (node = element.firstChild; node; node = node.nextSibling) {
        if (node.nodeType === 1) { // 1 = element
            node.style.boxShadow = /* ...?... there's nothing in your jQuery call */;
            node.style.borderRadius = /* ...?... there's nothing in your jQuery call */;
            PIE.attach(node);
            applyPie(node);
        }
    }
}

applyPie(document.documentElement);

这会在除documentElement 之外的每个元素上调用PIE.attach。您可以使用nodeName（或tagName），这样您就不会将PIE 附加到html、head、style 等。使用简单的递归下降函数可以避免在内存中创建大型平面数组，$("*") 就是这样做的。