shim和polyfill傻傻分不清
shim和polyfill傻傻分不清
关于JavaScript兼容性的问题,当前主要有两种解决方案,本人目前才大四,经常在CSDN和掘金上看文章的时候看到这两个词,映像上是解决JS兼容性的,但是好像大概也许有一些差别,今天特地翻阅了下网上的文章,谢谢自己的理解和心得。
先说说shim
shim是一个库(例如jquery),他将在不同浏览器上兼容性不同的api封装成一种,这么说可能有点懵,先举个例子:
//jquery的ajax函数可以在大部分浏览器上使用,why?
$.ajax({
url:"",
data:"",
...
})
为啥jquery的ajax可以在大部分浏览器上使用,因为其根据浏览器选择使用XMLHttpRequest和ActiveXObject(在IE上)来创建ajax对象,它将一个到能解决兼容性的API引入当前环境中。
shim的核心思想就是乾坤大挪移,将不同浏览器api(例如上述ajax)问题全部移交至第三方api来实现,所以在一般情况下shim是不遵守标准的,需要coder花费额外的精力去学习他的api(例如jquery,虽然需要学习成本,但是能实现一套js代码兼容多个浏览器的问题)。
又TM要学,真烦。
再谈谈ployfill
ployfill是一个js库,他的核心思想就是不搞太多飞机,你没有标准的东西我帮你搞一套就完事儿了,上代码:
//js调用硬件设备(摄像头、麦克风)在不同浏览器上的polyfill
navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia;
这是最近在学WebRTC的第一行代码,最小精悍的一个polyfill,navigator.getUserMedia
是标准获取电脑硬件设备的api,若当前运行环境中navigator.getUserMedia
为undefined的话则判断下一个api(navigator.webkitGetUserMedia
)是否存在,若存在就赋给标准api:navigator.getUserMedia
,后面的以此类推。
说到这polyfill的作用就很明显了:万变不离其宗,ployfill只是一个js库,帮你针对不同浏览器的兼容性问题,帮你选择对应浏览器的api映射到标准api上(或者帮你实现了一遍api,但大前提是他会将实现的api最终依附于标准api上)。
//另一种ployfill,如果当前环境中的Number对象中没有isNaN方法polyfill就帮你实现一套
if(!Number.isNaN) {
Number.isNaN = function(num) {
return(num !== num); }
}
嘿嘿嘿,引入一个js库,然后记住标准就行了,终于不用回想起被IE兼容性支配的恐惧,还不用再学第三方的api,是不是心理暗爽。
shim VS polyfill
针对使用shim的库来实现兼容性问题,coder们需要额外的时间来学习库中的api,而如果使用polyfill的话,只需要遵守官方的api实现即可。
与此同时,如果旧的浏览器api不在被支持时,shim库需要通过重构对应的代码来消除旧api的支持;而polyfill来说只需要删除相关api的引入即可。
上一篇: 如何使用dom4j如何读写xml文件