Modernizr / yepnope порядок выполнения WRT jQuery + поиск неисправностей плагинов - PullRequest
3 голосов
/ 05 февраля 2012

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

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

Можете ли вы взглянуть на мой код ниже и посмотреть, где я хочу?Этот фрагмент находится непосредственно под свернутым кодом Modernizer;который находится в моем <head>.К вашему сведению, в нижней части моего <body> загружается множество кодов эффектов jQuery, но я хочу, чтобы полифилы работали до того, как я настроил для них функцию '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 Ответ

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

После долгих исследований и экспериментов, похоже, что это проблема с 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 определенно доступен для полифиллов.В результате вы можете безопасно использовать выбор $() в полной функции, что может быть удобно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...