欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

shim和polyfill傻傻分不清

程序员文章站 2022-03-03 16:59:30
...

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代码兼容多个浏览器的问题)。
shim和polyfill傻傻分不清
又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和polyfill傻傻分不清

shim VS polyfill

针对使用shim的库来实现兼容性问题,coder们需要额外的时间来学习库中的api,而如果使用polyfill的话,只需要遵守官方的api实现即可。
与此同时,如果旧的浏览器api不在被支持时,shim库需要通过重构对应的代码来消除旧api的支持;而polyfill来说只需要删除相关api的引入即可。