html5, modernizr, yepnope, webforms2 выпуск - PullRequest
1 голос
/ 25 марта 2011

Я впервые пытаюсь использовать полизаполнения для формы HTML5, и я хочу предоставить код только тем браузерам, которые в нем нуждаются (таким образом, modernizr2 / yepnope).

Первое, что нужно добавить, это то, чтоjavascript определенно загружен, например, на FF3.6, так что это не проблема.

В основном это мой код modernizr / yepnope:

<script>
    $(document).ready(function() {
        yepnope({
            test: Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern && Modernizr.input.autofocus,
            nope: '/_scripts/polyfills/webforms2/webforms2-p.js'
        });
    });
</script>

В моей форме HTML5 у меня есть различные входные данныеполя с атрибутом placeholder, и все это прекрасно выглядит в новейших браузерах (FF4 и т. д.), но когда я запускаю его на FF3.6, я ничего не вижу.Тем не менее, все другие демонстрации, которые я вижу в интернете с использованием webforms2, похоже, хорошо заполнены элементами.

У меня есть другие элементы формы html5, которые я хочу, чтобы webforms2 заполнял полифилл, но, по-видимому, единственное, что в действии - это «автофокус», работающий надверхнее поле.

Я где-то упускаю что-то действительно очевидное?

Любая помощь / предложения высоко ценятся.

Adi.

Ответы [ 2 ]

4 голосов
/ 27 марта 2011
  1. Вам не нужно включать yepnope в domready.Если вы сделаете это, ваше «заполнение» займет некоторое время.(Но, я думаю, webforms2 не может быть загружен как asnyc или defred)
  2. Я не знаю вашей конкретной проблемы.Есть некоторые известные проблемы с webforms2, но zoltan dulac и weston ruter, кажется, работают над ними.
  3. Я бы предложил вам использовать webshims lib .Это более новый проект, который реализует текущее состояние форм (и дает вам также возможность включать другие полифилы. Он также использует modernizr, но в настоящее время поставляется с собственным скрипт-загрузчиком (это будет изменено в будущих версиях), но вы можете использовать yepnopeзагружать другие скрипты / стили / полифиллы, если хотите.

привет alex

раскрытие: я создатель webshims lib ...

2 голосов
/ 29 марта 2011

вы можете использовать это таким образом.Но я не думаю, что это хорошая идея.webshims lib добавляет несколько приятных расширений к веб-формам (всплывающее сообщение об ошибке стилизации / изменение текста проверки), а также исправляет некоторые ошибки, которые не были обнаружены в Modernizr.Кроме того, я почти уверен, что вы не увидите улучшения производительности (polyfiller.js слишком мал).Фактически из-за того, что вы сначала загружаете polyfiller, а затем прокладки, у вас будет небольшой «штраф» за производительность для многих браузеров.Здесь сказано, как вы могли бы сделать это:

Я добавил это предупреждение, потому что я знаю, что многие люди просто добавляют все в обратный вызов DOM-Ready.

//this is not what you should do:
$(document).ready(function(){
   $.webshims.polyfill('forms');
});

//instead do this:
$.webshims.polyfill('forms');
$(document).ready(function(){
   //DOM and forms feature are available
});

Если вы хотите загружать polyfill.js динамически, вам нужно сделать еще 2 вещи:

  1. указать путь к полифиллам (это не требуется при обычном внедрениипотому что мы можем получить путь к сценарию последнего сценария)

Вы делаете это следующим образом:

$.webshims.loader.basePath = 'path-to-shims-folder/';
$.webshims.polyfill();
  1. Только если вы не хотите писать сценарийфункция HTML5 в DOM-Ready (нет, если вы хотите написать скрипт для функции submit, invalid, input и т. д.)

Вы должны использовать дополнительный метод ready из webshims, потому что DOM-Готовность может уже наступить до загрузки сценариев (обычно webshims задерживает событие готовности, чтобы сделать эту обработку гладкой)

Это можно сделать с помощью следующего кода:

$.webshims.ready('forms DOM', function(){
   //give me the validationMessage of the first input
   alert($('input').attr('validationMessage');
});

Если вывам нужны только стандартные функции и вы не хотите создавать сценарии для веб-узлов, вот что вам нужно:

yepnope({ 
    test: blah, 
    nope: '/_scripts/polyfiller.js', 
    complete: function () { 
        $.webshims.loader.basePath = '/_scripts/shims/';
        $.webshims.polyfill('forms');
    } 
});

Если вы хотите создавать сценарии сразу после DOM-Ready / Feature-Loading, вы должны сделать следующее:

yepnope({ 
    test: blah, 
    nope: '/_scripts/polyfiller.js', 
    complete: function () { 
        $.webshims.loader.basePath = '/_scripts/shims/';
        $.webshims.polyfill('forms');
        $.webshims.ready('forms DOM', function(){
            //give me the validationMessage of the first input
            alert($('input').attr('validationMessage');
        });
    } 
});

В обоих случаях скрипт предупреждаетngs останется, но их увидят только заинтересованные разработчики.

Некоторая информация о текущем состоянии форм webshims lib версии 1.5.2 / HTML5.Есть две известные проблемы:

  1. вызов $ .webshims.activeLang изначально не будет работать (этот метод был перенесен с polyfiller на Domextend)
  2. Я неправильно понял часть HTML5спецификация (и смешанная моя реализация со старой спецификацией) о проверке интерактивных ограничений против проверка статических ограничений .В результате Opera и моя реализация checkValidity неверны, поэтому не используйте это: -).

Обе ошибки уже исправлены.Я потрачу некоторое время на дополнительные тесты, так что вы можете ожидать баг-релиз в эти выходные :-).Если вам нужны некоторые из этих функций, вы можете получить текущую основную ветку (она достаточно стабильна, но мне нужно провести дополнительное тестирование x-браузера перед ее выпуском)

Что-то о некоторых правилах производительности:

Большинство правил были написаны в 2006 году. С тех пор многое изменилось:

  1. JS больше не блокируется полностью.(только IE6 и IE7 имеют эти проблемы. но 80% браузеров не имеют)
  2. Большинство браузеров могут загружать более 2 (в основном от 4 до 8) файлов одновременно

Из моих тестов нагрузка между 6 и 12 !!!(да 12 файлов) js-файлы намного быстрее, чем загрузка одного js-файла (тест проводился на нескольких реальных веб-сайтах с различным количеством и размером CSS и изображений).

Помещение JS внизу неуменьшить время загрузки страницы.Помещение JS внизу только уменьшает так называемое время «белой страницы», но это всегда приводит к тому, что Flash не имеет стиля и не ведет себя.Если вам не нравится FOUC, поставьте JS наверху.Если вам нужен микс, используйте загрузчик сценариев (сокращая время белой страницы с меньшим количеством FOUC) в заголовке HTML и загружайте свои сценарии оттуда.

...