Modernizr/ yepnope порядок выполнения WRT jQuery + поиск неисправностей плагинов

Сегодня я думаю о том, как загружать полифилл Modernizr, и столкнулся с некоторыми проблемами. Мне нравится идея загрузки jQuery в Parallell, и поэтому CDRI URI (с локальным резервом) находится на вершине. Затем я загружаю некоторые полифиллы, которые являются всеми плагинами jQuery, которые я использовал до открытия Modernizr.

Беда в том, что плагины меньше и загружаются до того, как jQuery будет создан и обработан, поэтому объекты '$' и 'jQuery' в итоге оказываются неопределенными. Документы yepnope говорят, что загрузчик должен соблюдать порядок выполнения зависимых сценариев, несмотря на параллельное скачивание, но следование примеру синтаксиса буквы до сих пор приводит к ошибке.

Можете ли вы взглянуть на мой код ниже и увидеть, где я хочу? Этот фрагмент находится непосредственно под свернутым кодом Modernizer; который находится в моем <head>, К вашему сведению, есть множество эффектов кода JQuery, которые также загружаются в нижней части моего <body>, но я хочу, чтобы полифиллы работали до того, как я настроил для них функцию 'complete:'.

    Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if (!window.jQuery)
            Modernizr.load('js/jquery.1.7.1.min.js');

    }
  },
  {//Border Radius
    test : Modernizr.borderradius,
    nope : 'js/polyfills/jquery.curvycorners.js'
  },
  {//Text Shadow
    test: Modernizr.textshadow,
    nope: 'js/polyfills/jquery.textshadow.min.js',
    complete: function(){
        $(function(){
            $("h2").textShadow(); 
            $("h3").textShadow();
            $("a.facebook").textShadow();
            $("a.twitter").textShadow();
        });
    }
  },
  {//Box Shadow
    test: Modernizr.boxshadow,
    nope: 'js/polyfills/jquery.boxshadow.js'
  }
]);
Источник

1 ответ

Решение

После долгих исследований и экспериментов, похоже, что это проблема с yepnope на уровне концепции. Из-за временной шкалы загрузки для jQuery плагины всегда будут искать его, пока он не будет готов. Хотя вложенная функция load() в полной функции теста jQuery является одним из способов ее взлома, вы ожидаете, что приличный промежуток времени пользователь увидит страницу без полизаполнений. Хотя это может быть хорошо для проверки формы, это выглядит так же плохо, как FOUC, когда вы заполняете border-radius а также text-shadow как я в этом примере.

Лучшее решение, которое я нашел, было загрузить jQuery с помощью стандартного метода HTML5:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>

Затем поместите Modernizr.load() в $(document).ready();, Хотя это компенсирует большинство преимуществ параллельной загрузки в Modernizr, оно поддерживает принцип прогрессивного улучшения yepnope, позволяет использовать Modernizr для HTML5-шимминга (это просто аккуратно IMHO) и гарантирует, что jQuery определенно доступен для полифиллов. В результате вы можете безопасно использовать $() выбор в полной функции, которая может быть удобной.

Источник
Другие вопросы по тегам