Использование * селектора в jQuery для применения CSS3PIE с Modernizr - PullRequest
Новая
       35

Использование * селектора в jQuery для применения CSS3PIE с Modernizr

3 голосов
/ 15 февраля 2012

Название этого поста читается как хипстер webdev, как тощий фланелевый шарф в гонке алликат.Извините.

Я не очень хорош в оптимизации сценариев, поэтому мне интересно, насколько плохим будет вычислительный следующий вызов функции.Я знаю, что это было бы непрактично для большого сайта, но там, где я хочу его использовать, вызов 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); });
        }
    }
 });

Спасибо всем.

Ответы [ 2 ]

1 голос
/ 15 февраля 2012

Попробуйте это. 

 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);
                }
            });
        }
    }
 });
0 голосов
/ 15 февраля 2012

... вызов 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);

Это вызывает PIE.attach для каждого элемента, кроме documentElement. Вы можете использовать nodeName (или tagName), чтобы не прикреплять PIE к html, head, style и т. Д. Использование простой функции рекурсивного спуска позволяет избежать создания больших плоских массивов в памяти, что и делает $("*").

...