shim和polyfill的区别

今天看vue的响应原理,突然被提到shim这个词,翻阅些许资料然后整理出以下这些内容。

在JavaScript的世界里,有两个词经常被提到,shim和polyfill。

首先理解这两个词之前我们先来了解一下JavaScript 的兼容性问题。

举个例子,旧版本的 IE 不支持标准的 XMLHttpRequest,但支持自家的 ActiveXObject 方法,对此有以下两种解决方案。

jQuery 的做法是,把两种方法封装成 $.ajax 函数。使用时,只要熟悉 $.ajax 方法就可以了,不用考虑浏览器的兼容问题。

// 伪代码$.ajax = function(url) { if (!isIE) {XMLHttpRequest(url) } else {ActiveXObject(url) }}

还有一种方法是,判断浏览器是否支持 XMLHttpRequest,如果不支持,就用 ActiveXObject 实现一个功能跟 XMLHttpRequest 完全一样的函数。

// 伪代码if (!XMLHttpRequest) { XMLHttpRequest = function(url) {ActiveXObject(url) }}

这两种方法看似没什么太大的不同,都能解决跨浏览器的兼容问题。但如果你仔细思考,就会发现,这两种方法代表着两种不同思维方式。后者明显的思想更加先进。

我们来看看这两种做法有什么不同。

  1. jQuery 没有遵循标准,这带来了一个学习成本的问题,我们需要学习这个函数的使用方法;而后者在使用上和标准 API 没什么不同,不存在学习成本。
  2. 如果某天我们不需要兼容旧 IE 了,后者只要移除兼容代码就可以了,不用改动代码;而前者显然没有这个优势,需要重构代码。遵循标准的代码在维护性方面明显更好。
  3. 后者还有个好处是,可以按需加载,只在旧浏览器上加载兼容代码。
  4. 标准的代码在可移植性方面也更具优势。

我们再来看看 shim 和 polyfill 的概念:

一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。
一个polyfill就是一个用在浏览器API上的shim。

我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill,然后新旧浏览器就都可以使用这个API了,术语polyfill来自于一个家装产品Polyfilla。

Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子)。

记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙,这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)。
Paul Irish发布过一个Polyfills的总结页面“HTML5 Cross Browser Polyfills”.es5-shim是一个shim(而不是polyfill)的例子,它在ECMAScript 3的引擎上实现了ECMAScript 5的新特性,而且在node.js上和在浏览器上有完全相同的表现(译者注:因为它能在node.js上使用,不光是浏览器上,所以它不是polyfill)。

举个栗子,有些旧浏览器不支持Number.isNaN方法,Polyfill就可以是这样的:

if(!Number.isNaN) {

  Number.isNaN = function(num) {
    return(num !== num);
  }
}
假如浏览器没有Number.isNaN方法,那咱们就给它添加上去,所谓Polyfill就是这样解决API的兼容问题的。
 
参考链接:https://www.cnblogs.com/wy1935/p/7094251.html
     https://www.aliyun.com/jiaocheng/773254.html
上一篇:前端专业术语: shim 和 Polyfill,了解下


下一篇:JavaScript术语:shim 和 polyfill