shim和polyfill

在前端有两个词总被提及：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) }}

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

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

jQuery 没有遵循标准,这带来了一个学习成本的问题,我们需要学习这个函数的使用方法;而后者在使用上和标准 API 没什么不同,不存在学习成本。

如果某天我们不需要兼容旧 IE 了,后者只要移除兼容代码就可以了,不用改动代码;而前者显然没有这个优势,需要重构代码。遵循标准的代码在维护性方面明显更好。

后者还有个好处是,可以按需加载,只在旧浏览器上加载兼容代码。

标准的代码在可移植性方面也更具优势。

什么是shim?

shim 是一个库,将不同 api封装成一种，比如 jQuery的 $.ajax 封装了 XMLHttpRequest和 IE用ActiveXObject方式创建xhr对象。它将一个新的 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 {// ... }}

什么是Polyfill?

Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异。比如，html5 storage(session,local), 不同浏览器，不同版本，有些支持，有些不支持。

Polyfill（Polyfill有很多，在GitHub上https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills），帮你把这些差异化抹平，不支持的变得支持了（典型做法是在IE浏览器中增加 window.XMLHttpRequest ，内部实现使用 ActiveXObject。）

其实一个polyfill的意思就是，比如开发者想要一个格式化时间的函数，然后现有的api都没有，于是作者自创一个stringDate的方法，那么这个方法就成为一个polyfill。

如何使用 Polyfill ？

直接引入项目，最简单就是CDN: