用Modernizr和Yepnope进行递归增强

Alex Sexton的yepnope.js脚本加载程序的1.0版已于上周发布，因此我认为这是一个向您展示如何将Yepnope与Modernizr结合使用HTML5功能而又不招致最新用户下载的绝佳时机。 -划痕的浏览器。

什么是回归增强？

您可能已经熟悉渐进增强的概念：设计在所有浏览器中均可使用的功能的基准版本，然后为功能更强大的浏览器添加功能。

“ polyfill ”或“回归增强”技术仅意味着您可以继续使用新功能，然后使用JavaScript模仿旧版浏览器中的本机行为。因此，您无需使用脚本在所有浏览器上添加阴影，而只需使用box-shadow属性编写CSS，然后包含一个脚本，该脚本透明地采用该属性并使用您指定的值在其中创建阴影JavaScript。

什么是Modernizr？

对于不熟悉它的人来说， Modernizr是一个很小的JavaScript库（压缩后为3.7KB），可检测浏览器中是否存在HTML5和CSS3功能。瑞娜（Raena）在最近的有关创建逐步增强的图像库的教程中使用了它，凯文（Kevin）在最近的SitePoint播客中采访了图书馆的创建者之一保罗·爱尔兰（ Paul Irish）。

Modernizr非常适合回归增强，因为它使您知道何时可以依赖浏览器功能，何时需要依靠JavaScript或替代样式。

使用Modernizr的主要方法有两种。最常见的方法是依靠添加到html标记中的HTML类。在最新的Firefox 4 beta中使用Modernizr查看页面时，这是我在开头<html>标记中看到的内容：

<html class="  js flexbox canvas canvastext webgl no-touch geolocation postmessage  no-websqldatabase indexeddb hashchange history draganddrop no-websockets  rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow  textshadow opacity no-cssanimations csscolumns cssgradients  no-cssreflections csstransforms no-csstransforms3d csstransitions  fontface video audio localstorage no-sessionstorage webworkers  applicationcache svg inlinesvg smil svgclippaths" lang="en">

所有这些类都告诉我浏览器中可用的功能。例如，我有@ font-face，web worker和CSS3框阴影，文本阴影和border-image，但是我没有websocket或3D CSS转换。因此，在我的CSS中，我可以执行以下操作：

.borderradius .box {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}.no-borderradius .box {// fallback code providing an alternate styling to browsers that don't support border-radius
}

这很简单。最酷的一点是，Modernizr还为您提供了JavaScript API，该API可以告诉您某个功能是否可用，包括一些未显示在<html>标记类中的功能。例如，假设我有一些JavaScript代码为输入元素提供占位符值。如果浏览器支持占位符属性，则无需运行此代码，因此我可以在执行代码段之前使用Modernizr进行检查：

if(!Modernizr.input.placeholder) {// custom placeholder code
}

这样，我的代码将仅在没有内置的占位符文本浏览器支持的情况下运行。

问题

不过，这里仍然存在一个小问题。如果浏览器确实支持占位符属性，那么我仍然要求它下载一堆除了模拟该属性的行为外什么也不做的代码。我相信您会同意这有点浪费！输入yepnope.js 。如果满足某些条件，Yepnope将加载脚本。最好的部分是它与Modernizr完美地集成在一起，因此所有内容都可以固定到位。

图书馆网站上最简单的示例如下所示：

yepnope({test : Modernizr.geolocation,yep  : 'normal.js',nope : ['polyfill.js', 'wrapper.js']
});

如果浏览器支持地理位置定位，则该代码段将从服务器加载normal.js文件；否则，它将同时加载polyfill.js和wrapper.js。

一个实际的例子

现在您已经知道所有部分的工作原理，下面将它们放到一个真实的示例中。假设您有一个简单的注册表单，其中包含用户名，密码和电子邮件地址的字段。这是标记：


<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>yepnope.js test</title><style>div { margin: 10px; }div p { font-size: 12px; color: #333; }</style>
</head>
<body><form><div><label for="username">Username</label><input type="text" required pattern="[a-z0-9_-]{3,15}" name="username" id="username"><p>Between 3 and 15 characters. Only letters, numbers, underscores (_) and hyphens (-) are allowed.</p></div><div><label for="email">Email</label><input type="email" required placeholder="someone@somewhere.com" name="email" id="email"></div><div><label for="password">Password</label><input type="password" required name="password" id="password"></div><input type="submit" value="Submit"></form>
</body>
</html>

该表单使用许多HTML5功能：required属性， placeholder属性和pattern属性。在支持浏览器（例如Firefox 4 beta）中，这提供了占位符文本和一些基本的客户端验证：

占位符属性提供占位符文本

电子邮件输入类型提供内置格式验证

pattern属性提供基于正则表达式的验证

但是，在不支持的浏览器中，您什么也收不到。让我们使用基于JavaScript的polyfill和Modernizr和Yepnope进行修复，以仅在需要时加载它。

步骤1：下载Modernizr和Yepnope

新的自定义Modernizr构建器使您可以将yepnope捆绑到Modernizr中，所以我们就可以做到这一点。前往http://modernizr.github.com/Modernizr/2.0-beta/ 。在这种情况下，我们需要检测的只是表单属性和输入类型，因此请单击这两个复选框，将HTML5 Shim和Modernizr.load（yepnope.js）框打勾。

单击生成，然后下载生成以获取您的自定义Modernizr库。

步骤2：在页面中包含Modernizr

因为Modernizr需要确定是否应该运行其他脚本，并添加CSS可能需要的类，所以应该将其放在HTML的顶部，而不是通常建议的底部：

<script src="modernizr.custom.02401.js"></script>

（请记住用您自己的自定义内部版本号替换。）

步骤3：测试功能支持

现在我们要测试一下浏览器是否支持新的输入类型和属性：

yepnope({test: Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern,nope: 'h5f.min.js'
});

我们正在加载Ryan Seddon的H5F库，该库将模拟在此示例中使用的所有新输入类型和属性。在这种情况下，我们有一个polyfill脚本，它涵盖了许多不同的功能，因此我们要立即检查所有这些功能，并在不支持其中一个的情况下加载polyfill。这并不总是理想的，但是为了说明起见，我们将事情保持简单。

您还会注意到我们在此yepnope调用中未使用“ yep”。很好：如果存在我们要检测的所有功能，Yepnope根本不会做任何事情，这就是我们想要的。

步骤4：执行回呼代码

您可能会想在下一行代码中仅调用新包含的库，但这行不通。 Yepnope.js 异步加载脚本，因此浏览器在进入代码的下一行之前不会等待脚本加载完成。这意味着，如果您尝试使用刚刚告诉Yepnope加载的功能，则可能会出现错误。

相反，Yepnope允许您为每个加载的脚本设置一个回调函数，以在该脚本完成下载后运行。运作方式如下：

yepnope({test: Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern,nope: 'h5f.min.js',callback: function(url, result, key) {H5F.setup(document.getElementById("signup"));}
});

每次加载脚本时，都会调用您指定为回调的函数。这意味着，如果您同时指定了是和否，则回调将被调用两次。幸运的是，回调函数传递了三个有用的参数： url是加载的结果的URL， result是一个布尔值，表示是否通过了测试，而key是一种使用key引用特定资源的方式（您不会暂时不必为此担心）。

在上面的示例中，我仅在nope上加载脚本。结果，无论如何，仅在测试失败的情况下，回调将仅被调用一次，因此我不必担心参数。

步骤5：完成！

信不信由你，您完成了。使用上面的代码，支持新表单功能的浏览器将使用其内置功能，而较早的浏览器将加载JavaScript后备。仅将JavaScript加载到那些不支持的浏览器中，因此您将以更快的加载时间来奖励现代浏览器。更好的是，因为polyfill可以挂接到新属性上，并且不需要任何额外的类，所以该解决方案是面向未来的。随着时间的流逝，越来越少的访问者将下载polyfill，直到最终他们都没有下载。