在 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、风格，等等。使用简单的递归下降函数可以避免在内存中创建大型平面数组，这正是 $("*") 的作用。