html5、Modernizer、yepnope、webforms2问题

我第一次尝试在HTML5表单中使用polyfills，我只想将代码提供给需要它的浏览器，从而使R2/yepnope现代化

首先要添加的是，javascript是在FF3.6上加载的，所以这不是问题所在

基本上这是我的Modernizer/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能够多填充，但唯一一个似乎在起作用的是“自动聚焦”在顶部字段中工作

我是不是错过了一些很明显的东西

非常感谢您的帮助/建议

阿迪

您不需要在domready中包含yepnope。如果您这样做，您的填充将需要一些额外的时间。但是，我认为，webforms2不能作为纽约市加载或延迟 我不知道你的确切问题。webforms2存在一些已知的问题，但zoltan dulac和weston ruter似乎正在解决这些问题。 我建议你使用。这是一个较新的项目，实现了表单的当前状态，并使您可以包含其他多边形填充。它还使用modernizr，但目前附带了自己的scriptloader。这将在将来的版本中更改，但如果需要，可以使用yepnope加载其他脚本/样式/多边形填充。 问候 亚历克斯

披露：我是webshims lib的创建者

您不需要在domready中包含yepnope。如果您这样做，您的填充将需要一些额外的时间。但是，我认为，webforms2不能作为纽约市加载或延迟 我不知道你的确切问题。webforms2存在一些已知的问题，但zoltan dulac和weston ruter似乎正在解决这些问题。 我建议你使用。这是一个较新的项目，实现了表单的当前状态，并使您可以包含其他多边形填充。它还使用modernizr，但目前附带了自己的scriptloader。这将在将来的版本中更改，但如果需要，可以使用yepnope加载其他脚本/样式/多边形填充。 问候 亚历克斯

---

披露：我是webshims库的创建者…

你可以这样使用它。但是，我认为这不是一个好主意。webshims lib为webforms样式错误气泡/更改验证文本添加了一些不错的扩展，还修复了Modernizer未检测到的一些bug。另外，我很确定polyfiller.js的性能提升幅度太小。事实上，由于您首先加载polyfiller，然后加载垫片，对于许多浏览器来说，您将有一些小的性能损失。也就是说，你可以这样做：

我添加了这个警告，因为我知道，很多人只是在DOM就绪回调中添加所有内容

//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，您必须另外做两件事：

指定多边形填充的路径这在正常嵌入中是不需要的，因为我们可以获得最后一个脚本的脚本路径 你可以这样做，方法如下：

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

仅当您不想在DOM Ready上编写HTML5功能时，而不是当您想在submit、invalid、input等上编写功能时。 您必须使用webshims中的extra-ready方法，因为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就绪/功能加载后立即编写脚本，应执行以下操作：

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表单当前状态的一些信息。knwon有两个问题：

最初调用$.webshims.activeLang将不起作用。此方法已从polyfiller移动到domextend 我误解了HTML5规范的一部分，并将我的实现与一个关于交互式约束验证的旧规范混合在一起。结果是，歌剧和我的实现是不正确的，所以不要使用这个：-。 这两个错误都已修复。我将花一些时间进行额外的测试，因此您可以期待本周末发布错误：-。如果您需要其中一些功能，您可以获取当前的主分支，它非常稳定，但在发布之前，我需要做更多的x浏览器测试

关于一些性能规则：

大多数yslow规则是在2006年编写的。从那时起，情况发生了很大变化：

JS不再完全阻塞。只有IE6和IE7有这些问题。但80%的浏览器没有 大多数浏览器可以同时加载2个以上的文件（大多数在4-8个文件之间） 从我的测试中 在6和12之间加载！！！是的，12个文件js文件比加载一个js文件要快得多。测试是在多个实际网站上进行的，这些网站的css和图像数量和大小都不同

---

将JS放在底部不会减少页面加载时间。将JS放在底部只会减少所谓的白页时间，但这总是会导致未设置样式/未发布内容的闪现。如果你不喜欢FOUC，把JS放在上面。如果你想混合使用脚本加载器，减少白页时间，减少HTML头部的FOUC，然后从那里加载脚本。

你可以这样使用它。但是，我认为这不是一个好主意。webshims lib为webforms样式错误气泡/更改验证文本添加了一些不错的扩展，还修复了Modernizer未检测到的一些bug。另外，我很确定polyfiller.js的性能提升幅度太小。事实上，由于您首先加载polyfiller，然后加载垫片，对于许多浏览器来说，您将有一些小的性能损失。也就是说，你可以这样做：

我添加了这个警告，因为我知道，很多人只是在DOM就绪回调中添加所有内容

//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，您必须另外做两件事：

指定多边形填充的路径这在正常嵌入中是不需要的，因为我们可以获得最后一个脚本的脚本路径 你可以这样做，方法如下：

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

仅当您不想在DOM Ready上编写HTML5功能时，而不是当您想在submit、invalid、input等上编写功能时。 您必须使用webshims中的extra-ready方法，因为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就绪/功能加载后立即编写脚本，应执行以下操作：

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表单当前状态的一些信息。knwon有两个问题：

最初调用$.webshims.activeLang将不起作用。此方法已从polyfiller移动到domextend 我误解了HTML5规范的一部分，并将我的实现与一个关于交互式约束验证的旧规范混合在一起。结果是，歌剧和我的实现是不正确的，所以不要使用这个：-。 这两个错误都已修复。我将花一些时间进行额外的测试，因此您可以期待本周末发布错误：-。如果您需要其中一些功能，您可以获取当前的主分支，它非常稳定，但在发布之前，我需要做更多的x浏览器测试

关于一些性能规则：

大多数yslow规则是在2006年编写的。从那时起，情况发生了很大变化：

JS不再完全阻塞。只有IE6和IE7有这些问题。但80%的浏览器没有 大多数浏览器可以同时加载2个以上的文件（大多数在4-8个文件之间） 从我的测试加载在6和12之间！！！是的，12个文件js文件比加载一个js文件要快得多。测试是在多个实际网站上进行的，这些网站的css和图像数量和大小都不同

---

将JS放在底部不会减少页面加载时间。将JS放在底部只会减少所谓的白页时间，但这总是会导致未设置样式/未发布内容的闪现。如果你不喜欢FOUC，把JS放在上面。如果你想混合使用脚本加载器，减少白页时间，减少HTML头部的FOUC，然后从那里加载脚本。

或者，让我看看另一个好的HTML5表单，或者，告诉我另一个好的HTML5表单shimI没有专门使用webforms，但Alexander的webshim肯定是一个可靠的技术。嗨Alexander。我看过你的剧本，效果很好。一个简短的问题。我是个新手。目前没有办法将yepnope与polyfill.js一起使用吗？我试过像这样的yepnope{test:blah，nope:'/_scripts/polyfiller.js'，complete:function{$.webshims.polyfill'forms'；}；但在控制台中，我得到“您应该在DOM就绪之前调用$.webshims.polyfill”。有什么想法吗？我没有专门使用webforms，但Alexander的webshim肯定是一种可靠的技术。嗨，Alexander。我看过你的剧本，效果很好。一个简短的问题。我是个新手。目前没有办法将yepnope与polyfill.js一起使用吗？我试过像这样的yepnope{test:blah，nope:'/_scripts/polyfiller.js'，complete:function{$.webshims.polyfill'forms'；}；但在控制台中，我得到“您应该在DOM就绪之前调用$.webshims.polyfill”。有什么想法吗？