shim是什么?polyfill是什么?

发表于:
来源:阿酷技术学习
作者:阿酷

在javascript世界里,如果你做过html5 web 开发,你经常会遇到两个词汇:shim和polyfill

shim是什么?

shim,是一个楔子,垫片,填隙片,如果一个墙开裂了,我们可以把它填上去,把墙抹平。

在javascript中,一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。

polyfill是什么?

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to providenatively. Flattening the API landscape if you will.

翻译就是,polyfill就是一段代码或一个插件,提供你原生浏览器不具有的功能,然后你可以正常的使用语言api的功能。

关于polyfill,据说来自于Polyfilla,Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子),把旧的浏览器想象成为一面有了裂缝的墙,这些polyfill会帮助我们把这面墙的裂缝抹平。

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

从关系上看,shim大于polyfill,polyfill主要指浏览器上不具有的功能。

shim 是将不同 api 封装成一种,比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象;

polyfill 特指 shim 成的 api 是遵循标准的,其典型做法是在IE浏览器中增加window.XMLHttpRequest ,内部实现使用 ActiveXObject。

Paul Irish发布过一个Polyfills的总结页面“HTML5 Cross Browser Polyfills”.es5-shim是一个shim(而不是polyfill)的例子,它在ECMAScript 3的引擎上实现了ECMAScript 5的新特性,而且在Node.js上和在浏览器上有完全相同的表现(译者注:因为它能在Node.js上使用,不光浏览器上,所以它不是polyfill).

这个页面搜集了HTML5 Cross Browser Polyfills一些polyfill和shim,有兴趣的可以看一下。

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills