html5表格与polyfills - 是否值得？

时间：2012-01-30 16:52:31

标签： html5 html-form polyfills webshim

尽管围绕着html5表单的所有嗡嗡声，但在我看来，在大多数情况下，通过这条路线，你正在创造额外的工作。

例如，使用一个datepicker字段。本机html5实现在每个浏览器中呈现不同。此外，对于不支持此功能的浏览器，您的polyfilled解决方案（例如jquery UI）也将以不同方式呈现。

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

我很想知道这个领域的一些真实世界的经历，因为我对所有的嗡嗡声感到恼火！

3 个答案:

答案 0 :(得分：85)

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

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

不，这对一个项目来说真的很难。好吧，我已经做到了，仅仅是因为我想使用现代技术。

是否值得为项目使用表单polyshill，如webshims lib？

绝对是的！这就是为什么：

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

自定义错误冒泡的用户界面： 

//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 min / gzipped），旧浏览器会加载额外的API（约13kb min / gzip）（表单不仅包括约束验证API，例如还有自动对焦，占位符，输出等）

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

    没问题：

    //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 ......）

      3. 现在，这里是最好的：

      //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. 移动浏览器的文件大小更少，用户体验更好（大多数客户和大多数设计师都会喜欢你在移动设备上使用不同的UI！）
      2. 在现代浏览器中没有JS仍然可以使用
      3. 现代浏览器只加载UI和UI-API粘合剂，但不加载DOM-API（valueAsNumber，valueAsDate ......）

答案 1 :(得分：5)

为了支持Alexander的webshims答案，我已经从UX，UI和前端角度对HTML5输入的跨浏览器行为进行了大量研究。我的结论是，跨设备和浏览器首选行为的唯一方法是使用像webshims这样的polyfill。其中很大一部分原因是无法在日期和数字键盘等设备上使用本机功能，而无法支持不实现这些功能的桌面浏览器。

以下是对日常输入在不同原生实现与流行插件之间的行为的分析：
Date input analysis - Google spreadsheet
（您可以看到webshims如何在所有实现中获得最佳效果）

下面分析现实世界中输入类型如何在本地浏览常见浏览器以及使用webshim后备版本： UX analysis of HTML5 inputs with webshim fallback - Google spreadsheet

以下是用于分析这些输入的演示页面：
HTML5 inputs page demo - CodePen

答案 2 :(得分：4)

我也持怀疑态度，如果真的值得通过polyfill层而不是使用直接的jquery UI。使用webshims lib和HTML5之后，我可以立即看到有更少的javascript代码。不再需要验证插件。感谢Alexander创建和支持这个精彩的polyfill，webshims lib。以下是在提交单击表单时进行ajax调用的示例。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script>
    // set options for html5shiv
    if(!window.html5){
        window.html5 = {}; 
    }
    window.html5.shivMethods = false;
</script>
<script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="webshims/js-webshim/minified/polyfiller.js"></script>
    <script class="example">
        $.webshims.setOptions({
            //we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc
            waitReady: false
        });
        //load all polyfill features
        $.webshims.polyfill('forms forms-ext');     
    </script>
<script type="text/javascript">
$(function(){
    var frm = $('#tstForm');
    frm.submit(function () {
    var someDate=$('#someDate').val();
     alert('someDate:'+someDate);
     // you can make your ajax call here. 

        return false;
    });
});
</script>
</head>
<body>
<form id="tstForm">
  Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input>
  Full Name:<input id="fullName" name="fullName" type="text" required></input>
  Age:<input id="age" name="age" type="number" required min="18" max="120"></input>
  <input type="submit" value="Submit"/>
</form>

</body>
</html>
相关问题
最新问题