shim 和 polyfill

在前端，有两个词常常被说起：shim 和 polyfill。最近在翻译文章时又遇到了 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 是 shim 的一种，它的 API 是遵循标准的。polyfill 的作法一般是：先检查浏览器是否支持某个标准 API，若是不支持，就使用旧的技术对浏览器作兼容处理，这样就能够在旧的浏览器上使用新的标准 API。

但在实际状况下，咱们通常说 shim，会特指它的 API 不是遵循标准的，与 polyfill 对立。

上面介绍的两种方法，前者是 shim，然后者是 polyfill。polyfill 的设计理念更值得去推崇。

理解了概念后，polyfill 的思想就能指导咱们如何去设计 API。

好比说，旧浏览器不支持 ES6 的 Array.prototype.find 方法，咱们想要在项目中使用 Array.prototype.find，只要 polyfill 就好了，而不是封装一个新的方法。

// 应该这么作
if (!Array.prototype.find) {
    Array.prototype.find = function() {
        // ...
    }
}

// 而不是这么作
function arrayFind() {
    if (Array.prototype.find) {
        // ...
    } else {
        // ...
    }
}

固然，不少新的 API 的兼容性问题，网上已经有成熟的 polyfill 方案了，没必要重复造轮子。