1

我第一次尝试将 polyfills 用于 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 填充，但唯一一个看似在起作用的是在顶部字段上工作的“自动对焦”。

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

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

阿迪。

4

2 回答 2

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

问候亚历克斯

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

于 2011-03-26T22:59:35.357 回答
2

你可以这样使用它。但是，我认为这不是一个好主意。webshims lib 为 webforms 添加了一些不错的扩展（样式错误气泡/更改验证文本），还修复了一些 bug，这些 bug 没有被modernizr 检测到。此外，我很确定您不会看到性能改进（polyfiller.js 太小）。事实上，由于您首先加载 polyfiller，然后加载 shim，因此对于许多浏览器来说，您将受到一些小的性能“惩罚”。这就是说，你可以如何做到这一点：

我添加了这个警告，因为我知道，很多人只是在 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，你必须额外做两件事：

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

你这样做，以下方式：

$.webshims.loader.basePath = 'path-to-shims-folder/';
$.webshims.polyfill();
  1. 仅当您不想在 DOM-Ready 上编写 HTML5 功能脚本时（如果您想在提交、无效、输入等情况下编写功能脚本）

您必须使用 webshims 中的额外准备方法，因为在加载脚本之前，DOM-Ready 可能已经发生（通常，webshims 会延迟准备事件以使处理顺利进行）

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

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

如果您只需要标准功能并且不想编写 webshim 脚本，那么您应该这样做：

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

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

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

关于一些性能规则的东西：

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

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

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

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

于 2011-03-28T20:28:02.000 回答