Modernizr:专为HTML5和CSS3开发的功能检测类库

原创 Don.tWarry 随笔 js框架 1284阅读 2014-08-20 11:05:05 举报

最近开发时发现了一个很不错的开源js库—Modernizr
(说起来汗颜,这个库已经出来了好几年了,现在才知道有这个东东。。。)
好了,让我们一起来看看这是个什么东西

1.首先Modernizr 是个什么东西,或者说是干什么的呢?
有人说,Modernizr是为HTML5和CSS3而生的,尤其是现在html5与css3的越来越普及,越来越多的新的标签和方法的加入,让我们前端开发出兼容性和健壮性的代码越来越困难,而Modernizr应运而生。

Modernizr(维基百科)最主要的作用能够告诉开发者,浏览器是否已经实现他们想要的功能,并让开发者在浏览器上可以充分利用这些新功能,或者自己尝试制作解决方案来支持那些老旧的浏览器。
不同于传统透过解析浏览器的用户代理的识辨方式的不可靠性和不全面性,Modernizr通常会建立一个特定样式的元素,然后立刻尝试改写这些元素的设定,若在支援的浏览器上,元素会回传有意义的值,并通过这些结果,来判断浏览器对新标签元素等的支持情况。(Modernizr 有一点做的特别好,你可以自由选择需要判别的元素,进行下载,数据大小范围大概在4k到44k左右,必须赞个,有时候真的只需要几个判断,很多框架都必须全部下载下来,真的很郁闷。个人觉得后续的框架开发就的应该像Modernizr一样进行框架功能分离,这样开发也会更加自由!)

2.Modernizr 怎么使用(下面只是简单介绍下,其基本使用情况,具体请见官网
首先导入
[code] <head>
<title>Doughnut Chart</title>
<script src="../js/modernizr.custom.70271.js"></script>
</head>[/code]
对于css来说 Modernizr会生成2类样式
一类是正常的,另一种就是“no-”开头的对应样式,如关于canvas的样式
[code].canvas h1 {
color: gray;
}

.no-canvas h1 {
color: red;
}[/code]
不要忘记了Modernizr并不是给你提供解决方案的,它只是帮助你判别的,当浏览器支持前者时,那执行前者样式,若不支持则会默认执行后者,至于样式的具体样子,就的靠我们自己去进行兼容性控制了

在js中判断,一般是如下样子的,经过判断然后做不同处理
[code]
$(function() {
if (Modernizr.canvas) {
。。。。。
} else {
。。。。
}
});[/code]

当然Modernizr还提供了已个比较方便的方法Modernizr.load(),用于加载不同的js等等(Modernizr最佳使用方式,还是和其他兼容性插件结合使用啦)
看下面官方的栗子,(小弟不才,随便按照自己的理解翻译下,可能有不对的地方,请直面指出来吧,大家一起学习!)

[code]// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
// Presentational polyfills
{
// Logical list of things we would normally need
// 下面是我们需要判断的逻辑表达式
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,

// Modernizr.load loads css and javascript by default
// Modernizr.load默认加载的js和css
nope : ['presentational-polyfill.js', 'presentational.css']

},
// Functional polyfills
{
// This just has to be truthy
// 以下必须为真
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
// 你可以以数组的形式加载对应的资源
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
// 只有上面的数据被加载执行完了之后才会执行
myApp.init();
}
},
// Run your analytics after you've already kicked off all the rest
// of your app.
// 执行完你所有的逻辑分析后,下面就开始你的app的其他代码(好像是这个意思吧)
'post-analytics.js'
]);[/code]

具体参数用法如下:
该函数的test属性是表明要测试是否支持的新特性,如果测试成功支持的话,就加载yep属性设置的脚本,如果不支持就加载nope属性设置的脚本,不管是否支持,both属性里设置的脚本都会加载的。

评论 ( 3 )
最新评论
王Eliot 2015-09-18 23:28:22 3F

可是还是没摸清下载方法

Don.tWarry 2014-08-20 17:52:38 2F

恩恩,刚开始研究,还有很多地方不太清楚,不过以后可以多交流

netsrong 2014-08-20 16:02:47 1F

运行这个插件,html都会加上这些,支持某些属性<html class=" js flexbox canvas webgl no-touch geolocation postmessage hashchange history websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations cssgradients csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers svg inlinesvg targetselector nthchildselector" lang="en" itemscope="" itemtype="<a href="http://s