Question

我第一次尝试使用polyfill填充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表单中，我有各种带有占位符属性的输入字段，并且在最新的浏览器（FF4等）中看起来都很可爱但是当我在FF3.6上运行时我什么都没看到。然而，我在互联网上使用webforms2看到的各种其他演示似乎都有占位符元素。

我还有其他html5形式的东西我想要webforms2到polyfill，但唯一一个似乎在行动的是'自动对焦'在顶级领域工作。

我在某处遗漏了一些非常明显的东西吗？

非常感谢任何帮助/建议。

阿迪。

Answer 1

您不需要在domready中包含yepnope。如果你这样做，你的“polyfilling”将需要一些额外的时间。（但是，我认为，webforms2无法加载asnyc或deferred）
我不知道你的确切问题。 webforms2存在一些已知问题，但zoltan dulac和weston ruter似乎可以解决这些问题。
我建议您使用webshims lib。这是一个较新的项目并实现了当前的表单状态（并且还提供了包含其他polyfill的可能性。它还使用了modernizr，但是目前自带了自己的脚本加载器（这将在未来的版本中更改），但你可以使用yepnope如果你愿意，可以加载其他脚本/样式/ polyfill。

问候亚历克斯

披露：我是webshims lib的创建者......

Answer 2

你可以这样使用它。但是，我认为这不是一个好主意。 webshims lib为webforms添加了一些不错的扩展（样式错误气泡/更改验证文本），并修复了一些错误，这些错误不是用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，则需要额外做两件事：

指定polyfill的路径（正常嵌入时不需要这样做，因为我们可以获取最后一个脚本的脚本路径）

你这样做，接下来的方式：

$.webshims.loader.basePath = 'path-to-shims-folder/';
$.webshims.polyfill();

仅限于您不想在DOM-Ready上编写HTML5功能的脚本（如果您想在提交，无效，输入等上编写功能脚本）。

您必须使用来自webshims的额外ready-method，因为在加载脚本之前DOM-Ready可能已经出现（通常，webshims延迟ready事件以使此处理顺利）

您可以使用以下代码执行此操作：

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

如果您只需要标准功能且不想编写webshims脚本，那么这就是您应该采用的方式：

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');
        });
    } 
});

在这两种情况下，脚本警告都将保留，但只有感兴趣的开发人员才能看到它们。

有关webshims lib 1.5.2 / HTML5表单当前状态的一些信息。有两个问题：

调用$ .webshims.activeLang最初不起作用（此方法已从polyfiller移至domextend）
我误解了HTML5规范的一部分（并将我的实现与旧规范混合在一起）关于与static constraint validation的交互式约束验证。结果是，Operas和我对checkValidity的实现不对，所以不要使用它： - ）。

这两个bug都已修复。我会花一些时间进行额外的测试，所以你可以期待本周末的bug发布:-)。如果你需要其中的一些功能，你可以获取当前的主分支（它非常稳定，但我需要在发布之前进行更多的x-browser测试）

关于某些性能规则的一些内容：

大多数yslow规则是在2006年写成的。从那以后，很多事情发生了变化：

JS不再完全阻止了。（只有IE6和IE7有这些问题。但是80％的浏览器都没有）
大多数浏览器可以同时加载2个以上（主要是4-8个）文件

从我的测试加载6到12！（是12个文件）js-files比加载一个单独的js文件要快得多（测试是在多个不同数量和大小的css和图像的真实网站上完成的。）

将JS置于底部不会减少页面加载时间。将JS放在底部只会减少所谓的白页时间，但这总会导致Flash出现无格式/不受欢迎的内容。如果您不喜欢FOUC，请将JS置于Top。如果你想混合使用HTML头文件中的脚本加载器（减少白页时间，少用FOUC）并从那里加载你的脚本。

html5，modernizr，yepnope，webforms2问题

2 个答案: