html5开发要用到那些js
在HTML5开发中，Modernizr是一款必不可少的JavaScript工具，它具备以下多种实用功能：
1. CSS相关功能
特征检测添加类名
Modernizr可以通过特征检测（涵盖HTML5元素，如canvas；或是CSS3属性，如border-radius）为HTML元素添加相应的类名。对于浏览器不支持的特性，会添加以no-为前缀的类名。这样做的好处是，开发者可以根据这些类名，为不同浏览器支持情况编写不同的CSS样式，实现优雅降级或渐进增强。
处理无JS环境
Modernizr会为HTML元素添加名为“no-js”的类。即便没有JavaScript环境来执行Modernizr，页面也能提供相应的备用样式。而当Modernizr成功执行后，它会自动将“no-js”类替换为“js”类名，并且添加各种特征检测结果的类名。
2. JS相关功能
Modernizr会在全局作用域中添加Modernizr变量。开发者可以通过调用Modernizr.<featurename>的方式来检测浏览器是否支持某个特定的特性。例如，要检测浏览器是否支持canvas元素，可以使用Modernizr.canvas，如果返回true，则表示支持；返回false则表示不支持。
3. YEPNOP功能
按需加载
Modernizr可以引入YepNop功能，通过调用Modernizr.load()实现按需加载。按需加载意味着只有在满足特定条件时，才会加载所需的资源，这样可以减少不必要的资源请求，提高页面加载性能。
以下是一个示例代码：
<script src="modernizr.js"></script>
<script>
Modernizr.load({
test: Modernizr.inputtypes.date,
nope: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js',
'jquery-ui.css'
],
complete: function() {
$('input[type=date]').datepicker({
dateFormat: 'yy-mm-dd'
});
}
});
</script>
在上述代码中，test属性用于检测浏览器是否支持input元素的date类型。如果不支持（test结果为false），则会加载nope数组中指定的资源，包括jQuery、jQuery UI库以及对应的CSS文件。当资源加载完成后，会执行complete回调函数，为input[type=date]元素添加日期选择器。
Yepnope使用参考
Yepnope的基本使用方式如下：
yepnope([{
test: /* boolean(ish) - Something truthy that you want to test */,
yep: /* array (of strings) | string - The things to load if test is true */,
nope: /* array (of strings) | string - The things to load if test is false */,
both: /* array (of strings) | string - Load everytime (sugar) */,
load: /* array (of strings) | string - Load everytime (sugar) */,
callback: /* function ( testResult, key ) | object { key : fn } */,
complete: /* function */
// ...
}]);
test：一个布尔值或可转换为布尔值的表达式，用于测试某个条件。yep：当test结果为true时，需要加载的资源，可以是字符串或字符串数组。nope：当test结果为false时，需要加载的资源，可以是字符串或字符串数组。both：无论test结果如何，每次都会加载的资源，可以是字符串或字符串数组。load：与both类似，也是每次都会加载的资源，可以是字符串或字符串数组。callback：加载完成后的回调函数，可以是一个函数或一个对象（键为资源名称，值为回调函数）。complete：所有资源加载完成后执行的回调函数。
通过合理使用Modernizr及其提供的功能，开发者可以更好地处理HTML5开发中不同浏览器的兼容性问题，提升用户体验。