带有 polyfill 的 html5 表单 - 值得吗？

Question

尽管围绕 html5 表单的所有讨论，在我看来，在大多数情况下，通过这条路线您正在创建额外的工作。

以日期选择器字段为例。这个的 native html5 实现在每个浏览器中呈现不同。此外，对于不支持此功能的浏览器，您的 polyfilled 解决方案(例如 jquery UI)也会以不同方式呈现。

现在，当我们使用 jquery 拥有一个完美工作和统一的解决方案时，我们已经为同一个表单引入了多个自定义和维护点!

我很想听听这方面的一些真实世界经验，因为我对所有的嗡嗡声感到恼火!

Answer 1

首先，我是 webshims lib(其中一个 polyfill，不再维护)的创建者。回答你的问题:

是否值得为项目创建表单 polyfill？

不，只为一个项目做这件事真的很难。好吧，我做到了，只是因为我想使用现代技术。

是否值得为项目使用像 webshims 库这样的表单 polyfill？

绝对是的!原因如下:

1。漂亮的标准化声明式标记 API

在包含 webshims 并编写以下脚本之后:

//polyfill forms (constraint validation) and forms-ext (date, range etc.)    
$.webshims.polyfill('forms forms-ext');

您可以简单地将小部件和约束写入表单:

<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />

这将创建 3 个不同的小部件，每个小部件的配置都不同。不需要额外的 JS，只需要标准化、干净和精简的代码。

2。标准化的 DOM-API

DOM API 也是如此。这里仅举两个例子:Combining two date fields 和 combining a range field with a date field。

3。在现代浏览器中无需 JS 即可工作

在旧浏览器中优雅地降级并在现代浏览器中运行良好。

4。现代浏览器中的文件大小更小

特别适用于移动设备(例如 iOS 5、Blackberry 支持日期)

5。更好的用户体验 [主要是移动端]

更好的移动用户体验(更好的触摸输入用户界面、更好的性能、适合系统)，如果你正在使用它:type="email"、type="number" 和 type="date"/type="range"

但是，可定制性呢？

我是一家更大机构的开发人员，您绝对正确，大多数客户和大多数设计师不会容忍太大的差异，但我仍然想使用现代技术，这意味着 webshims lib 可以为您提供两全其美的服务.

自定义约束验证

填充部分

//polyfill constraint validation
$.webshims.polyfill('forms');

自定义错误气泡的 UI:

//on DOM-ready
$(function(){
    $('form').bind('firstinvalid', function(e){ 
        //show the invalid alert for first invalid element 
        $.webshims.validityAlert.showFor( e.target ); 
        //prevent browser from showing native validation message 
        return false; 
    });
});

生成以下标记:

<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert"> 
    <span class="validity-alert"> 
        <span class="va-arrow"><span class="va-arrow-box"></span></span> 
        <span class="va-box">Error message of the current field</span> 
    </span> 
</span>

自定义无效/有效表单域的样式:

.form-ui-invalid {
    border-color: red;
}

.form-ui-valid {
    border-color: green;
}

自定义有效性警报的文本:

<input required data-errormessage="Hey this is required!!!" />

现在，重点是什么:

1. 没有 JS 仍然有效
2. 现代浏览器仅加载自定义代码(最小 3kb/gzip)，而旧浏览器确实加载额外的 API(约 13kb 最小/gzip)(表单包含的不仅仅是约束验证 API，例如还有自动对焦，占位符、输出等)

您的特殊示例是什么，自定义日期字段？

没问题:

//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', { 
    replaceUI: true
});

$.webshims.polyfill('forms forms-ext');

还有这里:

1. 在现代浏览器中仍然可以在没有 JS 的情况下工作
2. 现代浏览器只加载 UI 和 UI-API 胶水，但不加载 DOM-API(valueAsNumber、valueAsDate...)

现在，最好的来了:

//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', { 
    //oh, I know this is bad browser sniffing :-(
    replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});

$.webshims.polyfill('forms forms-ext');

1. 更小的文件大小和更好的移动浏览器用户体验(大多数客户和大多数设计师会喜欢你在移动设备上拥有不同的用户界面!!!)
2. 在现代浏览器中仍然可以在没有 JS 的情况下工作
3. 现代浏览器只加载 UI 和 UI-API 胶水，但不加载 DOM-API(valueAsNumber、valueAsDate...)